Advertisement
  1. Code
  2. HTML5
Code

Co je to HTML5?

by
Difficulty:BeginnerLength:LongLanguages:

Czech (Čeština) translation by Jan Heřman (you can also view the original English article)

What You'll Be Creating

Zdroj: Topic Simple - Co je to HTML5? Pěkné animované video.

Úvod do HTML5

Vítejte na Envato Tuts+! Tento tutoriál představuje úvod do problematiky HTML5. Pokud jste o HTML5 zatím mnoho neslyšeli, nebo chcete jen lépe porozumět jeho významu, jste na správném místě.

HTML5 je poslední standard, podle něhož prohlížeče zobrazují a zpracovávají webové stránky. Když byl v roce 2014 standard schválen, jednalo se o první aktualizaci HTML po 14 letech. V dnešní době taková prodleva mezi aktualizacemi představuje doslova věčnost.

Smysl HTML5 spočívá v první řadě v tom, usnadnit prostřednictvím dohodnutých standardů práci vývojářům a tvůrcům webových prohlížečů. Je také navrženo s cílem poskytnout lepší, rychlejší a ucelenější uživatelský zážitek na PC i mobilních zařízeních.

Zde je několik klíčových vylepšení, která HTML5 přináší:

  • Stránky mají jednodušší a jasnější strukturu elementů, takže je snazší je vytvářet, upravovat a odhalovat chyby - a také budovat automatizované služby pomáhající s hledáním důležitých informací na webu.
  • HTML5 nabízí standardizované elementy pro běžné objekty médií, které dříve vyžadovaly otravné audio, video a podobné pluginy. Tyto pluginy musely být kvůli bezpečnosti pravidelně aktualizovány.
  • Došlo k integraci rozhraní, aby byly uspokojeny současné webové a mobilní potřeby. Jedním z mých oblíbených příkladů je geolokace, která umožňuje určit GPS souřadnice uživatele internetu prostřednictvím webového prohlížeče. Tato vychytávka byla dříve dostupná jen u mobilních aplikací na telefonech vybavených GPS. 

Pro příklad se můžete podívat na ukázku z kurzu Tvorba startupu s PHP: Geolokace a Google Places (Tuts+):

What is HTML5 Geolocation Example

Koho se HTML5 týká?

Jste jen uživatelem internetu nebo fanouškem YouTube?

HTML5 zvýší rychlost, usnadní používání a vylepší konzistenci napříč internetem. Ano, váš zážitek ze sledování YouTube se postupně ustálí na stupni báječný. Ubudou aktualizace prohlížeče a pluginů, ubude bezpečnostních hrozeb a naopak přibude elegantních, čitelnějších a rychlejších webových stránek. 

Jste webový vývojář?

HTML5 vám usnadní život a výrazně rozšíří vaše možnosti. Také to znamená, že můžete vytvářet projekty a starosti se stejnorodostí zobrazení přenechat více na tvůrcích prohlížečů. To znamená méně podmíněného kódu.

Chcete vytvořit webový prohlížeč?

Na jednu stranu máte k dispozici detailní dokumentaci specifikace HTML5 s informacemi, co a jak byste měli udělat. Na druhou stranu je ale potřeba udělat věcí daleko více, a udělat je správně. Už nebude tak snadné nějak váš prohlížeč odlišit od těch "velkých".

Chcete se dozvědět víc?

Jen krátká připomínka, než se do tématu ponoříme! Snažím se sledovat diskuzi pod článkem. Pokud máte dotaz nebo nápad na nové téma, můžete mě kromě komentářů níže kontaktovat také prostřednictvím Twitteru na @reifman.

Pozadí HTML5

Odkud se vzalo HTML5?

Od počátků webu v roce 1991 je HTML5 zatím posledním přírůstkem ve více než dvacetileté historii programovacích standardů.

Historie HTML

Standard HTML byl poprvé ustanoven v roce 1993. Takto za sebou v dalších letech následovaly další verze:

  • HTML 2.0: 1995
  • HTML 4.0: 1997
  • HTML 4.01: 2000
  • HTML 5: 2014

