Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí

Seriál o novinkách, které přináší technologie HTML5 a na které se mohou vývojáři webů a webových aplikací těšit (nebo je už i používat), má už přes deset dílů. Je tedy nejvyšší čas na drobnou rekapitulaci, shrnutí probraného a určení témat do dalších dílů. A k tomu dostanete jeden drobný dárek od Marka Pilgrima.

Už máte neustálého omílání „HTML5, HTML5, HTML5, …“ plné zuby? Pak vás tedy nepotěším – tento článek nebude o ničem jiném a HTML5 se tu objeví skoro v každém odstavci. Zato to bude krátké…

Shrnutí

Nultý díl seriálu předznamenal tematické okruhy, kterých se bude seriál týkat. Pod označením „HTML5“ se totiž skrývá celá škála specifikací a technik – od nových značek pro HTML až po techniky, které nemají s HTML jako takovým, tedy se značkovacím jazykem pro hypertext, skoro nic společného.

Samotné („opravdové“) HTML5 pouze specifikuje značky, které můžete použít v HTML souborech, jejich význam a syntax (všechny pěkně shrnuje Periodická tabulka HTML5 prvků). Věnovali jsme jim díly nová sémantika a nová sémantika II. Ukázali jsme si, jak napsat HTML5 dokument (lze zahodit všechny DTD, složité hlavičky apod. a jako doctype stačí napsat <!DOCTYPE html>).

Se sémantikou HTML souvisí i mikrodata – popsali jsme si je v díle Microdata. Spolu s novými značkami představuje v HTML5 tu část, která směřuje k větší strukturovanosti informací a k lepšímu strojovému zpracování informací.

Formuláře

Je téměř neuvěřitelné, jaké věci dokázali v posledních letech udělat kodéři a programátoři s obyčejnými tagy <input type="text"> a <textarea> – všelijaké speciální vstupní pole na zadávání data, telefonního čísla, barvy, jednoduché či složitější editory… HTML5 některé věci z toho přebírá přímo do specifikace jazyka, takže vstupní prvky ve formulářích teď dovolují např. určit, že políčko obsahuje datum, nastavit příznak „vyžadováno“ nebo specifikovat „placeholder“, tedy obsah, který naznačuje, co má být do políčka vloženo, a který při vložení údajů zmizí. Poznámka: „nepochopitelný“ element „form reset“ ale zůstává i ve verzi 5 zachován.

Formulářům byl věnován díl Taháme data od návštěvníka.

Multimédia

Sémantika je věc užitečná, ale není tak vidět jako jiné prvky. Přiznejme si, že nejvíc táhnou právě dva nové multimediální elementy, totiž <video> a <audio>. Popsali jsme si je teoreticky i prakticky v dílech Pohyblivé obrázky a Používáme pohyblivé obrázky.

Tyto multimediální elementy jsou pravděpodobně pro běžného uživatele nejviditelnější, ovšem ani pro tvůrce stránek nejsou zcela nezajímavé. Za jistých podmínek totiž dovolí nabídnout prioritně právě HTML řešení namísto starších Flashových přehrávačů. Lze je dokonce použít i k přehrávání streamů, jak jsme si ukázali v článku rádio ve vašich stránkách.

Programátorská část HTML5

Abychom si rozuměli – HTML5 samo o sobě („core“) končí předchozím odstavcem. Další věci už nejsou součástí specifikace HTML5 (i když jí třeba v minulosti byly), ale jsou počítány do širší „rodiny HTML5“, která symbolizuje směr vývoje současných webových technologií. I zde na Zdrojáku používáme termín HTML5 právě v tom širším slova smyslu, coby označení pro celou rodinu technologií.

Asi nejzajímavějšími oblastmi z hlediska vývoje webových aplikací jsou technologie pro vytváření offline aplikací – tedy WebStorage, databáze v prohlížečích aAppCache. Tyto technologie jsme společně použili v ukázceOffTheRoad: Píšeme offline aplikaci s HTML5.

Popsali jsme si techniku Web Workers, která umožňuje spouštět skripty v paralelních vláknech a předejít tak „zamrzání“ uživatelských rozhraní.

O spojení se serverem se starají Web Sockets, které umožňují do určité míry simulovat chování „server push“. Probrali jsme si FormData a objekt File.url, které umožňují zpracování souborů před jejich uploadem či práci se soubory v HTML5, kde jsme si řekli, jak implementovat například upload souborů jejich přetažením na plochu prohlížeče.

Někde na rozhraní mezi „značkovacím jazykem“ a „programováním“ stojí element <canvas>, který sice patří logicky do značkovacího jazyka, ale svou sílu ukáže naplno až ve spojení s vhodným skriptem, který jej oživí. O elementu canvas v seriálu zatím řeč nebyla a bylo by to trošku nošení dříví do lesa, protože jen o canvasu vyšlo na Zdrojáku před časem několik článků.

Rozhrnutí

Co nás tedy čeká v dalších dílech? Dobereme ještě některé neprobrané API, které rodina HTML5 nabízí, a pak už se Honza Sládek opět chopí vesla a provede vás zákoutími a taji CSS3. Dozvíte se například jak pomocí CSS určit specifický styl pro zařízení s malými displeji, jak rotovat, naklápět a jinak měnit obsah, a stranou nezůstanou ani delikatesy, jako jsou třeba písma na webu.

Na své si tedy přijdou hlavně grafici a designéři, ale ani pro ostatní profese, které se na vývoji webu podílejí, to určitě nebude zbytečné čtení. Stay tuned!

Anketa

Co vy a HTML5?

	Používám kde to jde
	Už jsem si zkusil, ale musím stále používat HTML4/XHTML
	Přejdu, až přejdou všichni, zatím to nemá smysl
	Je to nesmyslný hype, to spíš přejdu někam jinam
	Již od roku 1997 píšu HTML stále stejně, mě nějaké tyhlety vymyšlenosti nezviklají
	Vůbec nevím o čem je řeč, ale chtěl jsem hlasovat v anketě

Zobraz výsledek

… a drobný dárek

Detektor podpory technologií z rodiny HTML5 již určitě znáte. Nově funguje, díky upozornění od Štěpána Bechynského a po malé úpravě knihovny Modernizr, i v IE9 Preview. Ale to není jediná pomůcka, co nabízíme webařům k HTML5…

Se souhlasem Marka Pilgrima, pravděpodobně nejznámějšího propagátora HTML5, vám přinášíme při této příležitosti český překlad jeho textu HTML5 Peeks, Pokes and Pointers - tedy takový tahák („cheatsheet“) s nejdůležitějšími informacemi o HTML5, který se vám bude jistě hodit, než vám nové možnosti HTML5 přejdou do krve. Stručně shrnuje nové prvky, vlastnosti a API, které můžete, což je na nich nejhezčí, používat většinou už dnes. (Poznámka překladatele: Od překladu vydal Mark novou verzi, která je kompaktnější, ale bohužel jsme ji už nestihli připravit, proto jsme z ní pouze převzali některé dodatky a přidali je k původní verzi. Překlad je k dispozici pod licencí CC-BY-3.0)

Ať se vám v HTML5 dobře kóduje!

Tento text je již více než dva měsíce starý. Chcete-li na něj reagovat v diskusi, pravděpodobně vám již nikdo neodpoví. Pro řešení aktuálních problémů doporučujeme využít naše diskusní fórum.