HTML5 neni jen dalsi verze znackovaciho jazyka — je to kolekce technologii, ktere meni web z platformy pro dokumenty na platformu pro aplikace. Semanticke elementy, Canvas, Video, WebStorage, geolokace, WebWorkers a desitky dalsich API otviraji moznosti, ktere drive vyzadovaly Flash nebo nativni pluginy. Po letech vyvoje a diskuzi je HTML5 konecne pripraveno pro produkcni nasazeni.
Semanticke elementy¶
Jedna z nejvetsich zmen v HTML5 je zavedeni semantickych elementu. Misto generickeho div pro vsechno mame nyní header, nav, main, article, section, aside a footer. Tyto elementy nemaji zadny vizualni efekt — stale je musite stylovat pomoci CSS — ale dávají obsahu vyznam. Vyhledavace lepe chápou strukturu stranky, screen readery mohou uzivatele navigovat mezi sekcemi a kod je citelnejsi pro vyvojare.
Pro nase enterprise projekty to znamena lepsi pristupnost bez extra usili. Dříve jsme museli pridavat ARIA role a landmarks rucne. S HTML5 semantickymi elementy je zakladni pristupnost zabudovana primo do HTML. Element article jasne říká, ze toto je samostatny kus obsahu. Element nav oznacuje navigaci. Element aside je doplnkovy obsah. Pro SEO je to take vyhoda — Google lepe rozumi, co je hlavni obsah a co je boční panel.
Canvas — kresleni v prohlizeci¶
Canvas je mozna nejzajimavejsi nova technologie v HTML5. Je to bitmapovy kreslici povrch, na ktery muzete kreslit pomoci JavaScriptoveho API. Cary, obdelniky, kruhy, obrazky, text, gradienty — vsechno programaticky. To otevira dvere pro datove vizualizace, hry a interaktivni grafiku primo v prohlizeci bez jakychkoliv pluginu.
Pro nase projekty je Canvas zajimavy hlavne pro vizualizace dat. Misto generovani grafu na serveru jako PNG obrazky muzeme nyni kreslit interaktivni grafy primo v prohlizeci. Uzivatel muze najizdet na datove body, zoomovat, filtrovat — vsechno bez komunikace se serverem. Knihovny jako Raphael.js a Processing.js usnadnuji praci s Canvas a pridavaji vyssi uroven abstrakce.
Je tu i alternativa — SVG. Zatimco Canvas je bitmapovy (kreslite pixely), SVG je vektorovy (kreslite objekty). SVG objekty jsou soucasti DOM, takze na ne muzete navesit event listenery a stylovat je pomoci CSS. Pro grafy a diagramy je SVG casto lepsi volba. Canvas vyhrava u her a situaci, kde kreslite tisice elementu — manipulace s DOM je pri velkem poctu elementu pomala.
Video a Audio bez pluginu¶
Konecne muzeme prehravat video a audio primo v prohlizeci bez Flash playeru. Element video a audio jsou jednoduche jako element img — vlozite zdroj a prohlizec se postara o zbytek. Navic mate plnou kontrolu pres JavaScript API — play, pause, seek, volume, playback rate. Muzete vytvorit vlastni player s vlastnim designem.
Problem je s kodeky. Firefox a Chrome podporuji WebM a Ogg, Safari podporuje H.264/MP4. Internet Explorer 9 podporuje pouze H.264. V praxi to znamena, ze musite pripravit video ve dvou formatech. Ale budoucnost je jasna — nativni video v prohlizeci je lepsi nez Flash z hlediska vykonu, pristupnosti, mobilnich zarizeni i bezpecnosti. Apple odmitl Flash na iPhone a iPad, coz vyrazne urychlilo adopci HTML5 videa.
Web Storage — localStorage a sessionStorage¶
Cookies byly vzdy omezenim pro ukladani dat na klientske strane — 4KB limit, posilani s kazdym HTTP pozadavkem, slozita manipulace. HTML5 Web Storage prinasi dva nove mechanismy. localStorage uklada data trvale (preziji zavreni prohlizece) s limitem typicky 5-10MB. sessionStorage uklada data jen po dobu jedne session (zavreni založky data smaze).
API je trivialni — setItem, getItem, removeItem. Data jsou ulozena jako key-value páry stringu. Pro slozitejsi data serializujete JSON. Pro nase aplikace pouzivame localStorage pro cache uzivatelskych preferenci, rozdelanych formularu a offline dat. Uz se nemusime bat, ze uzivatel ztrati rozpracovaný formulář, kdyz omylem zavre prohlizec.
Geolocation API¶
HTML5 Geolocation API umoznuje ziskat zemepisnou polohu uzivatele (samozrejme s jeho souhlasem). Na mobilnich zarizenich pouziva GPS, na desktopu WiFi triangulaci nebo IP geolokaci. API je jednoduche — zavolate navigator.geolocation.getCurrentPosition a dostanete souradnice. Muzete take sledovat pohyb uzivatele pres watchPosition.
Pro nase klienty z logistickeho sektoru je to klicova technologie. Ridici dodavek mohou hlasit svou polohu primo z webove aplikace bez nutnosti instalovat nativni aplikaci. Dispatcher vidi vsechny vozidla na mape v realnem case. Drive to vyzadovalo drahou nativní aplikaci — nyni staci webovy prohlizec.
Web Workers — paralelni JavaScript¶
JavaScript v prohlizeci vzdy bezel v jednom vlakne. Pokud jste spustili slozity vypocet, UI zamrzlo. Web Workers resi tento problem — umoznuji spustit JavaScript kod v pozadovem vlakne. Worker nema pristup k DOM (nemuze manipulovat s HTML), ale muze provadet vypocty a komunikovat s hlavnim vlaknem pres message passing.
Toto je obrovske pro webove aplikace, ktere zpracovavaji data na klientske strane. Parsování velkych CSV souboru, sifrovani, komprese, slozite filtrovani — vsechno muze bezet na pozadi bez blokovani UI. Pro nase dashboardy to znamena, ze muzeme agregovat tisice datovych bodu na klientske strane, zatimco uzivatel muze stale interagovat s aplikaci.
Offline webove aplikace¶
Application Cache (AppCache) umoznuje definovat manifest soubor, ktery urcuje, ktere soubory ma prohlizec ulozit pro offline pouziti. Kdyz je uzivatel offline, prohlizec servíruje soubory z cache. V kombinaci s localStorage muzete vytvorit webovou aplikaci, ktera funguje i bez internetoveho pripojeni.
V praxi ma AppCache svoje problemy — invalidace cache je slozita, debugovani je obtizne a chovani pri update je neintuitivni. Ale koncept je spravny a pro nektere use case (field workers, mobilni inspektori) je to game changer. V budoucnu ocekavame lepsi API — Service Workers uz se rysuji na horizontu.
Podpora v prohlizecich¶
Hlavni otazka pro enterprise vyvoj je podpora v prohlizecich. Internet Explorer 8, ktery stale dominuje v korporatním prostredi, nepodporuje zadne HTML5 funkce. IE9 pridava podporu Canvasu, SVG a nekterych semantickych elementu. Chrome a Firefox maji nejlepsi podporu a automaticky se aktualizuji. Safari podporuje vetsinu HTML5 na desktopu i mobilech.
Pro zpetnou kompatibilitu pouzivame Modernizr — JavaScriptovou knihovnu, ktera detekuje podporu jednotlivych HTML5 funkci a umoznuje podmínene nacitat polyfilly. HTML5 Shiv (neboli HTML5 Shim) zajistuje, ze semanticke elementy funguji i v IE8. Respond.js pridava podporu CSS3 media queries pro IE8. S temito nastroji muzeme pouzivat HTML5 jiz dnes a degradovat elegantne pro starsi prohlizece.
Formulare v HTML5¶
HTML5 prinasi nove typy vstupnich poli — email, url, tel, number, date, range, color a dalsi. Prohlizec muze zobrazit specializovany vstupni widget (datepicker pro date, numerickou klavesnici pro tel na mobilu) a automaticky validovat format. Atribut required oznacuje povinne pole, pattern umoznuje regularni vyraz pro validaci, placeholder zobrazuje napovedu v prazdnem poli.
Pro nas to znamena mene JavaScriptu pro validaci formularu. Drive jsme pouzivali jQuery Validate plugin pro kazdý formulář. Nyni muze prohlizec zakladni validaci provest nativne. Samozrejme serverova validace zustava nutna — klientska validace je jen pro uzivatelsky komfort, nikdy pro bezpecnost.
Zaver¶
HTML5 je obrovský krok vpred pro webovou platformu. Semanticke elementy, Canvas, Video, Web Storage, Geolocation a Web Workers otviraji moznosti, ktere drive vyzadovaly pluginy nebo nativni aplikace. S polyfilly a feature detection muzeme HTML5 pouzivat jiz dnes. Budoucnost webu je svetla a HTML5 je zakladem teto budoucnosti.