forked from met/diveintohtml5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
introduction.html
99 lines (68 loc) · 9.75 KB
/
introduction.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<meta charset=utf-8>
<title>Pět věcí, které byste měli vědět o HTML5 - Dive Into HTML5</title>
<!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
<link rel=alternate type=application/atom+xml href=https://github.com/diveintomark/diveintohtml5/commits/master.atom>
<link rel=stylesheet href=screen.css>
<style>
h1:before{content:"Úvod:"}
h2{text-align:left;text-transform:inherit}
</style>
<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<link rel=prefetch href=past.html>
<p>Navigace: <a href=index.html>Domů</a> <span class=u>‣</span> <a href=table-of-contents.html#introduction>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1>Pět věcí, které byste měli vědět o HTML5</h1>
<p id=toc>
<p class=a>❧
<h2 id=one>1. HTML5 se skládá z celé řady částí</h2>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src=i/video.png alt="[maketa přehrávače videa]" width=226 height=166>
<p>Mohli byste se ptát: „Jak mohu začít používat <abbr>HTML5</abbr>, když ho starší prohlížeče nepodporují?“ Ale byla by to zavádějící otázka. <abbr>HTML5</abbr> se skládá z celé řady částí. Nemůžete proto detekovat, zda prohlížeč „podporuje <abbr>HTML5</abbr>“, protože by to nedávalo žádný smysl. Ovšem <em>můžete</em> detekovat podporu jednotlivých částí HTML5, např. zda prohlížeč podporuje canvas, video nebo geolokaci.
<p>Pod <abbr>HTML</abbr> si můžete představit jednotlivé značky a lomené závorky. To je ta hlavní část, ovšem zdaleka se nejedná o celé HTML. Specifikace <abbr>HTML5</abbr> dále určuje, jak mají tyto lomené závorky spolupracovat s JavaScriptem skrze Document Object Model (<abbr>DOM</abbr>). <abbr>HTML5</abbr> nedefinuje pouze značku <code><video></code>, ale také příslušející <abbr>DOM</abbr> <abbr>API</abbr> pro objekt video v <abbr>DOM</abbr>. Toto <abbr>API</abbr> můžete využít k detekci podporovaných formátů videa, ke spuštění nebo zastavení videa, ke ztišení zvukové stopy, ke sledování, jak velká část videa byla již stažena, zkrátka všechno, co potřebujete, abyste značce <code><video></code> mohli přidat patřičnou user experience.
<p><a href=detect.html>Kapitola 2</a> a <a href=everything.html>příloha A</a> vás naučí, jak správně detekovat podporu jednotlivých novinek <abbr>HTML5</abbr>.
<h2 id=two>2. Nemusíte nic zahazovat</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src=i/forms.png alt="[ukázka formulářových prvků]" width=134 height=196>
<p>Ať se vám to líbí nebo ne, nemůžete popřít, že <abbr>HTML</abbr> 4 je nejúspšnějším značkovacím formátem v historii. <abbr>HTML5</abbr> na jeho úspěchu staví. Nemusíte zahazovat kód, který už máte napsaný. Nemusíte se znovu učit, co jste se už jednou naučili. Pokud vaše webová aplikace včera fungovala jako <abbr>HTML</abbr> 4, bude dnes stále fungovat jako <abbr>HTML5</abbr>. Tečka.
<p>Chcete-li vaše webové aplikace <em>vylepšit</em>, tak jste na správném místě. Uveďme si konkrétní příklad: <abbr>HTML5</abbr> podporuje všechny formulářové prvky z <abbr>HTML</abbr> 4, k nim přidává několik dalších. Jedná se o poměrně dlouho žádané prvky jako například posuvníky nebo prvky pro výběr data, vedle nich ale najdeme i prostě jen o něco málo chytřejší formulářové prvky. Takový formulářový prvek input typu <code>email</code> vypadá jako obyčejné textové pole, ovšem mobilní prohlížeče automaticku přizpůsobí klávesnici, aby usnadnily zadávání emailových adres. Starší prohlížeče, které formulářový prvek typu <code>email</code> nepodporují, s ním budou pracovat jako s obyčejným textovým vstupním prvkem a formulář tak tak bude fungovat, aniž bychom museli měnit kód nebo použít JavaScript. To znamená, že vaše formuláře můžete začít upravovat <em>už dnes</em>, a to i v případě, že něktěří vaši návštěvíci stále ještě používají IE 6.
<p>O <abbr>HTML5</abbr> formulářích se vše podstatné dozvíte v <a href=forms.html>kapitole 9</a>.
<h2 id=three>3. Začátek je lehký</h2>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src=i/markup-with-arrow.png alt="[ukázka HTML kódu]" width=234 height=202>
<p>„Upgrade“ na <abbr>HTML5</abbr> může být tak snadný, jak snadno dokážete změnit <i>doctype</i> vaší stránky. Doctype byste již meli mít na prvním řádku každé stránky v <abbr>HTML</abbr>. Předchozí verze <abbr>HTML</abbr> definovaly řadu různých variant doctype a vybrat z nich ten správný nebylo vždy tak úplně snadné. V <abbr>HTML5</abbr> najdete jen jeden doctype:
<blockquote>
<p><code><!DOCTYPE html></code>
</blockquote>
<p>Upgradem na <abbr>HTML5</abbr> doctype nerozbijete váš existující kód, protože značky, které byly definovány v HTML 4, jsou stále podporované v <abbr>HTML5</abbr>. Ovšem pak už můžete začít používat nové — validní — sémantické prvky jako jsou <code><article></code>, <code><section></code>, <code><header></code> a <code><footer></code>. Více se o těchto prvcích dozvíte v <a href=semantics.html>kapitole 3</a>.
<h2 id=four>4. A opravdu to už funguje</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src=i/rel-email.png alt="[formulářové pole s klávesnicí na obrazovce mobilního zařízení]" width=227 height=192>
<p>Ať už chcete něco vykreslit do canvasu, přehrávat video, vytvářet lepší formuláře nebo aplikace, které fungují i když jste offline, zjistíte, že <abbr>HTML5</abbr> už dobře podporované. Firefox, Safari, Chrome, Opera a mobilní prohlížeče již podporují canvas (<a href=canvas.html>kapitola 4</a>), video (<a href=video.html>kapitola 5</a>), geolokaci (<a href=geolocation.html>kapitola 6</a>), local storage (<a href=storage.html>kapitola 7</a>) a mnohem více. Google již podporuje anotaci pomocí mikrodat (<a href=extensibility.html>kapitola 10</a>). Dokonce Microsoft — známý tím, že zřídka brázdí cestu standardů — bude podporovat většinu <abbr>HTML5</abbr> vlastností v Internet Exploreru 9.@todo podporuje
<p style="float:right;margin:0 0 1.75em 1.75em"><img src=i/gears.png alt="[Ozubené kolečko volající "Můžu vám pomoct"]" width=125 height=75>
<p>Každá kapitola této knihy obsahuje známé přehledy kompatibilit prohlížečů. Ovšem, co je důležitější, každá kapitola obsahuje také přehled vašich možností, pokud potřebujete podporovat i starší prohlížeče. Vlastnosti <abbr>HTML5</abbr> jako geolokace (<a href=geolocation.html>kapitola 6</a>) a video (<a href=video.html>kapitola 5</a>) se nejprve objevily v prohlížečů jako pluginy Gears nebo Flash. Jiné vlastnosti, např. canvas (<a href=canvas.html>kapitola 4</a>) mohou být kompletně emulované JavaScriptem. Tato kniha vás naučí využívat vlastnosti moderních prohlížečů aniž byste museli zanevřít na prohlížeče staré.
<h2 id=five>5. Zůstane tu napořád</h2>
<p>Tim Berners-Lee vymyslel World Wide Web začátkem devadesátých let 20. století. Později založil <abbr>W3C</abbr>, aby se staralo o webové standardy, což tato organizace činí již více než 15 let. Tohle <abbr>W3C</abbr> muselo v červenci 2009 k budoucnosti webových standardů oznámit:
<blockquote cite=http://www.w3.org/News/2009#item119>
<p>Dnes ředitel oznámil, že plán pracovní skupiny pro <abbr>XHTML</abbr> 2 vyprší koncem roku 2009, jak bylo předběžně určeno, a již nebude dále prodloužen. Tímto, a také zvýšením zdrojů pracovní skupiny pro <abbr>HTML</abbr>, <abbr>W3C</abbr> doufá, že urychlí proces vývoje <abbr>HTML5</abbr> a ujasní postoj <abbr>W3C</abbr> k budoucnosti <abbr>HTML</abbr>.
</blockquote>
<p><abbr>HTML5</abbr> tu je a zůstane tu napořád. <a href=past.html>Jdeme na to</a>.
<p class=a>❧
<div class=pf>
<h4>Did You Know?</h4>
<div class=moneybags>
<blockquote><p>In association with Google Press, O’Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and <abbr>DRM</abbr>-free <abbr>PDF</abbr>. The paid edition is called „HTML5: Up & Running,“ and it is available now.
<p>If you liked this introduction and want to show your appreciation, you can <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">buy „HTML5: Up & Running“ with this affiliate link</a> or <a href=http://oreilly.com/catalog/9780596806033>buy an electronic edition directly from O’Reilly</a>. You’ll get a book, and I’ll get a buck. I do not currently accept direct donations.
</blockquote>
</div>
</div>
<p class=c>Copyright MMIX–MMXI <a href=about.html>Mark Pilgrim</a>, Czech translation <a href="http://labs.met.cz/">Martin Hassman</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=013556084273090989037:f1s-wnbz68q><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google™"> <input type=submit name=sa value=Hledat></div></form>
<script src=j/jquery.js></script>
<script src=j/dih5.js></script>
<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25728182-1']);
_gaq.push(['_setDomainName', '.html5.cz']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// --></script>