Obsah O autorech Tiffany B. Brown Kerry Butters Sandeep Panda
Úvod
11 11 11 11
13
Komu je tato kniha určena Použité konvence
14 14
Ukázky zdrojového kódu Tipy, poznámky a varování
14 15
Nezbytné nástroje Zpětná vazba od čtenářů Zdrojové kódy ke knize Errata
15 16 17 17
KAPITOLA 1
Co je HTML5?
19
Stručná historie jazyka HTML5
19
Počátky jazyka HTML Výlet do světa jazyka XHTML Bitva o světovou DOMinanci Applety a zásuvné moduly
20 20 21 22
Co HTML5 není Pár slov o specifikaci HTML5
22 23
KAPITOLA 2
Základy: Anatomie HTML5 Náš první dokument HTML5 Dva režimy syntaxe jazyka HTML5 Syntaxe jazyka HTML Uvozovky okolo hodnot atributů v jazyce HTML5 Osekaný dokument HTML5 „XHTML5“: syntaxe ve stylu jazyka XML
25 25 27 27 29 29 30
KAPITOLA 3
Základy: Strukturování dokumentů Element article Skládáme kousky dohromady
33 35 38
3
K2165.indd 3
1.7.2014 10:47:31
Obsah
Element section
40
Element div vs section
42
Další elementy dokumentu
42
Elementy figure a figcaption Element main
42 43
KAPITOLA 4
Základy: Formuláře Zakládáme formulář v jazyce HTML5 Element input Sběr jmen Popisky polí
Povinná formulářová pole Měníme vzhled povinných polí E-mailové adresy, telefonní čísla a adresy URL
47 48 48 49 49
49 50 50
Nahrávání souborů na server Element datalist
54 55
Další typy vstupních polí Datum a čas
56 59
KAPITOLA 5
Základy: Multimédia, audio a video Přidáváme ovládací prvky Automatické přehrávání a opakování Atributy jen pro video Zástupný obrázek Nastavení rozměrů videa
Spotřeba šířky pásma a reakce přehrávání Audio a video napříč prohlížeči Více audio a videosouborů
61 61 63 64 64 64
65 66 67
KAPITOLA 6
Multimédia: Příprava obsahu Představení kodeků Současný stav
Převod souborů pomocí programu Miro Video Converter Převod souborů pomocí nástroje FFmpeg Změna rozměrů videa Generujeme poutač
Používáme hostované služby Kvalita versus velikost souboru
69 69 70
71 73 74 75
75 76
KAPITOLA 7
Multimédia: Audio v jazyce HTML5 Element audio
77 77
4
K2165.indd 4
1.7.2014 10:47:31
Obsah
Atribut autoplay Opakované přehrávání Ztlumení zvuku Vyrovnávací paměť a atribut preload preload=“auto“ preload=“none“ preload=“metadata“
Alternativní obsah
78 79 79 79 80 80 81
81
KAPITOLA 8
Multimédia: Video v jazyce HTML5 Nastavujeme rozměry videa
83 84
Procentuální výška Konfigurace poutače
86 87
Co jsme se dosud naučili
88
KAPITOLA 9
Multimédia: Element source
91
Element source Uvádíme formát atributem type
91 92
Řešíme problémy s multimédii
Responzivní video s atributem media Nabízíme videa s různými poměry stran
Co jsme se dosud naučili
92
93 93
94
KAPITOLA 10
Multimédia: Element track Stav podpory elementu track Legendy, titulky a element audio
Přidáváme element track Definujeme titulky, legendy a metadata Více elementů track
Jazyk textové stopy Označování stop Tvorba textových stop ve formátu WebVTT Co je WebVTT Vytváříme jednoduchý soubor WebVTT Značky v popiscích Měníme vzhled titulků a legend pomocí pseudoelementu ::cue
Co jsme se naučili
95 96 96
97 97 98
99 100 101 102 102 103 104
107
KAPITOLA 11
Multimédia: Programujeme přehrávače Skriptování DOM řízené událostmi: Úvod Krok 1: Tvorba dokumentu HTML
109 110 111
5
K2165.indd 5
1.7.2014 10:47:31
Obsah
Krok 2: Získání objektu videa Krok 3: Přehrávání a pozastavování videa Krok 4: Určení doby trvání Krok 5: Ukazujeme uplynulý čas Krok 6: Přetáčení vstupním polem typu range Krok 7: Úprava hlasitosti Spotřeba šířky pásma a změna atributu preload Shrnutí
113 113 114 115 116 117 118 119
KAPITOLA 12
Canvas & SVG: Úvod do elementu canvas K čemu lze použít element canvas Než začneme Plátno vypadá složitě, tak proč nepoužít Flash? A co technologie WebGL?
121 121 122 122 123
KAPITOLA 13
Canvas & SVG: Základy práce s plátnem
125
Šablona plátna v jazyce HTML5 Kreslíme jednoduchý tvar na plátno Souřadnice a cesty Kreslení kruhů a kružnic Kreslíme text Kreslení trojúhelníku Změna velikosti plátna
125 126 127 128 129 130 130
Změna velikosti v JavaScriptu Změna velikosti v jazyce CSS Transformace CSS z jazyka JavaScript
131 131 131
KAPITOLA 14
Canvas & SVG: Prohlížeče bez podpory Tvorba alternativního obsahu
133 133
KAPITOLA 15
Canvas & SVG: Barevné přechody Kruhové přechody Hrajeme si s barevnými zarážkami
135 137 137
KAPITOLA 16
Canvas & SVG: Obrázky a videa na plátně Obrázky Objekt typu Image
Video
139 139 140
140
6
K2165.indd 6
1.7.2014 10:47:31
Obsah
KAPITOLA 17
Canvas & SVG: Úvod do jazyka SVG Proč používat formát SVG místo formátů JPEG, PNG a GIF? Začínáme Další tvary
Barevné přechody a vzory Vzory
143 144 144 145
147 148
KAPITOLA 18
Canvas & SVG: Uplatnění jazyka SVG Vkládání obrázků SVG do stránek Kterou metodu zvolit Nástroje a knihovny pro práci s obrázky SVG
151 151 151 153
KAPITOLA 19
Canvas & SVG: Beziérovy křivky jazyka SVG Kvadratická Beziérova křivka Kubická Beziérova křivka
155 155 157
KAPITOLA 20
Canvas & SVG: Efekty filtrů Používáme filtry Hrátky s filtry
161 162 162
KAPITOLA 21
Canvas & SVG: Canvas nebo SVG? Jazyky pro tvorbu obrázků Typické případy užití
167 167 168
KAPITOLA 22
Offline aplikace: Detekujeme, že uživatel není připojen Určujeme, zda je uživatel online Naslouchání změnám stavu připojení Události online a offline v prohlížeči Internet Explorer 8
Omezení vlastnosti navigator.onLine Ověřujeme připojení k Internetu pomocí objektu XMLHttpRequest Co jsme se naučili
169 169 170 171
171 172 174
KAPITOLA 23
Offline aplikace: Mezipaměť aplikace Syntaxe manifestu mezipaměti Ukládání souborů lokálně s nadpisem CACHE: Vynucení síťového požadavku s NETWORK:
175 175 176 177
7
K2165.indd 7
1.7.2014 10:47:31
Obsah
Alternativní obsah pro nedostupné adresy URL Konfigurace
Vložení manifestu mezipaměti do dokumentu HTML Předávání manifestu mezipaměti Vyhýbáme se problémům s mezipamětí aplikace Řešení problému: Načítání neuložených prostředků z uloženého dokumentu Řešení problému 2: Aktualizace mezipaměti Řešení problému 3: Rozbij jeden soubor, rozbij všechny
Testujeme podporu mezipaměti aplikace Rozhraní API pro práci s mezipamětí aplikace Sekvence událostí mezipaměti aplikace Tvorba manifestu mezipaměti Tvorba stránky HTML Tvorba šablony stylů a skriptu
177 178
178 179 179 179 179 180
180 180 181 182 182 183
KAPITOLA 24
Offline aplikace: Lokální úložiště Proč používat lokální úložiště namísto cookies Podpora v prohlížečích Zkoumáme lokální úložiště
Detekce podpory lokálního úložiště Vytváříme webovou stránku Ukládání hodnot metodou localStorage.setItem() Přidáváme posluchač události Úprava stávajících hodnot metodou localStorage.setItem()
Načítání hodnot metodou localStorage.getItem() Alternativní syntaxe pro nastavování a načítání položek
Procházení položek úložiště v cyklu Vyprázdnění lokálního úložiště metodou localStorage.clear() Události úložiště Naslouchání událostem úložiště Objekt typu StorageEvent Události úložiště napříč prohlížeči Určujeme, která metoda způsobila událost storage
Ukládání polí a objektů Omezení lokálního úložiště
185 186 186 187
187 188 189 190 190
191 192
192 194 194 194 194 195 195
196 198
KAPITOLA 25
Offline aplikace: Ukládání dat do klientských databází Aktuální stav klientských databází O databázi IndexedDB Tvorba dokumentu HTML Vytváříme databázi Přidáváme úložiště objektů Vkládáme záznamy
199 199 200 202 203 204 206
8
K2165.indd 8
1.7.2014 10:47:31
Obsah
Načítání a procházení záznamů Tvorba transakce s kurzorem Načítání podmnožiny záznamů
Načítání a mazání konkrétního záznamu Aktualizujeme záznam Odstranění databáze Shrnutí a další zdroje
207 208 209
209 210 210 211
KAPITOLA 26
API: Přehled
213
Rychlá procházka rozhraními API Co se naučíte Začínáme
213 214 214
Kontrola kompatibility prohlížečů Modernizr Vývojové prostředí
215 216 216
KAPITOLA 27
API: Web Workers Úvod Předávání dat ve formátu JSON Funkce dostupné pro pracovníky
Pokročilejší pracovníci Vložení pracovníci Tvorba dílčích pracovníků uvnitř pracovníků Vkládání externích skriptů do pracovníků
Bezpečnostní opatření Polyfilly pro straší prohlížeče Závěr
217 217 219 220
221 221 222 222
223 224 224
KAPITOLA 28
API: Geolocation Začínáme Průběžné sledování pozice Přesnost rozhraní Geolocation Závěr
225 225 227 228 229
KAPITOLA 29
API: Server Sent Events Účel rozhraní SSE Používáme rozhraní SSE Formát event-stream A co formát JSON? Připojení identifikátoru události Vytváříme vlastní události
231 231 232 233 233 234 234 9
K2165.indd 9
1.7.2014 10:47:31
Obsah
Prodleva mezi opětovným připojením Uzavření spojení Ukázkový zdroj událostí Ladění Závěr
235 235 235 236 237
KAPITOLA 30
API: Websocket API Rozhraní API pro jazyk JavaScript Odesíláme binární data Server WebSocket Závěr
239 239 241 242 242
KAPITOLA 31
API: Cross-document Messaging
245
Rozhraní API pro jazyk JavaScript Základní příklad užití Ověření připravenosti dokumentu Závěr
245 246 250 250
Rejstřík
251
10
K2165.indd 10
1.7.2014 10:47:31
