Přejít k navigační liště

Zdroják » Webdesign » Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí

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

Články Webdesign

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

Komentáře

Subscribe
Upozornit na
guest
13 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Michal Valoušek

Díky za skvělý seriál. Jsem si jistý, že se k němu budu průběžně vracet.

mat

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

bauglir

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

mat

validator for firefox

juraj

Validitou sa nemá zmysel zaoberať, je to prežitok.

bauglir

Teda by mě zajímalo, kdo Vás by zaměstnal :)

TiGR

Mne zase zaujalo, že kompresí CSS a jQuery by šlo z půlmegové titulky ubrat 150 KB (alespoň Pagespeed to říká).

Zax

Chybí mi v anketě jedna volba: Používám HTML5 jenom kvůli jednodušší deklaraci <!DOCTYPE html> :D

ldown

jo, toto je silný tahák na HTML5. taky se mě to líbí spolu s meta charset

juraj

Á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.

harvie

> Je to nesmyslný hype, to spíš přejdu někam jinam
a kam bych měl jako přejít? k flashi? :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.