HTML 5 Tomáš Hejl, Miroslav Štufka červen 2009
Historie V roce 2004 se konsorcium W3C, zodpovědné za vydání specifikací týkajících se webu, snaží již několik let prosadit web postavený na XML. Vzniká řada specifikací. W3C rovněž plánuje přestavbu HTML na XHTML 2.0, které je ale s klasickým (X)HTML zpětně nekompatibilní. Ve skutečnosti jsou aktuální úplně jiné problémy: Lidé z praxe potřebují vylepšení formulářů, standardizaci některých proprietárních funkcí prohlížečů nebo jednodušší manipulaci s videem. Po neúspěšné snaze změnit W3C se několik implementátorů v čele s Ianem Hicksonem rozhodlo založit vlastní sdružení tak vzniká WHATWG (Web Hypertext Application Technology Working Group sdružení subjektů, které se s problematikou webového prostředí denně potkávají. Např. Mozilla, Opera, Apple) s cílem zdokumentování stávajícího stavu prohlížečů a navrhnutí rozšíření HTML s ohledem na webové aplikace. Důležitá je inkrementálnost řešení a zpětná kompatibilita. Výsledkem dvou a půl let práce na naplnění uvedených cílů jsou dvě specifikace: Web Forms 2.0 a Web Applications 1.0. Obě jsou stále ve stádiu pracovního návrhu (working draft). Na Web Applications 1.0 je třeba ještě zapracovat, ale specifikace Web Forms 2.0 je téměř kompletní. V letech 2006/2007 je konsorciu W3C jasné, že jestli nezačne s WHATWG spolupracovat, bude odsunuto na vedlejší kolej úplně. Společně tedy zahajují kooperaci v pracovní skupině Web Application Formats, kde pod hlavičkou W3C vývoj pokračuje. Aktuální vývoj První working draft vychází na počátku roku 2008, další samozřejmě následují. Veškerou editační práci provádí Ian Hickson osobně, na základě vlastních rozhodnutí, která jsou předem široce diskutována v mailing listu WHATWG. To zaručuje konzistenci specifikací a zároveň širokou zpětnou vazbu. V současné době na specifikacích spolupracuje přes 400 nezávislých expertů, přes 70 expertů zastupujících další organizace (Mozilla, Opera, Apple, Microsoft, AOL, Cisco, Google, Kongres.knihovna USA, MIT, IBM, Nokia, Mezinárodní asociace tvůrců webů,...) Co to tedy HTML5 znamená? HTML5 je jazyk, který se snaží o přiblížení HTML současným potřebám webových aplikací a schopnostem prohlížečů. Přináší mimo jiné nástroje pro práci s formuláři, spolupráci s různými API, multimédii, strukturami, oživení sémantiky, větší flexibilitu. Na rozdíl od předchozích verzí HTML a XHTML, které definují dokument v rámci své syntaxe, dokument v HTML 5 definuje jeho Document Object Model (DOM) stromová struktura, která je prohlížeči interně využívána k reprezentaci dokumentu. Výhoda definování HTML 5 v rámci DOM spočívá v tom, že jazyk sám může být definován nezávisle na syntaxi. Přitom v současnosti existují dvě základní syntaxe, kterými mohou být HTML dokumenty reprezentovány HTML serializace (známá jako HTML 5) a XML serializace (známá jako XHTML 5). HTML serializace se odkazuje na syntax inspirovanou SGML z dřívějších verzí HTML, ovšem definovanou způsobem, který je mnohem kompatibilnější s tím, jak soudobé prohlížeče v praxi s HTML zachází. XML serializace používá syntax XML 1.0 a namespaces (jmenné, definiční prostory), stejně jako XHTML 1.0.
NOVINKY Struktura webu HTML 5 uvádí celou sadu nových elementů, které významně usnadňují strukturování stránek. Většina stránek dnes sestává z ustálené skupiny obvyklých částí, jako je hlavička, patička a různé sloupce, přičemž se tyto části běžně vyznačují pomocí elementů div odlišených prostřednictvím popisných atributů id a class. Schéma ukazuje typický dvousloupcový layout vyznačený elementy div s atributy id a class. Obsahuje hlavičku, patičku a navigační lištu těsně pod hlavičkou. Hlavní obsah je tvořen článkem a vedlejším sloupcem umístěným vpravo. Užití elementu div je dáno především tím, že současná verze HTML 4 postrádá nezbytné sémantické prvky pro přesnější vyznačení specifických částí dokumentu. HTML 5 řeší tento problém zavedením nových elementů reprezentujících jednotlivé části dokumentu. Element div může být nahrazen novými elementy: header, nav, section, article, aside a footer. DNES HTML5 Section Sémantická značka pro oddělení jednotlivých sekcí. Na příkladu je možno vidět neomezené vnořování a tím pokořených 6 úrovní nadpisů. <section> <h1>úroveň 1</h1> <section> <h1>úroveň 2</h1> <section> <h1>úroveň 3</h1> </section> </section> </section> Dialog Dalším často opakovaným prvkem na webu jsou rozhovory (minimálně na zpravodajských webech typu Zdroják). HTML5 pro ně zavádí novou značku dialog, v rámci které recykluje značky z definičního seznamu. Ukázka použití:
<dialog> <dt>romeo</dt> <dd>má drahá Julie, jak se ti daří?</dd> <dt>julie</dt> <dd>romeo, ach můj Romeo, to jsem ráda, že jsi opět online.</dd> <dt>romeo</dt> <dd>vůbec si nedovedu představit, jak by náš vztah mohl po mém vyhoštění z města pokračovat, kdyby nebyl internet.</dd> </dialog> Figure Značka figure spolu svazuje mediální a textový obsah. Může se jednat o obrázek a jeho popis, nebo o video a jeho popis. Podobný vztah jsme dosud vyznačit nemohli. Pro obrázek existoval pouze jeho alternativní popis (atribut alt), ale ten má specifický případ použití. Příklad použití značky figure: <figure> <img src="obr.png"> <legend>mapa Středozemě</legend> </figure> V příkladu je jedna zajímavost. U obrázku není použit atribut alt. To proto, že by v tomto konkrétním případě byl zcela zbytečný, alternativní obsah místo obrázku jsme totiž uživatelům nabídli, jen jiným způsobem. Jedná se o jeden z mála případů, kdy vynechání atributu alt specifikace povoluje. Menu <menu>.- rozšíření možností současného tagu. Velmi zajímavou možností je tvorba vlastních dialogových menu. atribut type o list (defaultní, jako dnes) o context vlastní kontextové menu, například vyskakující navigace apod. navěšeno na jiný tag pomocí atributu contextmenu o toolbar Audio a video HTML v současnosti postrádá prostředky, které by umožňovaly úspěšně pracovat s vloženými multimédii, mnoho webů při poskytování této funkcionality závisí na Flashi. Přestože je možné vkládat multimédia prostřednictvím různých pluginů (jako QuickTime, Windows Media a další), Flash je v současnosti jediný rozšířený plugin, který poskytuje platformově nezávislé řešení spolu s potřebným API pro vývojáře. Jak je zřejmé z mnoha různých přehrávačů založených na Flashi, autoři mají zájem poskytovat vlastní uživatelská rozhraní, jejichž společným rysem jsou základní ovládací prvky pro spuštění, přerušení a zastavení přehrávání a pro nastavení hlasitosti. Cílem HTML5 je, aby tuto funkcionalitu poskytoval přímo webový prohlížeč, prostřednictvím nativní podpory pro vkládání videa a audia a DOM API pro ovládání přehrávání pomocí skriptovacích technologií. Proto přichází s tagy audio a video a vkládání multimédií do stránek může pro příště vypadat třeba takto:
DNES <embed type="application/x-shockwave-flash" src="/static/cz/shared/app/mediacenter.swf" HTML5 <video src="soubor.ogg"></video> quality="high" wmode="transparent" allowfullscreen="true" flashvars="media_id=431380&bit=12254734036 24233743826&color=#000000&autostart=true" width="440" height="288"> Alternativní atribut poster může být použit k určení obrázku, který bude zobrazen na místě filmu předtím, než začne jeho přehrávání. Přestože existují videoformáty, které mají tuto vlastnost zabudovánu, jako například MPEG-4, tento mechanismus poskytuje alternativní řešení, které může pracovat nezávisle na formátu videa. Stejně jednoduché je vložení audia prostřednictvím elementu audio. Většina atributů pro elementy audio a video je společná, ačkoli, ze zřejmých důvodů, element audio postrádá atributy width, height a poster. <audio src= music.oga controls> <a href= music.oga >Stáhnout písničku</a> </audio> HTML 5 také obsahuje element source, který umožňuje definovat alternativní verze video a audio souborů, z nichž si prohlížeč může vybírat na základě jím podporovaných typů médií či kodeků. Atribut media umožňuje výběr na základě omezení použitého zařízení a atribut type umožňuje blíže specifikovat typy médií a kodeky. Povšimněte si, že použijete-li element source, musíte vynechat atribut src jeho rodičovského elementu audio či video, jinak budou alternativy v elementu source ignorovány. <video poster= poster.jpg > <source src= video.3gp type= video/3gpp media= handheld > <source src= video.ogv type= video/ogg; codecs=theora, vorbis > <source src= video.mp4 type= video/mp4 > </video> <audio> <source src= music.oga type= audio/ogg > <source src= music.mp3 type= audio/mpeg > </audio> Formuláře (input) Web Forms 2.0 rozšiřuje množinu možných hodnot atributu type u elementu <input>, a tak definuje nové formulářové prvky. Jedná se především o různé prvky pro zadání časových údajů (čas (UTC i lokální), datum, datum a čas, měsíc, týden), zadávání čísel, e-mailů a URL. Prohlížeč může v těchto případech uživateli zobrazit pomocné prvky v rozhraní (kalendář, šipky u čísel, historii prohlížeče apod.) a také zajistit, aby nešlo zadat nesprávné hodnoty. datetime, datetime-local, date, month, week, time number, range email, url
search color Validace na straně klienta dnes bývá obvykle řešena JavaScriptem. Většinu podmínek platnosti jednotlivých polí formuláře lze specifikovat deklarativně. Web Forms 2.0 (do specifikace HTML5 přidány teprve v únoru 2009) tedy přidává k vybraným formulářovým elementům atribut required, určující, zda je vyplnění odpovídajícího pole povinné, a atribut pattern, obsahující regulární výraz, jemuž musí hodnota pole odpovídat. U hodnot s jasně definovaným pořadím (čísla, čas,...) lze navíc použít atributy min a max, které definují mezní hodnoty, a atribut step, určující krok, po kterém může být hodnota měněna. JavaScriptovou validaci je stále možno používat na složitější případy. U libovolného elementu je možné pomocí atributu repeat="template" specifikovat, že je šablonou pro další opakované prvky formuláře. Instance této šablony pak mohou být zapsány přímo v kódu (pak by měly odkazovat na ID své šablony pomocí atributu repeat-template ) anebo je lze vytvořit dynamicky. Dynamické vytváření instancí šablon je realizováno pomocí elementů <input type="add">, resp. <button type="add">, podobně je to i s mazáním instancí (type="remove") a posuny (type="move-up" a type="move-down"). Jinak řečeno, klikáním na speciální tlačítka formuláře uživatel přidává, odebírá a přesouvá položky, aniž by bylo nutno psát jakýkoliv kód. Deklarativně je samozřejmě možno nastavit i minimální a maximální počet přidávaných prvků formuláře. Web Forms 2.0 přidává i možnost odesílat obsah formulářů ve formátu XML. Canvas Značka canvas, jejíž obdoba je známá z programovacích jazyků, je plátno, do kterého je možno generovat (kreslit) vlastní obsah. Nabízí se pro řadu použití, může zobrazovat vygenerovaný statický obrázek, interaktivní obrázek (graf reagující na ovládání uživatele) nebo třeba upravený výstup videa. Více se o této značce dočtete tady na Zdrojáku v článcích označených štítkem canvas. Drag and Drop Tato funkce, která je známá z desktopového prostředí, nepotřebuje dlouhého vysvětlování. Na návrh vývojářů IE byla zařazena do specifikace. Prakticky to znamená, že přibyly tyto nové události (events). dragstart drag dragenter dragleave dragover drop dragend Offline storage Offline storage slouží k uchovávání dat na straně klienta a rozšiřuje možnosti stávajících cookies, které jsou pro tyto účely na dnešním webu již nedostačující. Úložiště je dvojího druhu: session storage obsahuje data platná pouze pro danou relaci (pokud k webové aplikaci přistoupíte nezávisle z několika oken prohlížeče, nebude session storage mezi těmito relacemi sdílena, což bylo jedno z nepříjemných omezení cookies) a mizí s jejím ukončením, naopak global storage je mezi relacemi sdílena a uchovává data i po zavření prohlížeče. K datům se v obou případech přistupuje pomocí klíčů, např. sessionstorage*'login'+ = 'admin'. V květnu 2007 byla do specifikace přidána sekce SQLbased database API, která razantně zvyšuje možnosti využití. SQL5, jak se jí slangově přezdívá, může přinést i řadu nových problémů, se kterými se budou muset tvůrci aplikací vyrovnat. Jedním z nich je simultánní přístup k úložišti z více oken prohlížeče. Další velmi aktuální otázkou je problém
bezpečnosti. Letos byla každopádně sekce o offline storage ze specifikace vyjmuta. Jedná se totiž o velkou samostatnou kapitolu, pro kterou byla vytvořena samostatná specifikace. Cross document messaging V současnosti není komunikace mezi doménami (cross-site scripting) možná z bezpečnostních důvodů. Nové funkce cross dokument messagingu umožňují zasílat zprávy přátelskému webu mezi okny (panely) i na jiné domény. Realizace je prováděna přes metodu postmessage(...) na objektu Window. Příjem zpráv od jiných oken se provádí pomocí listeneru události message na objektu window (událost nebublá, nedá se zrušit, nemá výchozí akci) Browser history management Současný model správy historie je v nových interaktivních aplikacích nevyhovující. Vývojáři tento nedostatek obcházeli přidáváním vhodných hashů do adresy. HTML5 na toto pamatuje a umožňuje do historie procházení webu (v současnosti pouze seznam URL) přidat tzv. State object. State object se může uložit typicky např. při navigaci v rámci jedné stránky (např. AJAXem). Po stisknutí tlačítka Zpět v prohlížeči se vyvolá poslední URL nebo State object, ze kterého se zrekonstruuje předchozí stav. Tato funkce přináší user-friendly navigaci i v rámci one-page aplikací. (interface History na objektu window.history) MIME type and protocol handler registration Umožňuje zaregistrovat do systému klienta nový protokol a webovou aplikaci, která bude tento protokol odchytávat a zpracovávat. Z bezpečnostních důvodů bude vyžadovat potvrzení klienta. Po zaregistrování se bude požadavek na nový protokol předávat určené webové stránce jako parametr metodou GET. Podobně pro nové MIME typy. Odebrané elementy a atributy Elementy: Atributy: basefont, big, center, font, s, strike, tt, u frame, frameset, noframes acronym, applet, isindex, dir noscript nyní pouze v HTML syntaxi např. acceskey; rev a charset na elementech link a a; shape a coords na a; target; name na img a a; language na script, summary na table; scope na td; obecně všechny atributy, nahrazené vlastnostmi CSS (align, valign, border atd); a další. Ostatní Standardizace zavedených proprietárních řešení innerhtml, contenteditable, designmode, getelementsbyclassname parametr sandbox elementu iframe umožňuje v iframe zakázat formuláře, skriptování, navigaci mimo frame atd. parametr seamless elementu iframe alternativa PHP funkce include iframe se bude tvářit jako součást stránky jeho obsah bude formátován CSS jako zbytek stránky atp.
Zdroje http://html5.validator.nu/ - HTML 5 validátor http://en.wikipedia.org/wiki/comparison_of_layout_engines_(html_5) - přehled současné podpory HTML 5 http://interval.cz/clanky/seznameni-s-html-5/ http://www.lupa.cz/clanky/whatwg-budoucnost-webu/ http://en.wikipedia.org/wiki/html_5 http://dev.w3.org/html5/spec/overview.html http://zdrojak.root.cz/clanky/zaciname-z-html5-canvasem/ http://interval.cz/clanky/html-nbsp-5-a-semantika/ http://a.met.cz/juniorinternet/2008/ obecně http://www.w3.org/