Két tűz között. statikus site generátorok és javascript alkalmazások és a Drupal

Átírás

1 Két tűz között statikus site generátorok és javascript alkalmazások és a Drupal

2 Várady

3 Magyar Honlap

4 Macromedia DreamWeaver

5 Navigáció

6 <TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/ / pokinfo/"><img SRC="/web/ im_/ HEIGHT="50" WIDTH="280" ALT="Bemutatkozunk" BORDER="0"></A></TD> </TR> <TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/ / szolgaltatasok/"><img SRC="/web/ im_/ 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/ / hirek/"><img SRC="/web/ im_/ HEIGHT="50" WIDTH="280" ALT= "Hírek, újdonságok" BORDER="0"></A></TD> </TR> <TR> <TD HEIGHT="50" WIDTH="280"><A HREF = "/web/ / inter- feszkek/"><img SRC="/web/ im_/ 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/ / kiadvanyok/"><img SRC="/web/ im_/ menu5-02.jpg" HEIGHT="50" WIDTH="280" ALT="Kiadványok" BORDER="0"></A></TD> </TR>

7 Server-Side Include (SSI) mod_include <!--#include virtual="../menu.html" > <!--#include virtual="/cgi-bin/counter.pl" -->

8

9

10

11 Teljesítmény

12 Boost Boost *.html *.html.gz

13 NGINX Boost *.html *.html.gz

14 Varnish

15 Edge Side Include ESI

16

17 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?

18 Statikus site generátorok!! Jekyll, OctoPress, MiddleMan, Docpad, Nanoc, Punch, Kirby, Stacey, PieCrust, Hammer

19

20 Bemenet: fileok + + TARTALOM LAYOUT STÍLUS HTML, Markdown, Textile, Liquid, Twig, Handlebars, ERB, PHP, CSS, SASS, Compass, LESS, Kimenet: HTML + CSS + JS

21 - - - layout: post title: "Drupal Hétvége 2013" date: :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 ).! * **A hétvégén való részvétel ingyenes, de [online regisztrációhoz kötött] ( (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)

22 DEMO

23

24 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

25 Jó de akkor hogy lehet kommentelni? Facebook comments Disqus egyéb külső szolgáltató vagy nem is kellenek a kommentek?

26 Űrlapot beküldeni? WuFoo webform.com (Drupal webform alapú) sima HTML űrlap

27 t küldeni? Mandrill Sendgrid Mailgun

28 Keresni? Google Custom Search Engine Yahoo BOSS lunr.js

29 Jelszó mögé rejteni? HTTP Basic Auth

30 Mégiscsak kellene egy picike adatbázis Firebase MongoDB REST vagy egyéb service API

31 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

32 Megbízhatunk-e külső szolgáltatókban? Mindenki döntse el maga. Én személy szerint megbízok.

33 Hogy jön ide a Drupal? HTMLExport modul wget -m Dekyll Drupal 8 ESI Drupal 8 RESTful Web Services, HAL

34 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?

35

36 II. rész: JS keretrendszerek

37 Történeti áttekintés Űrlapok JavaScript AJAX JQuery JS framework / single page app

38

39 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'); }

40 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 = (m - 2) * 6000; } return price * this.uses(); }, this);! self.meters_brutto = ko.computed(function() { return this.meters_netto() * this.tax; }, this);

41 DEMO

42 Előnyök jqueryvel szemben resource / model binding templating MVC / MVW / MVVM / MV* routing

43 Hogy jön ide a Drupal? Backbone.js (+ Marionette) Underscore.js Drupal 7 Services, RestWS Drupal 8 RESTful Web Services, HAL

44 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!

45 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 = :)

46

47 Ajánlott irodalom

48

49

50

51

52

53

54 Kérdések?