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

Zdroják » Webdesign » Webdesignérův průvodce po HTML5 – díl nultý

Webdesignérův průvodce po HTML5 – díl nultý

Články Webdesign

HTML5 je bezpochyby tématem číslo jedna většiny dnešních webdesignérských hovorů, sporů a diskusí. Proto jsme se rozhodli věnovat se mu zde na Zdrojáku, a to podrobněji a spíš z praktického hlediska, tedy „co můžeme začít používat a k čemu je to dobré“. V dnešním díle si ujasníme, o čem vlastně bude řeč.

HTML5 je nástupce HTML 4.01 a po ukončení vývoje XHTML 2 hlavní cesta pro web kupředu. Specifikace je to obrovská a lidé často mluví o HTML5, ale myslí pouze jeho malý kousek. Ta totiž nepokrývá jen sémantiku a markup, ale zabývá se JavaScriptovými API, offline fungováním aplikací, kreslením v prohlížeči, a vůbec řeší mnoho věcí, které potřebujeme pro vytváření webových aplikací (taky ne náhodou se jmenovala Web Applications 1.0, když se v roce 2004 začala vyvíjet).

Motto: V poslední době všichni mluví o HTML5. Nejvyšší čas, abychom se v Čechách přidali.

Základní principy

Než se pustíme do jednotlivých specifických částí specifikace, měli bychom si uvědomit, co má HTML5 za cíl řešit a jaké principy se v něm dodržují. Budeme se na ně odkazovat v průběhu celého seriálu, protože je důležité pochopit, o co se autoři snaží. Specifikace je v mnoha bodech ještě nestabilní a mění se, ale vždy s ohledem na následující principy:

1. Kompatibilita

  • Současné stránky se nesmí stát v HTML5 nevalidními, naopak. Spoustu technik, které webdesigneři dnes používají (a nyní jsou nestandardní) HTML5 nově posvěcuje. Vyskytly se obavy, že to může vést k hodně špatnému kódu (podle mě jsou opodstatněné – pozn.aut.) HTML5 je skutečně hodně volné v tom, co vám dovolí dělat. Ale jak říká Jeremy Keith, mimochodem autor nové knížky od A Book Apart  – HTML5, specifikace by se neměla starat o to, jaké standardy pro psaní kódu si stanovíte. O to by se měl starat váš textový editor.
  • Pokud se přidává do specifikace něco nového, musí to ve stávajících prohlížečích fungovat a nebo to nesmí stránky udělat nepoužitelnými (princip tzv. “graceful degradation”).
  • Nedělejme revoluci, když evoluce funguje.

2. Užitečnost

  • Řešme reálné problémy. Pojďme skvěle vyřešit 80 % nejčastějších problémů. Na zbývajících 20 % stejně skoro nikdo nenarazí a vyřešit je je pořádně složité.
  • Priority jsou jasné: uživatelé > autoři > implementátoři > autoři specifikace > teoretická čistota řešení.
  • Bezpečnost řešení musí být zahrnuta již ve specifikaci.

3. Interoperabilita

  • Definujme jasné chování věcí tak, aby tvůrci prohlížečů nemohli používat vlastní názor na to, jak věc má fungovat, a poté bychom měli 5 různých implementací.
  • Řešme co se stane, když nastane chyba.
  • Pokud to jde, preferujme jednoduchá řešení.

4. Přístupnost

  • Všechna řešení musí být přístupna komukoli, z jakéhokoli zařízení, v jakémkoli jazyce.

Současný stav implementace v prohlížečích

Jak sami vidíte, směr, kterým se HTML5 vydalo, je užitečnost a důraz na současné problémy. Nejedná se tedy o žádnou akademickou obludnost o devíti stech stranách. (Tedy, specifikace vlastně má přes 900 stran.) No a co na to tvůrci prohlížečů?

