HTML 5: pravda a mýty o budoucím standardu webových stránek

HTML 5: pravda a mýty o budoucím standardu webových stránek

Jděte s dobou a při tvorbě nových webových stránek využívejte standardu HTML5! Realita dnešních webů je prostá a nudná. Většinu animačních efektů zprostředkovává běžný Javascript či kaskádové styly CSS. V dnešním článku vám představíme “novou” rozšiřující specifikaci jazyka HTML, tedy HTML5.

Proč používat HTML 5?

  • Nové funkcionality

  • Lepší práce s multimédii

  • Nová javascriptová API zaměřená na webové aplikace

  • První optimalizovaná verze již z roku 1997

Proč nepoužívat HTML5?

  • Jazyk se neustále vyvíjí (momentálně ve stádiu Last Call)

  • Nutnost sledovat co již prohlížeče podporují

  • Příliš mnoho efektů může škodit

  • Vyvarujte se optimalizace jen pro určité verze prohlížečů! (Optimalizováno pro XX.17.3)

Výhody syntaxe

  • Zpětná kompatibilita

  • Nevadí syntaktické chyby

  • Krátký zápis (lze vynechávat koncové tagy)

Konsorcium W3C vs. WHATWG

Na samotný standard HTML lze pohlížet ze dvou úhlů. Z pohledu Microsoftu, který podporuje jednodušší verzi, kterou zpracovává konsorcium W3C. Tento standard by měl být ve stavu doporučení snad příští léto. Jeho současné návrhy (drafty) dnes podporuje v různé míře již většina webových prohlížečů. Typickým příkladem je podpora technologie Canvas, tedy kreslení přímo v okně prohlížeče, nebo třeba práce s multimédii – tagy <audio> a <video>.

Dalším pohledem je pohled od konkurenční skupiny WHATWG, která s vývojem tohoto standardu začala. Tato organizace, narozdíl od opatrné W3C, představuje tahouna v tomto směru a do svého standardu přidala prakticky všechny dostupné webové technologie, které postupně začínají podporovat především webové prohlíčeže Chrome a Firefox.

WebGL

Jedná se o technologii vykreslování akcelerované trojrozměrné grafiky. Častokrát je mylně považována za součást HTML5. O standardizaci 3D grafiky v prohlížečích se stará organizace Khronos. HTML5 pouze standardizuje jakým způsobem bude tato technologie použita vzhledem ke zdrojovému kódu. Zatímco společnosti jako Google, Apple, Mozilla a Opera jsou členy skupiny W3C tak i skupin WHATWG a Khronos, Microsoft je členem pouze skupiny W3C.

Důsledkem je, že Internet Explorer podporuje pouze a jenom normu HTML5 od W3C, tedy se můžete rozloučit s pokročilými funkcemi jako je zmiňované WebGL či hlasové ovládání. Problém nastává pro vývojáře, kteří musí udělat buď dvě verze webu, nebo se spokojit pouze se základem HTML5, který podporují všechny prohlížeče.

WebGL Water – http://madebyevan.com/webgl-water/

HTML5 a multimédia

Pro začátek začneme s něčím velmi jednoduchým a to s vkládáním obrázků v popředí:

<img src=“images/logo.png“ width=“400″ height=“175″ alt=“Logo“ />

Tag <img> je tzv. prázdný (empty) či nepárový (single), což znamená, že nemusíme používat ukončovací tag.

Poněkud zajmavějšími jsou značky <audio> a <video>, které dnes podporují prakticky všechny webové prohlížeče. Jediným problémem je, že není dán jednotný internetový kodek. Máme sice standardizovaný multimediální engine vestavěný přímo do prohlížeče, ale každý z nich používá různé dekodéry.

Přehled podporovaných audio formátů u prohlížečů:

Prohlížeč

MP3

WAV

OGG VORBIS

Google Chrome

Ano

Ne

Ano

Opera

Ne

Ano

Ano

Safari

Ano

Ano

Ne

Firefox

Ne

Ano

Ano

Internet Explorer (9 Beta)

Ano

Ano

Ne

 Přehled podporovaných video formátů u prohlížečů:

Prohlížeč

H.264

WEBM

OGG THEORA

Google Chrome

Ano (prozatím)

Ano

Ano

Opera

Částečně

Ano

Ano

Safari

Ano

Ne

Ne

Firefox

Ne

Ano

Ano

Internet Explorer (9 Beta)

Ano

Ne

Ne

Nakonec to tedy dopadá tak, že pokud chcete audio/video zpřístupnit pro všechny, musíte ho návštěvníkům nabídnout hned v několika formátech.

Příklad multi-formátového vložení písničky:

<audio controls=“controls“>

 <source src=“../song/mix.ogg“ type=“audio/ogg“ />

 <source src=“../song/mix.mp3″ type=“audio/mpeg“ />

</audio>

Příklad autoplay s tlačítky:

<audio id=“song“ src=“../song/mix.mp3″ autoplay=“autoplay“></audio>

<button onclick=“javascript:document.getElementById(‚Song’).pause

();“ >Pause Music</button>

<button onclick=“javascript:document.getElementById(‚Song’).play

();“ >Play Music</button>

Příklad vložení videa:

<video src=“../assets/priklad.mp4″ controls=“controls“></video>

Ve druhé části tohoto článku se můžete těšit na další zajímavé příklady využití nových možností HTML5. Kromě formulářů, geolokace či kreslení se můžete těšit na představení pokročilých webových funkcí. A nebudeme se držet při zemi!

Komentáře

Nahoru