Cíle HTML5

Podle Wikipedie je smyslem HTML5 sjednotit dosavadní verze a nejrůznější typy dokumentů jako XHTML 1 a DOM Level 2 HTML:

[HTML5] rozšiřuje, vylepšuje a racionalizuje kód dokumentů a přivádí na scénu kód a ... (rozhraní API) pro komplexní webové aplikace... HTML5 je také potenciálním kandidátem pro řešení multi-platformních mobilních aplikací. Řada vlastností byla navržena s ohledem na méně výkonná zařízení, jako jsou chytré telefony nebo tablety.

Takto vysvětluje cíle HTML5 MakeUseOf:

  • Odstranit potřebu použití pluginů (jako např. Flash) u obsahu, který využívá každý. Vytvořit nativní podporu pro audio, video apod.
  • Omezit JavaScript a další nadbytečný kód, a to prostřednictvím nových nativních elementů.
  • Zajistit konzistenci napříč prohlížeči a zařízeními.
  • Vše výše uvedené provést tak transparentně, jak jen to je možné.
What is HTML5 Plugin Past for Video Element

Zdroj obrázku: Topic Simple

Jaké nové vlastnosti HTML5 nabízí?

Přijde na to, že jich je hodně! HTML5 nabízí takové množství novinek, že je hlavní webové prohlížeče ani 18 měsíců po schválení standardu stále ještě nemají plně implementované.

What is HTML5 Browser compatiblity

Zdroj obrázku: PHPFlow

Existuje interaktivní vizuální duha od HTML5Readiness (níže). Přejeďte myší po jednotlivých paprscích a zjistíte, jaké prohlížeče jakou vlastnost podporují.

What is HTML5 Compatibility Rainbow

Je to zábavné, na jiných stránkách lze ovšem nalézt další, intuitivnější schémata.

Míra přijetí HTML5

V roce 2011 Wikipedia uváděla, že zhruba třetina ze 100 největších webů světa používala něco z HTML5. V srpnu 2013 zapracovalo HTML5 zhruba 153 webů z žebříčku Fortune 500.

Zde je graficky znázorněna šíře palety schopností HTML5:

What is HTML5 Feature Overview

Zdroj obrázku: Wikipedia

Nové elementy v HTML5

Nové základní elementy HTML5 zjednodušují rozvržení stránky a ladění vašeho (či cizího) kódu. Automatizované služby také snáze prohledají stránku a porozumí důležitosti jednotlivých komponentů.

Pro rozvržení stránky a klíčové součásti existují nyní specifické elementy, jako například:

  • <header> a <footer>
  • <nav> pro všechna možná menu
  • <aside> pro postranní lišty, nebo související obsah
  • <article> , který by se dal přirovnat např. k příspěvku na blogu
  • <section>, element podobný <div> s tím rozdílem, že nese určitý význam
  • <audio> a <video> tagy pro nativní podporu přehrávání médií Už žádné pluginy a bezpečnostní updaty.
  • <canvas> pro kreslení prostřednictvím separátního skriptovacího jazyka
  • <embed> jako prostor pro vložení externího obsahu nebo aplikací

Tady je hezky zpracované grafické vyjádření výše popsaného od Smashing Magazine:

What is HTML5 New Elements

Uveďme ještě několik pokročilejších vlastností HTML5, jako je integrace API rozhraní, usnadnění psaní JavaScriptu a větší konzistence napříč prohlížeči:

Další informace nabízí HTML5 a budoucnost webu. Zde je jeden citát - velmi oceňují cache aplikací:

Google Gears nám dal offline datové úložiště a Flash odhalil sílu cache (Pandora ji využívá k ukládání přihlašovacích informací). S příchodem HTML5 jsou tyto schopnosti přístupné rovnou v jazyce samotném a mohou být jednoduše rozšířeny pomocí JavaScriptu.

Chcete vědět, jaké vlastnosti jsou podporovány v jakých prohlížečích? HTML5Test nabízí užitečný přehled rozsahu podpory:

What is HTML5 Feature Compatibility Browser Matrix