Pochopitelně jsou docela šťastní. Mají velké slovo v tom, co do specifikace půjde a co ne (proč specifikovat něco, co všichni odmítají implementovat). Všichni tvůrci prohlížečů na HTML5 spolupracují a snaží se, aby jejich prohlížeče podporovaly co největší část. I Microsoft oznámil podporu částí HTML5 v IE9. A ostatní také poctivě implementují. Nejdále je zatím asi Webkit, tedy Safari a Chrome, a Gecko, tedy Firefox. Ostatně porovnejte si to sami v přehledu toho, co kdo podporuje a co ne.

Trocha historie a vývoj specifikace

Vývoj specifikace začal v roce 2004 pod hlavičkou WHATWG (Web Hypertext Application Technology Working Group), zcela mimo W3C. Skupina byla založena lidmi z Apple, Mozilla Foundation a Opera Software, kteří chtěli rozvíjet HTML a ne dělat na webu revoluci, kterou přinášelo XHTML 2.

V roce 2007 specifikaci přijalo pod svá křídla W3C. Očekává se, že specifikace by měla dojít do stádia “Candidate Recommendation” někdy v roce 2012, stavu “Recommendation” by pak měla dosáhnout v roce 2022. Takže je to běh na pořádně dlouhou trať.

Editor specifikace je Ian Hickson (v současnosti zaměstnanec Google), přezdívaný Hixie a jeho moc nad specifikací je značná. Říká se, že to tam funguje trošku jako diktatura. Osobně se mi zdá, že ať to funguje jakkoli, funguje to docela dobře.

Specifikace je rozdělená na mnoho částí a některé z těchto částí jsou poměrně stabilní a lze je používat již dnes. Tyto části také implementují tvůrci prohlížečů a my se na ně v našem seriálu zaměříme.

O čem tedy bude tento seriál

Rádi bychom v tomto seriálu pokryli všechny části HTML5. Není však v silách jednoho člověka to všechno pojmout, proto na seriálu budou spolupracovat i další autoři. (Pokud jste již vy nějakou část HTML5 použili a chtělo by se vám o tom napsat článek, prosím, ozvěte se.) Zatím jsou v plánu následující díly:

  1. Sémantika a markup – nové tagy jako <article>, <header> a podobné věci
  2. <video> a <audio>  – použití, problémy
  3. Formuláře – nové atributy formulářů, jejich chování, výhody
  4. Microdata – další možnost jak sémanticky popisovat vaše data
  5. Canvas – plátno, na které můžete kreslit pomocí JavaScriptu
  6. Offline – vaše webové aplikace mohou běhat, i když je uživatel offline
  7. Geolokace – zjistěte pozici návštěvníka vašeho webu
  8. WAI-ARIA – accesisible rich internet application (ač není přímo součástí HTML5)

Proč HTML5 už dnes?

Mnoho webdesignérů si může položit dotaz: Proč bych se měl zajímat o HTML5, když jej mnoho prohlížečů ještě nepodporuje a specifikace má být hotová v roce 2022?

Samozřejmě můžete psát v HTML 4.01, XHTML 1.0, v čemkoli, co vám funguje. Je ale třeba si uvědomit, že dnes na webu nejsou různé verze HTML. Je jen jedna – tu kterou znají prohlížeče. Hrátky s tím, jakou verzi používáme, jsou dobré leda pro validátory. I proto zavádí HTML5 Doctype <!DOCTYPE html>. Tedy – prostě HTML. Ale o tom více v dalším díle. Takže tím, že nebudete používat HTML5, se vlastně okrádáte o funkce, které stejně již některé prohlížeče umí.

A není jich málo. Již dnes můžete používat hromadu věcí z HTML5, mohou vám ušetřit spoustu práce a nadchnout uživatele nových prohlížečů. Uživatelé starších prohlížečů je prostě nebudou moci využít. Například tak můžete nabídnout uživatelům Chrome, Firefoxu (a dalších) používat vaši webovou aplikaci offline, zatímco uživatel IE7 ji prostě bude moci používat pouze online. To přeci ničemu nevadí a uživatelů nových prohlížečů vás budou mít rádi. A protože jsou to vaši zákazníci (nebo vašich klientů), tak to je sakra dobrá věc, ne?

