Přejít k navigační liště

Zdroják » Různé » Střípky z WebExpo 2009 – II

Střípky z WebExpo 2009 – II

Články Různé

V druhém pokračování článku o konferenci WebExpo 2009 si opět připomeneme některé zajímavé přednášky pro vývojáře, programátory a webdesignery, které na konferenci zazněly. Tentokrát se podíváme na vytváření RIA aplikací v Nette, na vývoj řízený testováním či na sémantický web.

Druhý ročník konference WebExpo proběhl ve dnech 16. – 18. října v areálu ČZU v Praze-Suchdole. Třídenní program zahrnoval více než 60 přednášek, workshopů a diskusí na témata, která souvisí s vývojem, rozvojem a provozem webových a mobilních aplikací. Ve čtyřech sálech se střídaly přednášky věnované vývoji, webdesignu, frameworkům a byznysu. Pro čtenáře Zdrojáku vybíráme již podruhé některé zajímavé přednášky o programování a webdesignu. První část našeho přehledu jste si mohli přečíst před týdnem.

RIA jednoduše

Jedním z největších taháků, alespoň dle počtu návštěvníků, byla na WebExpo 2009 přednáška Davida Grudla na téma tvorby Rich Internet Applications v jeho vlastním PHP frameworku Nette. Grudl potvrdil svou pověst showmana, který dokáže vtipnou, poutavou, a zároveň srozumitelnou formou přednést dané téma. Tentokrát bylo součástí přednášky i „živé programování“, kdy přednášející přímo naživo psal jednoduchou aplikaci – implementaci nákupního košíku, na které demonstroval snadnost používání moderních technik vývoje RIA (zde drag-and-drop a AJAX).

WebExpo 2009 - II
David Grudl (foto: Ivana Dvorská)

V úvodu připomněl David Grudl specifické problémy při vývoje RIA: Vývoj RIA s sebou přináší nutnost intenzivního programování na klientské i na serverové straně. U klasických webových aplikací nese většinu tíže server a na klientské straně je použit JavaScript pouze pro některé doplňkové činnosti (vizuální efekty, kontrola formulářů před odesláním apod.) U RIA je zapotřebí přenést velkou část logiky na klientskou stranu, která komunikuje (nejčastěji pomocí AJAX/AJAJ) se serverem. Pro vývoj serverové části existují odladěné a silné frameworky, které vývoj usnadní a urychlí.

RIA aplikace musí fungovat intuitivně a využívat zaběhnuté postupy a pochopitelné symboly (příkladně: zobrazení rotujícího kolečka při komunikaci se serverem oznamuje, že „se něco děje“ a uživatel musí počkat a nedělat žádné činnosti). K návrhu aplikací slouží různé javascriptové frameworky, od jednodušších (jQuery UI, Prototype/Scrip­taculous, Dojo…) až po vysoce komplexní (např. ExtJs).

JavaScript a AJAX

Pracujete s HTML a chtěli byste své weby dostat na vyšší úroveň? Naučte se používat moderní funkce dnešních prohlížečů. Naučíme vás používat JavaSctipt a AJAX, tvořit základní skripty a ovládnout web pomocí nových vlastností. Školení pořádá Akademie Root.cz, školí Jakub Vrána.

Po nezbytném úvodu předvedl David Grudl vývoj aplikace „naživo“, od prázdného projektu v Nette a stažení knihoven jQuery a jQueryUI. Na jednoduchém a srozumitelném příkladu demonstroval krok za krokem vytvoření jednoduchého uživatelského rozhraní v prostředí Nette frameworku. Demonstrace ukázala především snadnost práce s Nette, kde programátor nemusí řešit běžné problémy, jako např. escapování proměnných či ukládání dat do session, a může se soustředit přímo na řešení konkrétního problému, stejně jako bezproblémovou kooperaci s JavaScriptovými knihovnami.

Přednáška: David Grudl – RIA jednoduše

Materiál k přednášce: Ukázkový příklad

Na Zdrojáku naleznete seriál Davida Grudla Začínáme s Nette Framework.

Test Driven Development v Nette