Objevilo se tolik nových funkcí, že je nemožné všechny zde vyjmenovat. Dole pod článkem jsou uvedeny další doporučené zdroje pro získání detailnějších informací.

Pár příkladů použití HTML5 v praxi

Pojďme se nyní podívat na několik příkladů použití HTML5 v praxi.

Šablona HTML5 stránky

Jednoduchost HTML5 tkví jednoznačně v nových rozvrženích stránky. Větší množství na obsah orientovaných elementů činí kód snáze pochopitelným a udržovatelným. Tady je ukázka vytvořená pomocí projektu HTML5-Reset:

Všimněte si jednodušší deklarace doctype, tagů pro odkazy a skripty. Skript HTML5Shiv zajišťuje podporu HTML5 ve starších verzích prohlížeče Internet Explorer (9.x a méně).

Pokud by vás zajímaly další postupy, podívejte se na HTML5 Boilerplate, rozšířenou open-source šablonu HTML5 stránky.

Video element a přehrávače

Na videu z W3Schools je zachycena tvorba zdrojového kódu na jedné a výsledného přehrávače na druhé straně.

What is HTML5 Video Example

Není potřeba žádný plugin, žádné aktualizace.

Formuláře

HTML5 disponuje širokou škálou vylepšení pro formuláře a elementy vstupů. Vše za účelem usnadnění práce programátora a zvýšení komfortu uživatele. Vstupní elementy nyní například podporují řadu vestavěných metod pro ověřování. Zde je ověření pro čísla v daném rozmezí:

What is HTML5 Input Element Example

Na HTML5 Doctor nalezenete hned několik skvělých tutoriálů zabývajících se formuláři:

Takto například vypadá element s nastaveným rozmezím v prohlížeči Chrome:

What is HTML5 Range element example

Škálovatelná vektorová grafika (SVG)

V HTML5 lze snadněji animovat elementy pomocí JavaScriptu i HTML5 samotného. Jednoduché animované hodiny mohou vypadat třeba takto (jsou škálovatelné, stačí změnit zoom).

What is HTML5 SVG Animated Clock Demo

Následuje ukázka integrace JavaScriptu pro výše uvedené hodiny.

Co dál?

Doufám, že se vám tento článek o vývoji a výhodách HTML5 líbil. Pokud byste rádi zabrousili ještě hlouběji do oblasti HTML5, doporučuji dva další zdroje:

  • Představení HTML5: Vynikající představení HTML5 pro vývojáře, kteří by rádi v rychlosti prošli všechny nové elementy.
  • HTML5 - ukázky a příklady: Perfektní ukázka toho, co všechno je v HTML5 možné, prostřednictvím kolekce příkladů.

Různé demoverze HTML5 si můžete prohlédnout zde (ne všechny mi ale fungovaly):

What is HTML5 Demo site at HTML5Testcom

Pokud jste, jako mnoho uživatelů Envato Tuts+, správci stránek běžících na WordPress, možná byste měli svá budoucí témata vytvářet se zřetelem na vyhovění standardům HTML5. Standardy podepřený vývoj společně s pevnou podporou prohlížečů činí vývoj pro mnoho z nás jednodušší. Minimalizuje se množství bugů, na něž naši zákazníci naráží a současně se zvyšuje kvalita uživatelského zážitku.

Celkem vzato, HTML5 na mě udělalo dojem. A vše nasvědčuje tomu, že se bude vyvíjet rychleji než jen každých 14 let.

Hledáte-li další nástroje, které vám umožní vylepšit vaše schopnosti v HTML5, nezapomeňte projít naší nabídku na Envato Market.

Moc rád bych od vás slyšel zpětnou vazbu ohledně HTML5 a návrhy na témata, o nichž byste se rádi dozvěděli více. Neváhejte a posílejte své otázky a komentáře. Najdete mě také na Twitteru pod přezdívkou @reifman. Ostatní moje tutoriály naleznete na Envato Tuts+.

Související odkazy

O tématu HTML5 existuje velká spousta užitečných zdrojů, já jsem vybral alespoň několik z těch dle mého názoru nejužitečnějších:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.