Két tűz között statikus site generátorok és javascript alkalmazások és a Drupal
Várady Zoltán @drifter! zoltan@farm.co.hu! http://farm.co.hu
http://www.fsz.bme.hu/hungary/homepage_h.html Magyar Honlap
Macromedia DreamWeaver
Navigáció
<TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/20000229035252/http://www.zpok.hu/ pokinfo/"><img SRC="/web/20000229035252im_/http://www.zpok.hu/mainpic/menu1-02.jpg" HEIGHT="50" WIDTH="280" ALT="Bemutatkozunk" BORDER="0"></A></TD> </TR> <TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/20000229035252/http://www.zpok.hu/ szolgaltatasok/"><img SRC="/web/20000229035252im_/http://www.zpok.hu/mainpic/ menu2-02.jpg" HEIGHT="50" WIDTH="280" ALT="Szolgáltatásaink" BORDER="0"></A></TD> </TR> <TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/20000229035252/http://www.zpok.hu/ hirek/"><img SRC="/web/20000229035252im_/http://www.zpok.hu/mainpic/menu3-02.jpg" HEIGHT="50" WIDTH="280" ALT= "Hírek, újdonságok" BORDER="0"></A></TD> </TR> <TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/20000229035252/http://www.zpok.hu/ inter- feszkek/"><img SRC="/web/20000229035252im_/http://www.zpok.hu/mainpic/ menu4-02.jpg" HEIGHT="50" WIDTH="280" ALT="Inter- fészkek" BORDER="0"></A></TD> </TR> <TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/20000229035252/http://www.zpok.hu/ kiadvanyok/"><img SRC="/web/20000229035252im_/http://www.zpok.hu/mainpic/ menu5-02.jpg" HEIGHT="50" WIDTH="280" ALT="Kiadványok" BORDER="0"></A></TD> </TR>
Server-Side Include (SSI) mod_include <!--#include virtual="../menu.html" > <!--#include virtual="/cgi-bin/counter.pl" -->
Teljesítmény
Boost Boost *.html *.html.gz
NGINX Boost *.html *.html.gz
Varnish
Edge Side Include ESI
Read Only Web Céges bemutatkozó oldalak Online magazinok Blogok Hány fejlesztett oldalad lehetne akár statikus HTML? Mi az amit nem lehet megoldani?
Statikus site generátorok!! Jekyll, OctoPress, MiddleMan, Docpad, Nanoc, Punch, Kirby, Stacey, PieCrust, Hammer http://modernstatic.com
Bemenet: fileok + + TARTALOM LAYOUT STÍLUS HTML, Markdown, Textile, Liquid, Twig, Handlebars, ERB, PHP, CSS, SASS, Compass, LESS, Kimenet: HTML + CSS + JS
- - - layout: post title: "Drupal Hétvége 2013" date: 2013-11- 08 15:02 comments: true author: Csáki István categories: - Drupal Hétvége - drupal.hu - hírek - - - A Drupal magyar közössége **2013. november 16- án és 17- én**, szombaton és vasárnap megrendezi a **Drupal Hétvége 2013** elnevezésű rendezvényt a Budapesti Műszaki és Gazdaságtudományi Egyetem Informatika épületében (1117 Budapest, Magyar tudósok körútja 2.) valamint a Nemzeti Információs Infrastruktúra Fejlesztési Intézetben (NIIF, 1132, Budapest, XIII. kerület, Victor Hugo u. 18-22.).! * **A hétvégén való részvétel ingyenes, de [online regisztrációhoz kötött] (http://drupal.hu/konferencia/2013/jelentkezes).** (Jelentkezés november 11- ig, vagy amíg a helyek el nem fogynak.) * A két napos program részleteit [itt megtekintheted.](/konferencia/2013/ program)
DEMO
Előnyök Minimális infrastruktúra Minden file alapú: egyszerű mentés, verziókezelés, minden egy helyen van Github + Github Pages + Jekyll + Prose.io
Jó de akkor hogy lehet kommentelni? Facebook comments Disqus egyéb külső szolgáltató vagy nem is kellenek a kommentek?
Űrlapot beküldeni? WuFoo webform.com (Drupal webform alapú) sima HTML űrlap
Emailt küldeni? Mandrill Sendgrid Mailgun
Keresni? Google Custom Search Engine Yahoo BOSS lunr.js
Jelszó mögé rejteni? HTTP Basic Auth
Mégiscsak kellene egy picike adatbázis Firebase MongoDB REST vagy egyéb service API
Jójó de hogy fog Béluka cikket feltölteni Gitbe? a Markdown megtanítható Prose.io Dekyll de lássuk be, elsősorban fejlesztőcsapatok blogolnak vele
Megbízhatunk-e külső szolgáltatókban? Mindenki döntse el maga. Én személy szerint megbízok.
Hogy jön ide a Drupal? HTMLExport modul wget -m Dekyll Drupal 8 ESI Drupal 8 RESTful Web Services, HAL
Drupalból statikus HTML? HTMLExport modult fel lehet-e fejleszteni? Boost modult át lehet-e alakítani? Megkerüljük-e a Drupal theme rendszert, és file helyett adatbázisból nyomtatunk HTML-t?
II. rész: JS keretrendszerek
Történeti áttekintés Űrlapok JavaScript AJAX JQuery JS framework / single page app
jquery + DOM manipuláció row.db = parsefloat(tr.find('.db- input').val()); row.egysegar = parseint(tr.find('.egysegar- input').val()); row.igenyelt = parseint(tr.find('.igenyelt- input').val()); row.koltseg = row.db * row.egysegar; if (row.igenyelt > row.koltseg) { tr.find('.koltseg').text(format_number(row.koltseg)).addclass('error'); tr.find('.igenyelt- input').addclass('error'); } else { tr.find('.koltseg').text(format_number(row.koltseg)).removeclass('error'); tr.find('.igenyelt- input').removeclass('error'); }
Binding (knockout.js) <td> <select name="meters" data- bind="value: meters"> <option value="1">1 méter</option> <option value="1.5">1,5 méter</option> <option value="2">2 méter</option> </select> </td> <td data- bind="money: meters_netto"></td> <td data- bind="money: meters_brutto"></td> self.meters = ko.observable(1);! self.meters_netto = ko.computed(function() { var m = this.meters(); if (m == 1) { price = 10000; } if (m == 1.5) { price = 14000; } if (m == 2) { price = 18000; } if (m > 2) { price = 18000 + (m - 2) * 6000; } return price * this.uses(); }, this);! self.meters_brutto = ko.computed(function() { return this.meters_netto() * this.tax; }, this);
DEMO
Előnyök jqueryvel szemben resource / model binding templating MVC / MVW / MVVM / MV* routing
Hogy jön ide a Drupal? Backbone.js (+ Marionette) Underscore.js Drupal 7 Services, RestWS Drupal 8 RESTful Web Services, HAL
Kit válasszak? Backbone.js - a minimalista, D8 core Angular.js - sokoldalú, és meglévő oldalba beépíthető Ember.js - single page alkalmazásokra, cuki logó Knockout.js - interaktív widgetekre Noun.js - igyunk!
Mi a közös? Új megközelítés, egyszerűsítés Gyorsaság - fejlesztésben és oldalletöltésben ^^^^^ ez nagyon fontos! Pattogós oldal = :)
Ajánlott irodalom
http://tinyurl.com/hetvege2013
Kérdések?