I přednáška Jiřího Knesla se dotýkala Nette. Hlavním tématem byl vývoj řízený testy (Test-Driven Development), k němuž přednášející přidal i nezbytné informace o agilním programování a metodě GTD (Getting Things Done). Knesl demonstroval, jak vývoj řízený testy pomáhá účinně předcházet chybám, zrychluje vývoj a dává programátorovi jistotu, že kód, který odevzdává, splňuje specifikaci. Jako demonstrační platforma bylo vybráno Nette: je dobře testovatelné, velmi čistě napsané a lze použít interní testovací systém, PHPUnit, Selenium a další.

Chcete se naučit o PHP víc?

Akademie Root.cz pořádá školení Kurz programování v PHP5. Jednodenní kurz programování v PHP 5 je určen všem webovým vývojářům, kteří se chtějí do hloubky seznámit a sžít s programovacím jazykem PHP ve verzi 5. První část kurzu je zaměřena na nový objektový model se všemi jeho vlastnostmi, ošetření chyb pomocí výjimek a efektivní využití těchto konceptů. Druhá část je zaměřena na nové knihovny PHP 5, především pro práci s databázemi, XML a objekty. Pozornost je věnována i zajištění kompatibility s PHP 4, přechodu z této verze a výhledu na PHP 6. Máte zájem o jiné školení? Napište nám!

Test-Driven Development přináší zásadní změnu pohledu na vývoj. Na úlohu se již nepohlíží způsobem “Jak vyřešit problém”, ale spíš “Jak otestovat, jestli kód řeší problém, a jak napsat nejkratší kód, který vyhoví testům.” Tento posun pohledu spolu se zrychlením vývojových cyklů umožňuje např. i vývoj Just-in-time (JIT software development – “ať si změní zadání, aspoň
budu vyvíjet to, co uživatel potřebuje teď, ne před půl rokem”).

Typický „životní cyklus“ vývoje softwaru pomocí TDD pak demonstroval Jiří na jednoduchém příkladu v Nette. Cyklus lze shrnout slovy: „Analýza, pak střídání test/kód, nakonec refaktoring, celé opakovat“. Metoda TDD vede k psaní otestovaného a dokumentovaného, tedy snadno znovupoužitelného, kódu. Při tomto postupu máme mnoho nástrojů, které mohou pomoci – Selenium, PHPUnit a další.

Co je na TDD ale nejdůležitější? Slovy Jiřího Knesla: „Práce musí být zábava, koníček a poslání.“

Přednáška: Jiří Knesl – Test Driven Development v Nette

Materiál k přednášce: Prezentace (pdf), Databáze

Na Zdrojáku chystáme články o agilním programování a TDD z pera Jiřího Knesla

Sémantický web

V přednášce s podtitulem „Dolů ze stromů, zpátky do lesa“ představil Josef Holý základní myšlenky sémantického webu. Některé prvky uživatelských rozhraní se používají téměř nezměněné už několik desítek let. Strom (hierarchická struktura) je používán v uživatelských rozhraních už 41 let. Současným trendem ve vývoji je takzvaný Sémantický Web („web významů“).

WebExpo 2009 - II
Josef Holý (foto: Ivana Dvorská)

Problémem stromů je, že každý objekt má své místo a vede k němu jedna přesně určená cesta (podívejte se např. na URL). Symbolický odkaz a zástupce jsou jen hacky, které neřeší ideový problém. Takový model totiž neodpovídá způsobu, jakým uvažuje uživatel, ale nutí uživatele, aby své myšlení přizpůsobil hierarchiím a kategoriím. V přednášce zazněl příklad: Historie prohlížených stránek. V prohlížečích je typicky ukládána do stromu podle času, kdy uživatel danou stránku navštívil. Ale uživatel neví, že stránku prohlížel před třemi dny odpoledne a jmenovala se tak či onak, spíš ví, že tuhle mu Ruda na Facebooku posílal odkaz na video, kde skákali bungee. A ačkoli má počítač klíčová slova (Ruda, Facebook, video, bungee), nedokáže pomocí nich nabídnout požadovaný dokument.