Další dobrý důvod je, že většina moderních mobilních zařízení dneska nepodporuje Flash nebo je jeho podpora skutečně špatná. A například společnost Apple dala jasně najevo, že jeho podporu ani neplánuje a sází na HTML5. Jak chcete tedy bez HTML5 přehrávat video pro všechny uživatele těchto zařízení? Tato zařízení mají skvělé webové prohlížeče a používání HTML5 vám může přinést náskok na rychle nastupujícím mobilním trhu. Což je zase dobré pro business.

A nakonec – je přeci dobré být v obraze a vědět, na čem se pracuje. Pracujeme v oboru, který se mění ze dne na den a zkoumat nové věci a experimentovat s nimi k našemu řemeslu prostě patří. Pokud vás to nebaví, zauvažujte nad tím, zda je pro vás tahle práce vhodná. Není rozhodně nutné všechno nasazovat na klientské weby, ale třeba na osobní blog, kam stejně chodí hlavně webdesigneři vybaveni nejnovějšími prohlížeči? To je přeci “cool”, ne?

Dost řečí. Co bude příště?

Příště už se skutečně podíváme HTML5 pořádně na zoubek. Na úvod jsem si dal své oblíbené téma sémantiky a snad se vejdu do jednoho článku. Takže zase za týden.

Do té doby si třeba poslechněte 2. díl The Big Web Show s Jeffrey Zeldmanem, Danem Benjaminem a hostem Jeremy Keithem o HTML5 (anglicky) a potom si objednejte Jeremyho knížku z A Book Apart (zase anglicky).

A pokud by vám to náhodou nestačilo, tak si můžeme o HTML5 povídat v diskusním fóru tady na Zdrojáku.

Komentáře

Subscribe
Upozornit na
guest
24 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
liborse

Jsem moc rád, že jste začali psát o tomto tématu, které mne velmi zajímá. Jen tak dále.

Scarab

Souhlas, taky se připojuji

imploder

Taky se připojuju.
Z HTML5 se těším nejvíc na File API – webové aplikace budou přes FileReader a FileWriter moct pracovat s lokálními soubory – javascript bude mít přímo přístup k vybranému souboru, žádné zbytečné tahání celého souboru na server a zase zpět. FileWriter zatím ve specifikaci není, ale připravuje se.
File API a vůbec práce se soubory je podle mě hodně důležitá věc pro integraci webových aplikací s normálním desktopem. Teď se třeba na zmenšování obrázků nebo hromadný upload musí vyrábět javovské nebo flashové aplety, s HTML5 a File API bude stačit obyčejné HTML a javascript. Možností použítí je plno.

Martin Malý

Něco z toho funguje už teď – viz http://zdrojak.root.cz/clanky/prace-se-soubory-v-html5/

imploder

Vím, četl jsem, díky.

troll

jenom poznamecka, ty vnitrni stiny v tom piktogramu HTML5, v hlavicce jsou naprosta tragedie :-|

tomexx

To je tak, keď programátor začne zabŕdať do grafiky :)

David

Zajímalo by mě, jestli přímo autoři specifikace někde deklarují, jak stabilní jsou její jednotlivé části. Resp. jak velké riziko je pro současné implementátory, že se jednotlivé části budou měnit, a jejich implementace se stanou nevalidními podle specifikace (a nekompatibilními s jinými, novějšími implementacemi). Zvláště v souvislosti s deklarovaným datumem 2022 mi to připadá jako docela velké potenciální nebezpečí.

Aleš Roubíček

Jako vývojář webové aplikace je ve vašem zájmu reagovat na změny pružně. Projděte si, co a jak už je kde implementováno (v prohlížečích) a tam kde je velký průnik, tam už k zásadním změnám nejspíš nedojde (Video, Canvas, Forms, Geo).

Bauglir

Podstatné je datum 2012, až bude Candidate, ten už je stabilní, to datum 2022 je tak vzdálené z toho důvodu, že jsou vyžadované 2 nezávislé implementace celé specifikace a o chvilku potrvá (např. 10 let staré CSS2.1 ještě nikdo celé neiplementoval)

Jiří Kosek

