1 HTML 5 Tomáš Hejl, Miroslav Štufka červen 20092 Historie V roce 2004 se konsorcium W3C, zodpovědné za vydání specifikací týkajících se webu, snaží j...
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.
HTML5
Tomáš Hejl, Miroslav Štufka
červen 2009
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>
Úroveň 1
<section>
Úroveň 2
<section>
Úroveň 3
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í:
HTML5
Tomáš Hejl, Miroslav Štufka
červen 2009
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: 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:
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. 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.
Formuláře (input) Web Forms 2.0 rozšiřuje množinu možných hodnot atributu type u elementu , 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
HTML5
Tomáš Hejl, Miroslav Štufka
červen 2009
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ů , resp.