V současnosti prohlížeče totiž „nerozumí“ datům, která nám nabízejí. Vědí, co je hlavička, co nadpis a co tabulka, ale chybí jim další informace, podle kterých by poznaly, co vlastně zpracovávají – tedy metadata (data o datech). Problém je, že současný web obsahuje metadat jen velmi málo, leckdy i nekvalitních. K tomu, aby sémantický web fungoval, je zapotřebí víc a lepších metadat.

Metadata popisují „věci“ a „vztahy“ mezi nimi. Spolu s původními daty tvoří to, co je označováno jako Sémantický web, web významů či web 3.0. Sémantický web přináší techniky pro standardizovaný zápis metadat. Základním stavebním kamenem metadat je trojice (triple) – dva objekty (subjekt a objekt) a vztah mezi nimi (predikát). Například: Petr (subjekt, „kdo“) zná (predikát) Pavla (objekt, „koho“). Na webu má takto zapsaná trojice vlastní URL…

Web současnosti se skládá z dokumentů („zdrojů“, resources), které na sebe odkazují. V budoucnu by, díky metadatům, měly zdroje dostat konkrétní významy, stejně jako odkazy mezi nimi. Problém je, kde tato data vzít. Lze je buď převzít, nebo vytvořit nová.

Při přebírání je neocenitelným pomocníkem tzv. Linked Data Cloud – neustále se rozšiřující množina veřejně dostupných a znovupoužitelných sémantických slovníků, vytvořených podle principů Linked data. Metadata můžeme ovšem i vytvářet sami – pak je dobré držet se principů Linked data: Každý objekt má svoje URL (které funguje, je dostupné přes http), na kterém zájemce nalezne informace o objektu a odkazy na další věci. Informace jsou poskytnuty podle toho, kdo se ptá – stroj (bot, agent) dostane data ve strojové podobě, člověk v „lidské“.

Tyto informace lze zapsat do HTML stránek a označit tak části, které mají nějaký sémantický význam, a zároveň specifikovat, o jaký význam jde. K tomu se používají např. mikroformáty nebo RDFa. Mikroformáty jsou o něco rozšířenější, ale RDFa má vyšší „vyjadřovací schopnosti“. RDFa dokáží v současné době zpracovat i Google a Yahoo – i když zatím pro omezený okruh dat (Google např. pouze pro produkty a firmy).

Se sémantickým webem přichází i Semantic Web Browser. Tento prohlížeč dokáže nejen číst data a zobrazit HTML, ale zobrazuje i kontextové informace, odkazy apod., získané právě na základě metadat. V současné době lze takové chování simulovat pomocí Firefoxu, GreaseMonkey a RDFa doplňků.

Přednáška: Josef Holý – sémantický web

Materiál k přednášce: Prezentace

Na Zdrojáku brzy vyjde přehledový článek o Sémantickém Webu. Doporučujeme rovněž seriál kódujeme sémanticky s mikroformáty.

Moderní webdesign – Fonty a CSS3

Poslední přednášku, kterou si dnes připomeneme, měl Jan Sládek na téma fontů na webu a CSS3. Nejprve se věnoval specifikaci CSS3.

WebExpo2009 - II
Jan Sládek (foto: Dušan Šimonovič – zdroj)

CSS3 je obrovská specifikace, která obsahuje 41 modulů, které jsou zpracovávány nezávisle a některé z nich můžeme začít využívat již dnes. Jako příklad uvedl Sládek některé „drobné triky pro každodenní webdesign“ – konkrétně border-radius a RGBA colors. Není potřeba používat browser-specific vlastnosti jako „-moz-border-radius“ či „-webkit-border-radius“ pro oblé rohy u boxů. RGBA zase umožňuje definovat průhlednost (opacity) pomocí hodnoty tzv. alfa kanálu (proto RGBA). background: rgba(255, 255, 255, 0.5); znamená průhlednost pozadí 50 %, přičemž text ale zůstane neprůhledný.