Tomu, že by v roce 2012 bylo CR věří jen velcí optimisté. Navíc CR neznamená, že je specifikace stabilní. Cokoliv se ještě může změnit.

Bauglir

Jenom předávám získané informace :), jestli bude v 2012 CR, nebo nebude uvidíme… Samo, že se pak věci ještě mohou změnit, ale CR by mělo být dostatečně stabilní teoreticky na to, aby mohlo jít do praxe, navíc s rychlostí, kterou se vendoři pustili do implementací (poděkujme Googlu) věřím, že možné mouchy se vychytají co nejdříve, upříme řečeno je jedno, jestli bude stabilní Draft, Candidate, Proposal nebo Recommendation, čím dříve, tím lépe.
Navíc IMHO vzhledem k tomu, že samotná tvorba doporučení je na vendorech, tak si myslím, že to bude stabilní co nejdříve :)

Bauglir

Vývoj doporučení tentokrát probíhá mimo W3C, doporučení jako takové tvoří WHATWG.

Jiří Kosek

No, možná byste si o tom měl něco více nastudovat. Od roku 2007 se HTML5 vyvíjí opět pod hlavičkou W3C (http://www.w3.org/html/wg/), byť se stále udržuje i synchronizovaná verze specifikace na whatwg.org, která se někdy liší v tom, které části dalších specifikací do HTML5 zahrnuje.

Bauglir

To se nevylučuje, ano, vývoj probíhá pod hlavičkou W3C, ale tvorba doporučení probíhá ve WHATWG

Bauglir

Navíc Váš popis je nepřesný, W3C udržuje synchronizovanou verzi, která se někdy liší v tom, které části ještě do HTML5 nezahrnuje :)

Ifo

Verze HTML jsou minimálně dvě. To, co vykreslují prohlížeče v módu zpětné kompatibility a to co vykreslují prohlížeče ve striktním módu. Toto se týká především MSIE a jeho netradičního pojetí CSS vlastnosti width.

_r3450n_

Taky clanek vitam. HTML me sice zacalo zajimat jen nedavno, ale bavi me si s tim hrat.
Jedna mala chybicka v textu :
„To přeci ničemu nevadí a uživatelů nových prohlížečů vás budou mít rádi.“

Railbot

Verze HTML je skutečně jen jedna. Onen režim zpětné kompatibility (tzv. quirk) a standardní režim se týkají především interpretace CSS, nikoli HTML. S vlastností width je vše v úplném pořádku, dokonce i v IE libovolné verze. Jde o rozdílné počítání šířky prvků (rozdílný box model).

juraj

Asi som sám, ale to „netradičné pojatie“ sa mi zdá omnoho logickejšie a praktickejšie ako to súčasné. Ak robím jednoduchší dizajn, ktorý sa dá ľahko vyladiť aj pre quirk módy, prepnem IE 6 a 7 do quirk módu a ostatným nastavím box-sizing: border-box.

Bauglir

Takhle to dopadá, když W3C neposlouchá tvůrce prohlížečů :) přes 90% uživatelů používalo prohlížeče s box-sizingem (NN, MSIE), W3C specifikovalo content-sizing. Doplácíme na to všichni. W3C se rozhodlo pro XHTML, vývoj se po 10 letech zastavil s nulovým výsledkem a máme tu opět tvůrce prohlížečů, kteří táhnou věci kupředu :)
Jinak souhlasím, box-sizing se i mě zdá mnohem logičtější.

Bauglir

Ahoj,
sice „trochu“ reklama, ale jestli se zajímáte o HTML5 a přidružená API, jukněte sem
http://www.webnt.cz/
ty stránky jsou nové, takže zatím jenom 4 články.
Broňa

verajo

Predem bych chtel podekovat za clanek.
Ted dotaz do pleneru: Vite nekdo proc je Microsoft tak ‚konzervativni‘ pri vyvoji IE, resp. proc je pri podpore casti HTML5 v odkazanem clanku takove cervene pole?
pozn. Urazky MS si prosim nechte, muj dotaz smeruje k pozadi toho problemu.
Diky za odpoved.

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.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.