Czech (Čeština) translation by Jan Heřman (you can also view the original English article)
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+):
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é.
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é.
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í.
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:
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:
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:
- Přehrávání audio a video: mediální soubory lze přehrávat v různých prohlížečích bez potřeby pluginů.
- Geolokace: identifikace geografické polohy návštěvníka.
- Táhni a pusť: upload souborů v prohlížeči pomocí jednoduchých gest.
- Cache aplikace: podpora běhu HTML stránek offline.
- Web workers: spuštění JavaScriptu na pozadí (neblokuje vykreslení stránky).
- Serverem zaslané události: server může aktualizovat stránky v prohlížeči poté, co byly načteny. A to jednodušeji a efektivněji, než to dokáže AJAX a JavaScript.
- Offline ukládání dat: způsob lokálního uložení dat v prohlížeči nezávisle na cookies. Dobrý návod, jak postupovat, nabízí Jak na HTML5 offline úložiště na vašich stránkách.
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:
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:
1 |
<!doctype html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
|
7 |
<title></title>
|
8 |
<meta name="author" content="" /> |
9 |
<meta name="description" content="" /> |
10 |
|
11 |
<link rel="stylesheet" href="assets/css/style.css" /> |
12 |
|
13 |
<!--[if lt IE 9]>
|
14 |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
15 |
<![endif]-->
|
16 |
</head>
|
17 |
|
18 |
<body>
|
19 |
<header>
|
20 |
<h1><a href="/">Page Title</a></h1> |
21 |
<nav>
|
22 |
<ol>
|
23 |
<li><a href="">Nav Link 1</a></li> |
24 |
<li><a href="">Nav Link 2</a></li> |
25 |
<li><a href="">Nav Link 3</a></li> |
26 |
</ol>
|
27 |
</nav>
|
28 |
</header>
|
29 |
<article>
|
30 |
<h1>Article Header</h1> |
31 |
<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p> |
32 |
|
33 |
<h2>Article Subhead</h2> |
34 |
<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p> |
35 |
|
36 |
</article>
|
37 |
|
38 |
<aside>
|
39 |
<h2>Sidebar Content</h2> |
40 |
</aside>
|
41 |
|
42 |
<footer>
|
43 |
<p><small>© Copyright Your Name Here 2014. All Rights Reserved.</small></p> |
44 |
</footer>
|
45 |
|
46 |
</div>
|
47 |
|
48 |
<script src="scripts/js/scripts.js"></script> |
49 |
</body>
|
50 |
</html>
|
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ě.
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í:
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:
Š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).
Následuje ukázka integrace JavaScriptu pro výše uvedené hodiny.
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta charset=utf-8> |
5 |
<meta name="viewport" content="width=620"> |
6 |
<title>HTML5 Demo: SVG clock animation</title> |
7 |
<link rel="stylesheet" href="css/html5demos.css"> |
8 |
<script src="js/h5utils.js"></script></head> |
9 |
<body>
|
10 |
<section id="wrapper"> |
11 |
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> |
12 |
<header>
|
13 |
<h1>SVG clock animation</h1> |
14 |
</header>
|
15 |
|
16 |
<style>
|
17 |
/* any custom styles live here */
|
18 |
line { |
19 |
stroke-width: 3px; |
20 |
stroke: black; |
21 |
}
|
22 |
</style>
|
23 |
<article>
|
24 |
<p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p> |
25 |
<div>
|
26 |
<label for="zoominput">Zoom</label> |
27 |
<select id="rangeinput" onchange="CLOCK.zoom();"> |
28 |
<option value="1" selected="selected">1x</option> |
29 |
<option value="2">2x</option> |
30 |
<option value="3">3x</option> |
31 |
<option value="4">4x</option> |
32 |
<option value="5">5x</option> |
33 |
</select>
|
34 |
</div>
|
35 |
<div>
|
36 |
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" > |
37 |
<g>
|
38 |
<circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/> |
39 |
<line id="hour0" x1="100" y1="10" x2="100" y2="0"/> |
40 |
<line id="hour1" x1="150" y1="13" x2="145" y2="22"/> |
41 |
<line id="hour2" x1="187" y1="50" x2="178" y2="55"/> |
42 |
<line id="hour3" x1="190" y1="100" x2="200" y2="100"/> |
43 |
<line id="hour4" x1="187" y1="150" x2="178" y2="145"/> |
44 |
<line id="hour5" x1="150" y1="187" x2="145" y2="178"/> |
45 |
<line id="hour6" x1="100" y1="190" x2="100" y2="200"/> |
46 |
<line id="hour7" x1="50" y1="187" x2="55" y2="178"/> |
47 |
<line id="hour8" x1="13" y1="150" x2="22" y2="145"/> |
48 |
<line id="hour9" x1="0" y1="100" x2="10" y2="100"/> |
49 |
<line id="hour10" x1="13" y1="50" x2="22" y2="55" /> |
50 |
<line id="hour11" x1="50" y1="13" x2="55" y2="22" /> |
51 |
</g>
|
52 |
<g>
|
53 |
<line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/> |
54 |
<line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;" id="minutehand"/> |
55 |
<line x1="100" y1="100" x2="100" y2="5" style="stroke-width: 2px; stroke: red;" id="secondhand"/> |
56 |
</g>
|
57 |
</svg>
|
58 |
</div>
|
59 |
|
60 |
</article>
|
61 |
<script>
|
62 |
var CLOCK = (function() { |
63 |
var drawClock = function() { |
64 |
var INITIAL_R = 100; |
65 |
|
66 |
var zoom = document.getElementById("rangeinput").value; |
67 |
|
68 |
var r = INITIAL_R * zoom; |
69 |
|
70 |
// Draw Circle
|
71 |
var circle = document.getElementById("circle"); |
72 |
circle.setAttribute('r', r); |
73 |
circle.setAttribute('cx', r); |
74 |
circle.setAttribute('cy', r); |
75 |
|
76 |
// Draw Hours
|
77 |
for(var i = 0; i < 12; i++) { |
78 |
var hour = document.getElementById("hour"+i); |
79 |
var degrees = i * 30; |
80 |
hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length. |
81 |
hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length. |
82 |
hour.setAttribute('x2', getX(degrees, r)); |
83 |
hour.setAttribute('y2', getY(degrees, r)); |
84 |
}
|
85 |
|
86 |
// Draw hands
|
87 |
drawHands(); |
88 |
};
|
89 |
|
90 |
var drawHands = function() { |
91 |
// Constants for hand's sizes.
|
92 |
var SECONDS_HAND_SIZE = 0.95, |
93 |
MINUTES_HAND_SIZE = 0.85, |
94 |
HOURS_HAND_SIZE = 0.55; |
95 |
|
96 |
var circle = document.getElementById("circle"); |
97 |
|
98 |
// Clock Circle's Properties
|
99 |
var r = circle.getAttribute('r'), |
100 |
cx = parseInt(circle.getAttribute('cx')), |
101 |
cy = parseInt(circle.getAttribute('cy')); |
102 |
|
103 |
// Current time.
|
104 |
var currentTime = new Date(); |
105 |
|
106 |
// Draw Hands
|
107 |
drawHand(document.getElementById("secondhand"), |
108 |
currentTime.getSeconds(), |
109 |
SECONDS_HAND_SIZE, |
110 |
6); |
111 |
drawHand(document.getElementById("minutehand"), |
112 |
currentTime.getMinutes(), |
113 |
MINUTES_HAND_SIZE, |
114 |
6); |
115 |
drawHand(document.getElementById("hourhand"), |
116 |
currentTime.getHours(), |
117 |
HOURS_HAND_SIZE, |
118 |
30); |
119 |
|
120 |
function drawHand(hand, value, size, degrees) { |
121 |
var deg = degrees * value; |
122 |
x2 = getX(deg, r, size, cx), |
123 |
y2 = getY(deg, r, size, cy); |
124 |
|
125 |
hand.setAttribute('x1', cx); |
126 |
hand.setAttribute('y1', cy); |
127 |
hand.setAttribute('x2', x2); |
128 |
hand.setAttribute('y2', y2); |
129 |
}
|
130 |
};
|
131 |
|
132 |
/*
|
133 |
* Get a Point X value.
|
134 |
* degress. Angle's degrees.
|
135 |
* r. Circle's radio.
|
136 |
* adjust. Percent of length.
|
137 |
* x. Start of X point.
|
138 |
*/
|
139 |
function getX(degrees, r, adjust, x) { |
140 |
var x = x || r, |
141 |
adj = adjust || 1; |
142 |
return x + r * adj * Math.cos(getRad(degrees)); |
143 |
}
|
144 |
|
145 |
/*
|
146 |
* Get a Point Y value.
|
147 |
* degress. Angle's degrees.
|
148 |
* r. Circle's radio.
|
149 |
* adjust. Percent of length.
|
150 |
* x. Start of Y point.
|
151 |
*/
|
152 |
function getY(degrees, r, adjust, y) { |
153 |
var y = y || r, |
154 |
adj = adjust || 1; |
155 |
return y + r * adj * Math.sin(getRad(degrees)); |
156 |
}
|
157 |
|
158 |
// Convert from degrees to radians.
|
159 |
function getRad(degrees) { |
160 |
var adjust = Math.PI / 2; |
161 |
return (degrees * Math.PI / 180) - adjust; |
162 |
}
|
163 |
|
164 |
return { |
165 |
init: function() { |
166 |
drawClock(); |
167 |
setInterval(drawHands, 1000); |
168 |
},
|
169 |
zoom: function() { |
170 |
drawClock(); |
171 |
}
|
172 |
};
|
173 |
})();
|
174 |
CLOCK.init(); |
175 |
</script>
|
176 |
<a id="html5badge" href="http://www.w3.org/html/logo/"> |
177 |
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage"> |
178 |
</a>
|
179 |
<footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> |
180 |
</section>
|
181 |
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a> |
182 |
<script src="js/prettify.packed.js"></script> |
183 |
<script>
|
184 |
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
185 |
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); |
186 |
</script>
|
187 |
</body>
|
188 |
</html>
|
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):
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:
