HTML 5: nová generace webů

Většina dnešních webových stránek využívá pro definici svého obsahu HTML 4 (respektive verzi 4.01), nebo XHTML 1.1. Kromě toho však webdesignéři musí využívat a znát mnoho dalších jazyků. Změnit by to chtělo HTML5, jehož vývoj započal v roce 2004, před rokem byla vydána první testovací verze specifikace a podle oficiálních zpráv si na finální verzi budeme muset ještě několik let počkat. Pojďme nahlédnout na současnou „First Draft“ verzi HTML5.

Za hranicemi HTML 4

Jak vypadá vývoj webu dnes? Nebudeme se nyní bavit o drobných webových stránkách pro hospůdku z Dolní Horní. Vezměme v potaz větší web, třeba nějaký videoserver (něco jako YouTube). Aby programátor dosáhl kýženého výsledku, musí si napsat vlastní kaskádové styly (CSS), nastavit k nim správné hodnoty a tyto styly potom přiřadit jednotlivým prvkům v HTML kódu.

Programátor dal nějak dohromady CSS a HTML, při troše štěstí vzhled nevypadá v každém prohlížeči jinak, může tedy přistoupit k další fázi. Co by to bylo za videoserver bez vlastního přehrávače videa (i takové by se však na dnešním internetu našly)? Zde se však náš programátor dostává do problémové situace. Pomocí HTML, CSS ani JavaScriptu nevytvoří nikdy schopný přehrávač. První dva zmíněné jazyky umí jen definovat vzhled stránky, to v tom třetím už sice programovat lze, avšak video byste s ním zřejmě vůbec (nebo jen velmi složitě) nepřehráli.

Programátor tak musí přistoupit k alternativám a na výběr má:

• využít plug-inů Windows Media Playeru, RealMedia či podobných desktopových přehrávačů
• naprogramovat přehrávač v Javě a zkompilovat ho jako applet
• naprogramovat přehrávač ve Flashi (pomocí ActionScriptu)

První variantu programátor vyškrtne rovnou, s těmito prostředky by nikdy nezajistil podporu na všech stanicích, operačních systémech či prohlížečích. To Java vypadá lákavěji – je multiplatformní a je nainstalována na většině stanicích. Avšak pro její pomalý interpret programátora nutí se ji vzdát.

Sahá tedy po Flashi. Udělá pěknou aplikaci s nablýskanými tlačítky, jenž i to video přehrává hezky. Aplikaci vkládá do HTML kódu pomocí značky object. Celý web ještě programátor okořeňuje o interaktivní prvky napsané v JavaScriptu (Ajaxové hodnocení videa atp.).

Všimněte si, že programátor se už od počátku vývoje stránky dostává daleko za hranice HTML4. Nebýt CSS jen těžko by vytvářel několika sloupcový web, nebýt v JavaScriptu, nikdy by nemohl pracovat s Ajaxem a konečně nebýt Flashe, nikdy by video na stránce nepřehrál. Současná verze HTML 4 je tedy nedostatečná dnešním podmínkám, je zaměřená na strukturu webové stránky, ale nijak neusnadňuje tvorbu interaktivního obsahu.

Bylo nebylo HTML5…

Této zoufalé situace si před pár lety začali čím dál více všímat lidé sdružení v komunitách jako WHATWG a W3C, které se starají o vývoj webových jazyků. A roku 2004 započal v organizaci WHATWG vývoj Web Applications 1.0., později označované hrdým jménem HTML5. Vývoj v roce 2007 převzala organizace W3C, která se přímo stará o standardy HTML a XHTML. První návrh HTML5 byl představen 22. ledna 2008 jako tzv. „First Public Working Draft“ (psali jsme i na Živě).

V návrhu byly představeny některé nové značky a možnosti, které by HTML mělo obsahovat. Tyto značky začínají již nyní být postupně implementovány do některých internetových prohlížečů, a tak si je můžete vyzkoušet i vy. Stačí si stáhnout a nainstalovat Mozilla Firefox 3.5, Safari 4 nebo Google Chrome 2. Ne všechny funkce HTML5 jsou však podporované všemi prohlížeči, existují ukázkové aplikace funkční správně třeba jen v Chrome.

Na internetu se dnes již dají najít některé ukázkové aplikace (dále v článku si je projdeme), ale zatím se o praktickém používání HTML5 mluvit nedá. Koneckonců je na to i velmi brzo, podle Iana Hicksona z Googlu (mj. autor Acid testu a CSS 2.1 specifikace), který se na vývoji HTML5 podílí, si na finální verzi musíme počkat minimálně do roku 2022.