Může nastat situace, že některé prohlížeče neumí border-radius či RGBA, ale klient to požaduje. Pomoc může přinést JS knihovna Modernizr, která detekuje podporu CSS3/HTML5 v browseru, a podle nich načte patřičné stylopisy.

Téma písem na webu je velmi široké. CSS3 zavádí podporu webových fontů, ale vzhledem k tomu, že ne všichni uživatelé mají nejnovější verze prohlížečů, které dokáží webové fonty korektně zpracovat, používají se technologické hac­ky:

  • Typeface.js (JavaScriptová knihovna, která se stará o vykreslení textu)
  • Cufón (Jako Typeface, ale v některých prohlížečích nelze text vybrat)
  • sIFR (Nahrazuje text pomocí Flashe)
  • FLIR (Obrázky generuje PHP skript)
  • Image replacement (Nahrazení obrázkem)

Tato řešení však přinášejí problémy. Jednak jde o hack, tudíž časem toto řešení může přestat fungovat. Dalším problémem je, že tyto metody jsou použitelné pouze pro nadpisy a krátké texty (rozumný limit je 1000 znaků). Jinak nastávají problémy s výkonem.

Řešením jsou Web Fonts, zavedené specifikací CSS3.

@font-face (CSS3 Fonts Module) {
    font-family: "Graublau Web";
    src: url(http://site/GraublauWeb.ttf);
}
p {font-family: "Graublau Web", serif; }

Ani toto řešení však není bez problémů. Například podpora v prohlížečích není jednoznačná. Font-face podporují FF 3.5, Safari 3.1 či Opera. IE podporuje @font-face od verze 4 (1997), ale pouze ve formátu fontů EOT, je tedy nutné přegenerovat TTF font do EOT (pomocí ttf2eot nebo FontSquirrel fontface generator). Google v prohlížeči Chrome blokuje @font-face, lze jej povolit pomocí --enable-remote-fonts. Zde je možno použít SVG, které funguje jak pro Chrome, tak pro iPhone od firmware 3.1. Definice tedy bude vypadat takto:

@font-face (CSS3 Fonts Module) {
    font-family: "Graublau Web";
    src: url("GraublauWeb.eot");
    src: local ("Graublau Web Regular"),
         local ("Graublau Web"),
         url("GraublauWeb.svg #lg") format("svg"),
         url("GraublauWeb.otf") format("opentype");
}

p {font-family: "Graublau Web", serif; }

V roce 2009 tak uvidí náš font s @font-face cca 80 % uživatelů, ostatní uvidí standardní font prohlížeče. Problém mají uživatelé Firefox 3.0 a nižší. Spory jsou i kolem Opery 9.

Dalším problémem fontů na webu je jejich licencování. Pokud jsou použity v plné podobě (TTF, OTF), lze je snadno ukrást. Proto Microsoft přišel s EOT – Embeddable OpenType. EOT obsahuje pouze použité znaky a sada je vázána na konkrétní web. W3C odmítlo zařadit EOT do specifikace, žádost byla podána znovu v roce 2008, specifikace v současnosti koncovku .eot zná. Dalším formátem je WOFF File Format, což je otevřený nástupce OTF. Je komprimovaný, je zabezpečený a začíná být široce podporovaný.

Jaké fonty můžeme používat? To zjistíme z EULA daného fontu. Bohužel nejméně v 98 % případů je podobné užití zakázáno. Přesto existují vhodné fonty pro web; můžete je nalézt např. na těchto stránkách:

Přednáška: Jan Sládek – hon za fonty na webu s krátkým vydechnutím u CSS3 a JS

Materiál k přednášce: Prezentace

Sledujte na Zdrojáku články a zprávičky o fontech a CSS3.

Za týden si připomeneme další zajímavé přednášky, které zazněly na letošní konferenci WebExpo.

Foto: Ivana Dvorská, Dušan Šimonovič

Komentáře

Subscribe
Upozornit na
guest
3 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
hobr

Vypadlo „s“ z odkazu na http://spyrestudios.com/

_r3450n_

„V úvodu připomněl David Grudl specifické problémy při vývoje RIA.“
Som sice slovak, ale „při vývoje“? :o)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.