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.
Seriál: Webdesignérův průvodce po HTML5 (21 dílů)
- Webdesignérův průvodce po HTML5 – díl nultý 25. 5. 2010
- Webdesignérův průvodce po HTML5 – nová sémantika 1. 6. 2010
- Webdesignérův průvodce po HTML5 – nová sémantika II 8. 6. 2010
- Webdesignérův průvodce po HTML5 – pohyblivé obrázky 15. 6. 2010
- Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky 22. 6. 2010
- Webdesignérův průvodce po HTML5 – taháme data od návštěvníka 29. 6. 2010
- HTML5 Audio: rádio ve vašich stránkách 13. 7. 2010
- Webdesignérův průvodce po HTML5: Microdata 20. 7. 2010
- AppCache: webové aplikace i bez připojení 27. 7. 2010
- Webdesignérův průvodce po HTML5: WebStorage 3. 8. 2010
- Webdesignérův průvodce po HTML5: Multithreading s WebWorkers 10. 8. 2010
- Webdesignérův průvodce po HTML5: Databáze v prohlížečích 17. 8. 2010
- Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí 24. 8. 2010
- HTML5: ukládáme si data k elementům 6. 12. 2010
- Webdesignérův průvodce po HTML5: Táhni a srůstej 5. 1. 2011
- HTML5: První krůčky s FileSystem API 15. 2. 2011
- Mobilizujeme web v HTML5 4. 4. 2011
- Single Page Apps a řešení problémů s historií 1. 6. 2011
- Page Visibility API: Kouká na mě vůbec někdo? 10. 8. 2011
- Práce se soubory v prohlížeči, díl 1 15. 8. 2011
- Práce se soubory v prohlížeči, díl 2 5. 9. 2011
Nálepky:
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!
… 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!
Martin Malý
Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.
Díky za skvělý seriál. Jsem si jistý, že se k němu budu průběžně vracet.
jen tak off topic:
to by me zajimalo, proc stranka zdrojak.root.cz ma 879 chyb v HTML validatoru :-) Obcas nejaka chybka se da tolerovat ale 879?????!!!!
Nemohu si pomoct, ale já tam vidím dvě… Který že validátor jich hlásí 879?
Asi bude záležet na tom, na co se člověk dívá, jí jich vidím 15, asi to bude článek od článku :)
Já se koukal na tu stránku, co psal první komentátor – tedy na titulku zdrojak.root.cz – a viděl jsem tam dvě. Přepošlu to vývojářům k zamyšlení :)
validator for firefox
Validitou sa nemá zmysel zaoberať, je to prežitok.
Teda by mě zajímalo, kdo Vás by zaměstnal :)
Mne zase zaujalo, že kompresí CSS a jQuery by šlo z půlmegové titulky ubrat 150 KB (alespoň Pagespeed to říká).
Chybí mi v anketě jedna volba: Používám HTML5 jenom kvůli jednodušší deklaraci <!DOCTYPE html> :D
jo, toto je silný tahák na HTML5. taky se mě to líbí spolu s meta charset
Áno, je to jednoduchšie. Len kvôli DTD a atribútu charset vás ale nikto nenúti písať HTML5. Môžete používať <!doctype html>, <meta charset> a k tomu staré spoľahlivé HTML4.
> Je to nesmyslný hype, to spíš přejdu někam jinam
a kam bych měl jako přejít? k flashi? :-)