Co tedy HTML5 dokáže? Pojďme se konečně podívat, co nové HTML již v dnešní verzi umí:

Nový pohled na strukturování stránky

Weby se dnes dělají tak, že se do kaskádových stylů nadefinují vlastnosti jednotlivých částí webů (width, height, float, possition, z-index atd.) a tyto šablony se potom přiřazují jednotlivým značkám v HTML kódu (buď odkazem přes parametr class nebo přímo vložením kaskádového stylu do parametru style). Takže výsledná struktura takové stránky může vypadat následovně:

Struktura stránky navržené v HTML 4 a CSS (záměrně vynechány pro ukázku nepotřebné části kódu).

Jak je vidět, není to zrovna elegantní řešení (nepřehlednost, odkazování na kaskádové třídy definované bůhví kde atd.), ale jiné v době před HTML5 neexistovalo (vynechávám pravěké vytváření stránky pomocí table). Nová specifikace HTML však přináší značky, které jsou přímo zaměřené na vytváření struktury stránky:

• header – hlavička stránky
• footer – patička stránky, která obsahuje informace o autorských právech, autorovi atd.
• nav – část stránky sloužící pro zobrazení navigačních odkazů
• aside – boční panel stránky
• section – webdesignérem definovaná část stránky na webu
• article – část stránky obsahující nějaký text – článek apod.

S využitím těchto značek by potom předchozí příklad mohl v HTML5 vypadat nějak takto:

Ukázková struktura stránky s využitím HTML5 značek.

Mezi další značky zaměřených na strukturování obsahu patří dialog a figure. S pomocí prvního můžeme jednoduše definovat obsah nějakého rozhovoru:

<dialog>
<dt> Ahoj Jardo, jak se máš
<dd> Výborně Jarko, a ty?
<dt> Také skvěle, právě si čtu specifikaci HTML5.
<dd> Skvělý román…
</dialog>

Značka figure slouží ke svázání multimediálního a textového obsahu.Například videa a jeho popisku, jako je to předvedeno v ukázce.

Svázání videa a textu pomocí figure.

Multimediání obsah bez nástrojů třetích stran

Programátor z úvodu článku si musel vzít na pomoc Flash, aby mohl vytvořit na stránce přehrávač videa. Flashový přehrávač najdeme na většině videoserverech – počínaje YouTube, konče třeba Metacafe. To samozřejmě vyžaduje nainstalovaný Flash Player a integraci jeho pluginu do prohlížeče. Pokud bychom se rozhodli pro přehrávání použít Windows Media Player, musel by být na koncové stanici nainstalovaný. A to je nevýhoda nástrojů a vývojářských prostředí třetích stran. Koncový návštěvník naší stránky musí mít nainstalovaný podpůrný software, bez něhož si obsah neprohlédne.

HTML5 přináší značky video a audio. K čemu slouží je patrné z jejich názvu, první bude sloužit k přehrávání video souborů a druhá k přehrávání audio souborů. Odkazy na ně se budou vkládat pomocí parametru src. O streamované přehrání obsahu se potom postará prohlížeč. Výhoda je jednoznačná, uživatel už nebude muset stahovat podpůrný software třetích stran, mající často několik megabajtů a z hlediska bezpečnosti jsou často velice snadno průstřelné.

Lepší návrh formulářů

I při návrhu formulářů je dnešní webdesignér velice znevýhodněn, jelikož má k dispozici pouze malou sadu značek, se kterými si prostě musí nějak vystačit. HTML5 zachovává značku input, ale její parametr type rozšiřuje o následující možnosti:

• datetime – datum a čas
• datetime-local – datum a čas na lokální stanici
• date – datum
• month – měsíc
• week – týden
• time – čas
• number - číslo
• range – rozsah číselných hodnot, které se nastaví parametry min a max
• email – pole pro zadání e-mailové adresy (s ověřením, zda je formát správný)
• url – URL adresa
• search – vyhledávací políčko
• color – pole s výběrem barvy a převedením do jejího textového formátu

Formuláře by také měly být rozšířeny o nové parametry, mezi které patří také:

• pattern– povolený obsah textového políčka
• autocomplete – automatické doplňování pole
• min, max – rozsah, ve kterém se může hodnota pole pohybovat
• require – lze přiřadit ke vstupnímu prvku formuláře, který musí být uživatelem vyplněn
• data – možnost přiřazení tohoto parametru formuláři pro načtení formulářových dat z URL adresy