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ů)

  1. Webdesignérův průvodce po HTML5 – díl nultý 25.5.2010
  2. Webdesignérův průvodce po HTML5 – nová sémantika 1.6.2010
  3. Webdesignérův průvodce po HTML5 – nová sémantika II 8.6.2010
  4. Webdesignérův průvodce po HTML5 – pohyblivé obrázky 15.6.2010
  5. Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky 22.6.2010
  6. Webdesignérův průvodce po HTML5 – taháme data od návštěvníka 29.6.2010
  7. HTML5 Audio: rádio ve vašich stránkách 13.7.2010
  8. Webdesignérův průvodce po HTML5: Microdata 20.7.2010
  9. AppCache: webové aplikace i bez připojení 27.7.2010
  10. Webdesignérův průvodce po HTML5: WebStorage 3.8.2010
  11. Webdesignérův průvodce po HTML5: Multithreading s WebWorkers 10.8.2010
  12. Webdesignérův průvodce po HTML5: Databáze v prohlížečích 17.8.2010
  13. Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí 24.8.2010
  14. HTML5: ukládáme si data k elementům 6.12.2010
  15. Webdesignérův průvodce po HTML5: Táhni a srůstej 5.1.2011
  16. HTML5: První krůčky s FileSystem API 15.2.2011
  17. Mobilizujeme web v HTML5 4.4.2011
  18. Single Page Apps a řešení problémů s historií 1.6.2011
  19. Page Visibility API: Kouká na mě vůbec někdo? 10.8.2011
  20. Práce se soubory v prohlížeči, díl 1 15.8.2011
  21. Práce se soubory v prohlížeči, díl 2 5.9.2011

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ázceOffThe­Road: 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í.

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!

Co vy a HTML5?

… 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!

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.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 13

Přehled komentářů

msgre Dobré to bylo
mat to by me zajimalo :-)
Martin Malý Re: to by me zajimalo :-)
bauglir Re: to by me zajimalo :-)
Martin Malý Re: to by me zajimalo :-)
mat Re: to by me zajimalo :-)
juraj Re: to by me zajimalo :-)
bauglir Re: to by me zajimalo :-)
TiGR Re: to by me zajimalo :-)
Zax anketa
ldown Re: anketa
juraj Re: anketa
harvie Je to nesmyslný hype, to spíš přejdu někam jinam
Zdroj: https://www.zdrojak.cz/?p=3310