forked from met/diveintohtml5
-
Notifications
You must be signed in to change notification settings - Fork 0
/
detect.html
704 lines (519 loc) · 54.5 KB
/
detect.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
<!DOCTYPE html>
<meta charset=utf-8>
<title>Detekujeme podporu 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>
body{counter-reset:h1 2}
</style>
<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<link rel=prefetch href=index.html>
<p>Navigace: <a href=index.html>Domů</a> <span class=u>‣</span> <a href=table-of-contents.html#detect>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1><br>Detekujeme podporu <abbr>HTML5</abbr></h1>
<p id=toc>
<p class=a>❧
<h2 id=divingin>Jdeme na to</h2>
<p class=f><img src=i/aoc-m.png alt=M width=109 height=105>ohli byste se ptát: „Jak můžu 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í (vlastností) HTML5, např. zda prohlížeč podporuje canvas, video nebo geolokaci.
<p class=a>❧
<h2 id=techniques>Techniky detekce</h2>
<p>Když prohlížeč vykresluje webovou stránku, vytvoří Document Object Model (<abbr><dfn>DOM</dfn></abbr>), což je kolekce objektů, které představují jednotlivé <abbr>HTML</abbr> prvky stránky. Každý prvek — každý <code><p></code>, každý <code><div></code>, každý <code><span></code> — je v <abbr>DOM</abbr>u zvláštním objektem. (Existujé také globální objekty, např. <code>window</code> a <code>document</code>, které se nevztahují k žádnému konkrétnímu prvku stránky.)
<p class=ss style="width:257px"><img src=i/openclipart.org_johnny_automatic_peeking_out_the_window.png width=257 height=436 alt="děvčátko, které se dívá z okna">
<p>Všechny objekty <abbr>DOM</abbr>u sdílí sadu společných vlastností, ovšem některé objekty mají některé vlastnosti navíc. V prohlížečích, které podporují vlastnosti <abbr>HTML5</abbr>, budou mít některé objekty unikátní vlastnosti. Rychlých pohledem na <abbr>DOM</abbr> tak zjistíme, které vlastnosti prohlížeč podporuje.
<p>Existují čtyři základní techniky detekující konkrétní vlastnost v tom kterém prohlížeči. Ukážeme si je od nejjednodušší po tu nejsložitější:
<ol>
<li>
<p>Ověřte, zda existuje jistá vlastnost globálního objektu (např. <code>window</code> nebo <code>navigator</code>).
<p>Příklad: <a href=#geolocation>test podpory geolokace</a>
<li>
<p>Vytvořte HTML prvek a ověřte, zda u něj existuje jistá vlastnost.
<p>Příklad: <a href=#canvas>text podpory canvasu</a>
<li>
<p>Vytvořte HTML prvek, ověřte, zda u něj existuje jistá metoda, zavolejte ji a zkontrolujte návratovou hodnotu.
<p>Příklad: <a href=#video-formats>test podporovaných formátů videa</a>
<li>
<p>Vytvořte HTML prvek, nastavte něj vlastnost na jistou hodnotu a pak zkontrolujte, zda si vlastnost tuto hodnotu uchovala.
<p>Příklad: <a href=#input-types>text podporovaných typů značky <code><input></code></a>
</ol>
<p class=a>❧
<h2 id=modernizr>Modernizr, knihovna pro detekci HTML5</h2>
<p><a href=http://www.modernizr.com/>Modernizr</a> je javascriptová open source knihovna (pod licencí <abbr>MIT</abbr>), která slouží k detekci řady vlastností <abbr>HTML5</abbr> <i class=baa>&</i> <abbr>CSS3</abbr>. Měli byste vždy používat její nejnovější verzi. Pokud ji chcete použít, přidejte následující prvek <code><script></code> na začátek vaší webové stránky.
<pre style="float:left"><code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<mark><script src="modernizr.min.js"></script></mark>
</head>
<body>
...
</body>
</html>
</code></pre>
<p class="legend right" style="margin-top:7em"><span class=arrow> ↜</span> Vložte do <head>
<p class=clear>Modernizr se spouští automaticky. Nemusíte proto volat žádnou metodu typu <code>modernizr_init()</code>. Jakmile se spustí, vytvoří globální objekt jmenující se <code>Modernizr</code>, který obsahuje sadu logických (Boolean) vlastností pro každou detekovanou vlastnost. Například, pokud váš prohlížeč podporuje <a href=canvas.html>canvas <abbr>API</abbr></a>, tak vlastnost <code>Modernizr.canvas</code> bude rovna <code>true</code>. Pokud váš prohlížeč canvas <abbr>API</abbr> nepodporuje, tak bude vlastnost <code>Modernizr.canvas</code> mít hodnotu <code>false</code>.
<pre><code>if (Modernizr.canvas) {
// něco honem nakreslíme!
} else {
// žádná podpora canvasu 8-(
}</code></pre>
<p class=a>❧
<h2 id=canvas>Canvas</h2>
<p class=ss style="width:300px"><img src=i/openclipart.org_johnny_automatic_fishing_boat.png width=300 height=203 alt="muž rybařící na loďce"><br><span id=live-canvas></span>
<p><abbr>HTML5</abbr> definuje <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html>prvek <canvas></a> jako „na rozlišení závislé plátno, které lze použít pro vykreslení grafů, herní grafiky nebo jiných obrázků <i>za běhu</i>.“ Prvek <dfn>canvas</dfn> vytvoří na vaší stránce obdélník, do kterého můžete JavaScriptem nakreslit, cokoliv si budete přát. <abbr>HTML5</abbr> definuje sadu funkcí („the canvas <abbr>API</abbr>“) pro kreslení tvarů, definování cest, tvorbu gradientů a používání transformací.
<p>Test podpory canvas <abbr>API</abbr> použivá <a href=#techniques>detekční techniku #2</a>. Pokud váš prohlížeč podporuje canvas <abbr>API</abbr>, pak objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><canvas></code> bude obsahovat <a href=canvas.html#shapes>metodu <code>getContext()</code></a>. Pokud váš pohlížeč canvas <abbr>API</abbr> nepodporuje, tak objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><canvas></code> bude mít pouze sadu běžných vlastností, ovšem žádnou z těch specifických pro canvas.
<pre><code>function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
</code></pre>
<p>Tato funkce nejprve vytvoří prázdný prvek <code><canvas></code>, který ovšem není přidán do vaší stránky, takže jej nikdy nikdo neuvidí. Je pouze vytovřený v paměti a plave si odnikud nikam jako loďka po líné řece.
<pre><code>return !!document.<mark>createElement('canvas')</mark>.getContext;</code></pre>
<p>Na vytvořeném prázdném prvku <code><canvas></code> otestujeme přítomnost metody <code>getContext()</code>. Tuto metodu najdeme pouze v prohlížečích podporujících canvas <abbr>API</abbr>.
<pre><code>return !!document.createElement('canvas').<mark>getContext</mark>;</code></pre>
<p>A konečně, použijeme fintu dvojí negace, abychom jako návratovou hodnotu funkce získali logickou hodnotu (<code>true</code> nebo <code>false</code>).
<pre><code>return <mark>!!</mark>document.createElement('canvas').getContext;</code></pre>
<p>Tato funkce ověří podporu velké části canvas <abbr>API</abbr>, což zahrnuje <a href=canvas.html#shapes>tvary</a>, <a href=canvas.html#paths>cesty</a>, <a href=canvas.html#gradients>gradienty <i class=baa>&</i> vzory</a>. Nedokáže detekovat knihovny třetích stran jako je knihovna <a href=canvas.html#ie><code>explorercanvas</code></a> implementující canvas <abbr>API</abbr> do Microsoft Internet Exploreru.
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a>, aby detekoval canvas <abbr>API</abbr> za vás.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestuj podporu canvasu
<pre><code>if (<mark>Modernizr.canvas</mark>) {
// něco honem nakreslíme!
} else {
// žádná podpora canvasu 8-(
}</code></pre>
<p>Nyní se podíváme na další test, který ověřuje podporu canvas text <abbr>API</abbr>.
<p class=a>❧
<h2 id=canvas-text>Text v canvasu</h2>
<p class=ss style="width:414px"><img src=i/openclipart.org_johnny_automatic_baseball_at_bat.png width=414 height=254 alt="baseballový hráč na pálce"><br><span id=live-canvas-text></span>
<p>I přestože váš prohlížeč podporuje <a href=#canvas>canvas <abbr>API</abbr></a>, nemusí ještě nutně podporovat <dfn>canvas text</dfn> <abbr>API</abbr>. Canvas <abbr>API</abbr> se totiž vyvíjelo a textové funkce byly přidány až později. Některé prohlížeče implementovaly canvas ještě před tím, než se objevilo text <abbr>API</abbr>.
<p>Test na canvas text <abbr>API</abbr> používá <a href=#techniques>detekční techniku #2</a>. Pokud váš prohlížeč podporuje canvas <abbr>API</abbr>, pak objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><canvas></code> bude obsahovat <a href=canvas.html#shapes>metodu <code>getContext()</code></a>. Pokud váš pohlížeč canvas <abbr>API</abbr> nepodporuje, tak objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><canvas></code> bude mít pouze sadu běžných vlastností, ovšem žádnou z těch specifických pro canvas.
<pre><code>function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}</code></pre>
<p>Tato funkce nejdřív <a href=#canvas>otestuje základní podporu canvasu</a> pomocí funkce <code>supports_canvas()</code>, kterou jste viděli v předchozí sekci. Pokud váš prohlížeč nepodporuje canvas <abbr>API</abbr>, pak zcela jistě nebude podporovat ani canvas text <abbr>API</abbr>.
<pre><code>if (<mark>!supports_canvas()</mark>) { return false; }</code></pre>
<p>Dále vytvoříme prázdný prvek <code><canvas></code> a získáme jeho kreslicí kontext. To musí fungovat, protože funkce <code>supports_canvas()</code> už otestovala existenci metody <code>getContext()</code> na objektech canvasu.
<pre><code> var dummy_canvas = document.createElement('canvas');
var context = <mark>dummy_canvas.getContext('2d')</mark>;</code></pre>
<p>Nakonec otestujeme, zda kreslicí kontext obsahuje funkci <code>fillText()</code>. Pokud ano, tak prohlížeč podporuje canvas text <abbr>API</abbr>. Hurá!
<pre><code> return <mark>typeof context.fillText == 'function'</mark>;</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a>, aby detekoval canvas text <abbr>API</abbr> za vás.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> zkusíme, zda canvas podporuje práci s textem
<pre><code>if (<mark>Modernizr.canvastext</mark>) {
// honem něco napíšeme!
} else {
// žádná podpora pro canvas text 8-(
}</code></pre>
<p class=a>❧
<h2 id=video>Video</h2>
<p><abbr>HTML5</abbr> definuje nový prvek <code><video></code> sloužící k vkládání videa do vašich webových stránek. Dříve bylo nemožné vložit na stránku video bez použití pluginů od třetích stran jako Apple QuickTime® nebo Adobe Flash®.
<p class=ss style="width:224px"><img src=i/openclipart.org_johnny_automatic_at_the_theater.png alt="diváci v divadle" width=224 height=334><br><span id=live-video></span>
<p>Prvek <code><video></code> byl navržen tak, aby byl použitelný bez jakéhokoliv detekčního skriptu. Můžete uvést několik video souborů a prohlížeče, které <abbr>HTML5</abbr> video podorují, si z nich vyberou, podle toho, jaké formáty podporují.
(Viz „A gentle introduction to video encoding“ <a href=http://diveintomark.org/archives/2008/12/18/give-part-1-container-formats>part 1: container formats</a> a <a href=http://diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs>part 2: lossy video codecs</a>, kde se dozvíte víc o rozličných formátech videa.)
<p>Prohlížeče, které nepodporují <abbr>HTML5</abbr> video, budou prvek <code><video></code> zcela ignorovat. Toho ovšem můžete využít a nabídnout jim místo toho k přehrání video pomocí pluginu. Kroc Camen sestavil řešení nazvané <a href=http://camendesign.com/code/video_for_everybody>Video for Everybody! (Video pro každého)</a>, které používá <abbr>HTML5</abbr> video tam, kde je to možné, a ve starších prohlížečích využije QuickTime nebo Flash. Krocovo řešení navíc nepoužívá žádný JavaScript a funguje teoreticky ve všech prohlížečích včetně mobilních.
<p>Pokud chcete s videem dělat víc, než ho jen umístit na stránku a přehrát, musíte už použít JavaScript. Test podpory videa využívá <a href=#techniques>detekční techniku #2</a>. Pokud váš prohlížeč podporuje <abbr>HTML5</abbr> video, tak objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><video></code> bude obsahovat metodu <code>canPlayType()</code>. Pokud váš prohlížeč nepodporuje <abbr>HTML5</abbr> video, tak objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><video></code> bude mít pouze sadu vlastností běžných pro všechny prvky HTML. Podporu videa můžete otestovat touto funkcí:
<pre><code>function supports_video() {
return !!document.createElement('video').canPlayType;
}</code></pre>
<p>Fukci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a>, aby detekoval podporu <abbr>HTML5</abbr> videa za vás.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> ověř podporu <abbr>HTML5</abbr> videa
<pre><code>if (<mark>Modernizr.video</mark>) {
// pusťme si nějaké video!
} else {
// nativní podpora videa není dostupná 8-(
// mohli bychom zkusit otestovat podporu QuickTime nebo Flashe
}</code></pre>
<p>V <a href=video.html>kapitole o videu</a> popíšu další řešení, které používá tyto detekční techniky pro konverzi elementů <code><video></code> na kód pro videopřehrávače postavené na Flashi, což využijí prohlížeče, které <abbr>HTML5</abbr> video nepodorují.
<p>Nyní se podíváme na test pro detekci formátů videa, které dokáže prohlížeč přehrát.
<p class=a>❧
<h2 id=video-formats>Formáty videa</h2>
<p>Formáty videa bychom mohli přirovnat k psaným jazykům. Noviny v češtině mohou sdělovat stejnou informaci jako španělské noviny, ovšem pokud umít číst pouze česky, tak vám k něčemu budou pouze ty první. Aby prohlížeč mohl přehrát video, musí rozumět „jazyku“, kterým je video napsáno.
<p class=ss style="float:left;margin:0 1.75em 1.75em 0;width:250px"><img src=i/openclipart.org_johnny_automatic_man_reading_newspaper.png alt="muž čtoucí noviny" width=250 height=261><br><span id=live-video-formats></span>
<p>Takový „jazyk“, ve kterém je video zapsáno, se nazývá “kodek“ — jedná se o algoritmus, podle kterého se video zakóduje do řady bitů. Existuje hromada kodeků, jenže který s nich máme použít? Skutečnost je smutná, prohlížeče se nedokázaly dohodnut na používání jednoho stejného kodeku. Ovšem, alespoň celou tu hromadu kodeků změnšily na pouhé dva. První kodek je placený (platí se licenční poplatky za patenty), ale funguje v <a href=http://www.apple.com/safari/>Safari</a> a na iPhone. (Funguje také ve Flashi, pokud použijete řešení typu <a href=http://camendesign.com/code/video_for_everybody>Video for Everybody!</a>.) Druhý kodek je zdarma a funguje v open source prohlžečích jako je <a href=http://code.google.com/chromium/>Chromium</a> a <a href=http://www.getfirefox.com/>Mozilla Firefox</a>.
<p>Test podpory formátů videa používá <a href=#techniques>detekční techniku #3</a>. Pokud váš prohlížeč podporuje <abbr>HTML5</abbr> video, tak objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><video></code> bude obsahovat metodu <code>canPlayType()</code>. Tato metoda vám řekne, zda prohlížeč podporuje konkrétní formát videa.
<p>Tato funkce otestuje patenty zatížený formát, který funguje na Macích a iPhonech.
<pre><code>function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}</code></pre>
<p>Funkce začíná <a href=#video>otestováním podporu <abbr>HTML5</abbr> videa</a> pomocí funkce <code>supports_video()</code>, kterou jste poznali v předchozí sekci. Pokud váš prohlížeč nepodporuje <abbr>HTML5</abbr> video, nebude také podporovat žádný formát videa.
<pre><code> if (<mark>!supports_video()</mark>) { return false; }</code></pre>
<p>Po té funkce vytvoří prázný prvek <code><video></code> (ovšem nevloží ho do stránky, takže nebude viditelný) a zavolá metodu <code>canPlayType()</code>. Ta musí existovat, protože to již ověřila funkce <code>supports_video()</code>.
<pre><code> var <mark>v</mark> = document.createElement("video");</code></pre>
<p>„Formát videa“ je ve skutečností kombinací několika věcí. Technicky řečeno se prohlížeče ptáte, zda dokáže přehrát video v H.264 a zvuk v AAC LC, obojí vložené v kontejneru. (Co to všechno znamená si vysvětlíme v <a href=video.html>kapitole o videu</a>. Může vás také zajímat článek <a href=http://diveintomark.org/tag/give>A gentle introduction to video encoding</a>.)
<pre><code> return v.canPlayType('<mark>video/mp4; codecs="avc1.42E01E, mp4a.40.2"</mark>');</code></pre>
<p>Funkce <code>canPlayType()</code> nevrací prosté <code>true</code> nebo <code>false</code>. Podle toho, o jak komplexní formáty videa se jedná, vrací funkce řetezce:
<ul>
<li><code>"probably"</code> pokud je prohlížeč opravdu přesvědčen, že může tento formát přehrát
<li><code>"maybe"</code> pokud si prohlížeč myslí, že možná může tento formát přehrát
<li><code>""</code> (prázdný řetězec) pokud si je prohlížeč jistý, že tento formát přehrát nemůže
</ul>
<p>Následující druhá funkce otestuje podporu otevřeného formátu videa, který podporuje Mozilla Firefox a další open source prohlížeče. Celý proces je stejný, s jediným rozdílem - v řetězci, který předáme funkci <code>canPlayType()</code>. Technicky řečeno se prohlížeče ptáte, zda dokáže přehrát video v Theora a zvuk ve Vorbis, to vše vložené do Ogg kontejneru.
<pre><code>function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType(<mark>'video/ogg; codecs="theora, vorbis"'</mark>);
}</code></pre>
<p>A konečně, <a href=http://www.webmproject.org/>WebM</a> je nový open source (a patenty nezatížený) kodek videa, který bude obsažen v dalších verzích hlavních prohlížečů včetně Chrome, <a href=http://nightly.mozilla.org/webm/>Firefoxu</a> a <a href=http://labs.opera.com/news/2010/05/19/>Opery</a>. Pro detekci podpory formátu videa WebM použijeme stejnou techniku.
<pre><code>function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType(<mark>'video/webm; codecs="vp8, vorbis"'</mark>);
}</code></pre>
<p>Funkce nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a> (1.5 nebo novější), aby detekoval jednotlivé formáty <abbr>HTML5</abbr> videa.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestuje podporované formáty <abbr>HTML5</abbr> videa
<pre><code>if (Modernizr.video) {
// pusťme si teď nějaké video! ale jaké?
if (<mark>Modernizr.video.webm</mark>) {
// zkusme WebM
} else if (<mark>Modernizr.video.ogg</mark>) {
// zkusme Ogg Theora + Vorbis v Ogg kontejneru
} else if (<mark>Modernizr.video.h264</mark>){
// zkusme H.264 video + AAC audio v MP4 kontejneru
}
}</code></pre>
<p class=a>❧
<h2 id=storage>Local Storage</h2>
<p class=ss style="width:135px"><img src=i/openclipart.org_johnny_automatic_half_stack_of_horizontal_sections.png alt="kabinet plný zásuvek rozličných rozměrů" width=135 height=341><br><span id=live-storage></span>
<p><a href=http://dev.w3.org/html5/webstorage/><abbr>HTML5</abbr> úložiště</a> nabízí způsob, jakým mohou webové stránky uložit informace na váš počítač a pozdeji je znovu načíst. Jedná se podobný koncept jako byly cookies, ovšem je navržený pro větší množství informací. Cookies mají omezenou velikost a váš prohlížeč je zasílá zpět na server kdykoliv požádá o novou stránku (což zabírá čas i datové pásmo). <abbr>HTML5</abbr> úložiště zůstává na vašem počítači, webové stránky k němu mohou přistoupit pomocí JavaScriptu.
<div class="pf clear">
<h4>Zeptejte se profesora Značky</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>OT: Je lokální úložiště skutečně součástí <abbr>HTML5</abbr>? Proč se nachází ve zvláštní specifikaci?<br>
OD: Stručně řečeno ano, lokální úložitě je součástí <abbr>HTML5</abbr>. Trochu delší odpověd je, že lokální úložiště bylo součástí hlavní specifikace <abbr>HTML5</abbr>, ale bylo odděleno do zvláštní specifikace, protože některým členům pracovní skupiny pro <abbr>HTML5</abbr> se nelíbilo, že je specifikace <abbr>HTML5</abbr> příliš dlouhá. Pokud vám to zní jako rozkrájení koláče na menší kousky ve snaze snížit počet jeho kalorií, pak ano - vítejte v šíleném světě standardů.
</blockquote>
</div>
</div>
<p>Test podpory <abbr>HTML5</abbr> úložiště využívá <a href=#techniques>detekční techniku #1</a>. Pokud váš prohlížeč podporuje <abbr>HTML5</abbr> úložiště, pak bude na globálním objektu <code>window</code> existovat vlastnost <code>localStorage</code>. Pokud váš prohlížeč nepodporuje <abbr>HTML5</abbr> úložiště, pak bude vlastnost <code>localStorage</code> nedefinovaná. Nepříjemná chyba ve starších verzích Firefoxu způsobuje, že tento test vyvolá výjimky, pokud je vypnutá podpora cookies, proto je nutné celý test vložit do bloku <code>try..catch</code>.
<pre><code>function supports_local_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch(e){
return false;
}
}</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a> (1.1 nebo novější), aby detekoval podporu lokálního úložiště <abbr>HTML5</abbr>.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestuj podporu lokálního úložiště <abbr>HTML5</abbr>
<pre><code>if (<mark>Modernizr.localstorage</mark>) {
// window.localStorage je dostupné!
} else {
// nativní podpora pro lokální úložiště neexistuje 8-(
// mohli bychom ještě zkusit Gears nebo jiné řešení od třetích stran
}</code></pre>
<p>Nezapomeňte, že JavaScript je case-sensitive. Vlastnost Modernizru se jmenuje <code>localstorage</code> (všechna písmena malá), ovšem vlastnost objektu <abbr>DOM</abbr> se jmenuje <code>window.localStorage</code>.
<div class="pf clear">
<h4>Zeptejte se profefora Značky</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>OT: Jak je moje <abbr>HTML5</abbr> úložiště zabezpečené? Může ho kdokoliv přečíst?<br>
OD: Kdokoliv, kdo má fyzický přístup k počítači by se mohl na data vašeho <abbr>HTML5</abbr> úložiště podívat (nebo je dokonce změnit). V prohlížeči může každá webová stránka číst a upravovat svá vlastní data, ovšem nemůže přistupovat k datům uloženým z jiných webů. Říká se tomu <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#origin-0>same-origin restriction (omezení dle původu)</a>.
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=workers>Web Workers</h2>
<p class=ss style="margin:1.75em"><span id=live-web-workers></span>
<p><a href=http://www.whatwg.org/specs/web-workers/current-work/>Web Workers</a> nabízí standardizovanou cestu, jakou mohou prohlížeče spouštět javascriptový kód na pozadí. S pomocí web workers můžete spustit několik „vláken“ a ty pak mohou běžet více méně ve stejném čase. (Stačí, když si představíte, že váš počítač dokáže současně spustit několik aplikací, je to skoro to samé.) Tato „vlákna na pozadí“ mohou provádět složité matematické výpočty a sítové požadavky nebo přistupovat k <a href=#local-storage>local storage</a> zatímco hlavní webová stránka reaguje na akce uživatele, ať už se jedná o skrolování, klikání nebo psaní.
<p>Test podpory web workers využívá <a href=#techniques>detekční techniku #1</a>. Pokud váš prohlížeč podporuje Web Worker <abbr>API</abbr>, bude u globálního objektu <code>window</code> existovat vlastnost <code>Worker</code>. Pokud váš prohlížeč nepodporuje Web Worker <abbr>API</abbr>, pak bude vlastnost <code>Worker</code> nedefinovaná.
<pre><code>function supports_web_workers() {
return !!window.Worker;
}</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a> (1.1 nebo novější), aby detekoval podporu web workers.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestuj podporu web workers
<pre><code>if (<mark>Modernizr.webworkers</mark>) {
// window.Worker je dostupné!
} else {
// chybí nativní podpora pro web workers 8-(
// můžeme vyzkoušet Gears nebo jiný plugin třetích stran
}</code></pre>
<p>Nezapomeňte, že JavaScript je case-sensitive. Vlastnost Modernizru se jmenuje <code>webworkers</code> (všechna písmena malá), ovšem vlastnost objektu <abbr>DOM</abbr> se jmenuje <code>window.Worker</code>.
<p class=a>❧
<h2 id=offline>Offline webové aplikace</h2>
<p class=ss style="width:257px"><img src=i/openclipart.org_johnny_automatic_cabin_along_stream.png alt="chata v lesích" width=257 height=242><br><span id=live-offline></span>
<p>Je snadné číst webové stránky, když jste offline: stačí se připojit k internetu, načíst webovou stránku, odpojit se od internetu, odjet na opuštěnou chatu a tam si vklidu stránku přečíst. (Abyste ušetřili čas, klidně přeskočte ten krok s chatou.) Ovšem, co webové aplikace jako jsou <a href=http://mail.google.com/>Gmail</a> nebo <a href=http://docs.google.com/>Dokumenty Google</a>? S <abbr>HTML5</abbr> může kdokoliv (nejen Google!) vytvářet aplikace, které fungují offline.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline>Offline webové aplikace</a> začínají jako online webové aplikace. Když prvně navštívíte aplikaci podporující režim offline, webový server řekne prohlížeči, které soubory bude potřebovat, aby mohl fungovat offline. Může se jednat o jakékoliv soubory — <abbr>HTML</abbr>, JavaScript, obrázky, dokonce <a href=#video>videa</a>. Jakmile váš prohlížeč stáhne všechny potřebné soubory, můžete stránku znovu navštívit, i když nejste připojeni k internetu. Váš prohlížeč si všimne, že jste právě offline a použije soubory, které si předtím stáhnul. Jakmile se opět připojíte online, všechny změny, které jste provedli, se nahrají na vzdálený webový server.
<p>Test na podporu pro offline používá <a href=#techniques>detekční techniku #1</a>. Pokud váš prohlížeč podporuje offline webové aplikace, bude u globálního objektu <code>window</code> existovat vlastnost <code>applicationCache</code>. Pokud váš prohlížeč offline webové aplikace nepodporuje, pak bude vlastnost <code>applicationCache</code> nedefinovaná. Podporu pro offline webové aplikace můžete otestovat následující funkcí:
<pre><code>function supports_offline() {
return !!window.applicationCache;
}</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a> (1.1 nebo novější), aby podporu detekoval.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestuj podporu pro offline webové aplikace
<pre><code>if (<mark>Modernizr.applicationcache</mark>) {
// window.applicationCache je dostupné!
} else {
// native podpora offline aplikací není dostupná 8-(
// můžeme vyzkoušet Gears nebo jiný plugin třetích stran
}</code></pre>
<p>Nezapomeňte, že JavaScript je case-sensitive. Vlastnost Modernizru se jmenuje <code>applicationcache</code> (všechna písmena malá), ovšem vlastnost objektu <abbr>DOM</abbr> se jmenuje <code>window.applicationCache</code>.
<p class=a>❧
<h2 id=geolocation>Geolokace</h2>
<p>Pomocí geolokace lze jistit, kde na světě se právě teď nacházíte a (volitelně) oznámit tuto informaci lidem, kterým důvěřujete. Existuje několik způsobů, jak je možné zjistit, kde se právě nacházíte — vaše <abbr>IP</abbr> adresa, vaše bezdrátové připojení k síti, přes které buňky telefonní sítě jste připojeni nebo vyhrazený <abbr>GPS</abbr> hardware, který spočítá vaši zeměpisnou šířku a délku na základě informací zaslaných satelity z oblohy.
<p style="margin:0 auto;width:194px" id=geo-wrapper><img src=i/openclipart.org_johnny_automatic_globe_man.png alt="muž s globusem místo hlavy" width=194 height=317><br><span id=live-geolocation></span>
<div class="pf clear">
<h4>Zeptejte se profesora Značky</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>OT: Je geolokace součástí <abbr>HTML5</abbr>? Proč o ní hovoříte?<br>
OD: Podpora pro geolokaci je do prohlížečů přidávána právě teď, ve stejnou dobu, kdy se do prohlížečů přidávají nové vlastnosti <abbr>HTML5</abbr>. Přesně řečeno, geolokace je standardizována <a href=http://www.w3.org/2008/geolocation/>pracovní skupinou pro geolokaci</a>, která je nezávislá na pracovní skupině pro <abbr>HTML5</abbr>. Ovšem já do této knížky geolokaci stejně zahrnu, protože se jedná o součást evoluce webu, ke které dochází právě teď.
</blockquote>
</div>
</div>
<p>Test podpory geolokace používá <a href=#techniques>detekční techniku #1</a>. Pokud váš prohlížeč podporuje geolocation <abbr>API</abbr>, bude u globálního objektu <code>navigator</code> existovat vlastnost <code>geolocation</code>. Pokud váš prohlížeč geolocation <abbr>API</abbr> nepodporuje, tak vlastnost <code>geolocation</code> bude nedefinovaná. Podívejme se, jak otestovat podporu geolokace:
<pre><code>function supports_geolocation() {
return !!navigator.geolocation;
}</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a>, který podporu geolocation <abbr>API</abbr> otestuje.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestuj podporu geolokace
<pre><code>if (<mark>Modernizr.geolocation</mark>) {
// tak a teď se podíváme, kde právě jsi!
} else {
// nativní podpora pro geolokace není dostupná 8-(
// můžeme vyzkoušet Gears nebo jiný plugin třetích stran
}</code></pre>
<p>Pokud váš prohlížeč geolocation <abbr>API</abbr> nativně nepodporuje, stále ještě zbývá naděje. <a href=http://tools.google.com/gears/>Gears</a> je open source plugin od Googlu, který funguje na Windows, Macu, Linuxu, Windows Mobile a Androidu. Nabízí některé vlastnosti starším prohlížečům, které nepodporují novinky zmiňované v této kapitole. Jednou z vlastností, které Gears nabízí, je geolocation <abbr>API</abbr>. Není zcela stejné jako <code>navigator.geolocation</code> <abbr>API</abbr>, ale slouží ke stejnému účelu.
<p>Existují také geolocation <abbr>API</abbr> specifiká pro jednotlivá zařízení, ta najdeme na starších mobilních platformách včetně <a href="http://www.tonybunce.com/2008/05/08/Blackberry-Browser-Amp-GPS.aspx">BlackBerry</a>, <a href="http://www.forum.nokia.com/infocenter/index.jsp?topic=/Web_Developers_Library/GUID-4DDE31C7-EC0D-4EEC-BC3A-A0B0351154F8.html">Nokia</a>, <a href="http://developer.palm.com/index.php?option=com_content&view=article&id=1673#GPS-getCurrentPosition">Palm</a>, a <a href=http://bondi.omtp.org/1.0/apis/geolocation.html><abbr title="Open Mobile Terminal Platform">OMTP</abbr> BONDI</a>.
<p><a href=geolocation.html>Kapitola o geolokaci</a> vás zasvětí do detailů toho, jak můžete tato odlišná <abbr>API</abbr> používat.
<p class=a>❧
<h2 id=input-types>Typy značky input</h2>
<p class=ss style="width:261px"><img src=i/openclipart.org_johnny_automatic_typewriter.png alt="psací stroj" width=261 height=228><br><span id=live-input-types></span>
<p>O webových formulářích jste již určitě slyšeli, že? Vytvoříte <code><form></code>, přidáte několik prvků <code><input type="text"></code>, možná i <code><input type="password"></code> a všechno ukončíte tlačítkem <code><input type="submit"></code>.
<p>Jenže to toho víte stěží polovinu. <abbr>HTML5</abbr> přidává přes tucet nových typů značky input, které můžete použít ve vašich formulářích.
<ol>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state><code><input type="search"></code></a> pro vyhledávací boxy
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#number-state><code><input type="number"></code></a> pro zadávání čísel
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#range-state><code><input type="range"></code></a> pro posuvníky
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#color-state><code><input type="color"></code></a> pro výběr barev
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state><code><input type="tel"></code></a> pro telefonní čísla
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state><code><input type="url"></code></a> pro webové adresy
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state><code><input type="email"></code></a> pro e-mailové adresy
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state><code><input type="date"></code></a> pro výběr data v kalendáři
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state><code><input type="month"></code></a> pro výběr měsíce
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#week-state><code><input type="week"></code></a> pro výběr týdne
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state><code><input type="time"></code></a> pro výběr času
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state><code><input type="datetime"></code></a> pro výběr přesného absolutního údaje datum + čas
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state><code><input type="datetime-local"></code></a> pro lokální datum a čas
</ol>
<p>Test podpory nových <abbr>HTML5</abbr> typů značky input používá <a href=#techniques>detekční techniku #4</a>. Napřed vytvoříme prádný prvek <code><input></code> v paměti. Výchozím tydem pro všechny prvky <code><input></code> je <code>"text"</code>. To se ukáže jako velmi důležité.
<pre><code> var i = document.createElement("input");</code></pre>
<p>Po té nastavíme atribut <code>type</code> námi vytvořeného prvku <code><input></code> na typ, který chceme detekovat.
<pre><code> i.setAttribute("type", "color");</code></pre>
<p>Pokud prohlížeč daný typ podporuje, pak bude vlastnost <code>type</code> mít hodnotu, kterou jsme jí zadali. Pokud prohlížeč daný typ nepodporuje, bude námi zadanou hodnotu ignorovat a vlastnost <code>type</code> bude stále <code>"text"</code>.
<pre><code> return i.type !== "text";</code></pre>
<p>Než abyste psali všech 13 funkcí sami, můžete použít <a href=#modernizr>Modernizr</a>, který detekci všech nových typů definovaných v <abbr>HTML5</abbr> provede za vás. Modernizr používá jeden jediný prvek <code><input></code>, aby efektivně otestoval podporu všech 13 typů. Následně vytvoří asociativní pole nazvané <code>Modernizr.inputtypes</code>, které obsahuje 13 klíčů (názvy jednotlivých <code>typů</code>) a 13 logických hodnot (<code>true</code> pokud typ prohlížeč podporuje, <code>false</code> když ne).
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestování podpory pro výběr data
<pre><code>if (<mark>!Modernizr.inputtypes.date</mark>) {
// chybí nativní podpora pro <input type="date"> 8-(
// můžete sami vytvořit pomocí <a href=http://docs.dojocampus.org/dojox/widget/Calendar>Dojo</a> nebo <a href=http://jqueryui.com/demos/datepicker/>jQueryUI</a>
}</code></pre>
<p class=a>❧
<h2 id=input-placeholder>Placeholder (textová nápověda)</h2>
<form style="float:right;margin:1.75em"><input placeholder="Váš prohlížeč podporuje placeholder" size=38></form>
<p>Vedle <a href=#input-types>nových typů značky input</a> přidává <abbr>HTML5</abbr> do formulářů několik menších vylepšení. Jedním z nich je možnost nastavit <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute>vlastnost placeholder pro pole input</a>. Tzv. placeholder slouží jako nápověda, jedná se o text, který se zobrazí uvnitř pole input v případě, že je pole prázdné a nemá fokus. Jakmile na pole kliknete (nebo se na ně přemístíte tabulátorem) placeholder zmizí. <a href=forms.html#placeholder>Kapitola o webových formulářích</a> obsahuje screenshoty, pokud si to nedokážete sami představit.
<p>Test podpory placeholderu využívá <a href=#techniques>detekční techniku #2</a>. Pokud váš prohlížeč podporuje placeholder v polích input, pak bude mít objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><input></code> vlastnost <code>placeholder</code> (a to i v případě, že jste v <abbr>HTML</abbr> žádný atribut <code>placeholder</code> neuvedli). Pokud váš prohlížeč placeholder nepodporuje, tak objekt <abbr>DOM</abbr> reprezentující prvek <code><input></code> nebude mít vlastnost <code>placeholder</code>.
<pre><code>function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a> (1.1 nebo novější), aby detekoval podoru placeholderu.
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> otestuj podporu placeholderu
<pre><code>if (<mark>Modernizr.input.placeholder</mark>) {
// váš placeholder by měl být už viditelný!
} else {
// žádná podpora pro placeholder 8-(
// spusťme fall back pomocí JavaScriptu
}</code></pre>
<p class=a>❧
<h2 id=input-autofocus>Autofocus formulářů</h2>
<p class=ss style="width:188px"><img src=i/openclipart.org_johnny_automatic_angry_guy.png alt="rozčilený chlap se zvednutýma rukama" width=188 height=262><br><span id="live-input-autofocus"></span>
<p>Webové stránky mohou používat JavaScript, aby automaticky předali fokus formulářovému poli. Např. titulní stránka <a href=http://www.google.cz/>Google.cz</a> automaticky předá fokus textovému poli, takže můžete rovnou začít psát váš dotaz aniž byste museli přemisťovat kurzor do vyhledávacího pole. Ačkoliv to většině uživatelů vyhovuje, může to rušit pokročilé uživatele nebo uživatele se specifickými potřebami. Pokud stisknete mezerník a očekáváte odstránkování webové stránky, stránka se neposune, protože fokus je již v textovém poli. (Místo toho prostě napíšete mezeru.) Pokud během načítání stránky vyberete odlišné fomulářové pole, skript stránky stejně ve „snaze pomoci“ přesune fokus na výchozí formulářové pole a vy tak můžete psát na místo, kam jste psát nechtěli.
<p>Jelikož se autofocus řeší JavaScriptem, není jednoduché vyřešit všechny zmíněné případy, a kdo by se zdržoval s uživateli, kteří nechtějí, aby jim webová stránka kradla fokus?
<p>Jako řešení představilo <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control>atribut <code>autofocus</code> pro formulářová pole</a>. Atribut <code>autofocus</code> dělá přesně to, co říká: přemístí fokus na zvolené vstupní pole. Jelikož je vše řešeno na úrovni značkovacího jazyka a nikoliv JavaScriptem, bude toto chování jednotné pro všechny webové stránky. Výrobci prohlížečů (nebo autoři rozšíření) mohou uživatelům nabídnout možnost autofocus vypnout.
<p>Test podporu autofokusy používá <a href=#techniques>detekční techniku #2</a>. Pokud váš prohlížeč podporuje autofokus webových formulářů, bude mít objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><input></code> vlastnost <code>autofocus</code> (a to i v případě, pokud jste do <abbr>HTML</abbr> atribut <code>autofocus</code> nezapsali). Pokud váš prohlížeč nepodporuje autofokus webových formulářů, objekt <abbr>DOM</abbr> reprezentující vytvořený prvek <code><input></code> nebude mít vlastnost <code>autofocus</code>. K detekci můžete použít tuto funkci:
<pre><code>function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a> (1.1 nebo novější).
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> test podpory autofokusu
<pre><code>if (<mark>Modernizr.input.autofocus</mark>) {
// autofokus funguje!
} else {
// chybí podpora pro autofocus 8-(
// zkusme javascriptové řešení
}</code></pre>
<p class=a>❧
<h2 id=microdata>Mikrodata</h2>
<p class=ss style="width:305px"><img src=i/openclipart.org_johnny_automatic_divider_cards.png alt="kartotéka podle abecedy" width=305 height=224><br><span id="live-microdata-api"></span>
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata>Mikrodata</a> je standardizovaný způsob pro vkládání další sémantiky do vašich webových stránek. Můžete např. použít mikrodata pro zdůraznění, že daná fotografie je dostupná pod danou Creative Commons licencí. Jak uvidíte v <a href=extensibility.html>kapitole o distributed extensibility</a>, můžete použít mikrodata k označkování stránky „O mně“. Prohlížeče, rozšíření prohlížečů a vyhledávače mohou zkonvertovat <abbr>HTML5</abbr> mikrodata na <a href=http://en.wikipedia.org/wiki/VCard>vCard</a>, což je standardizovaný formát pro sdílení kontaktů. Můžete také definovat své vlastní slovníky pro mikrodata.
<p>Standard pro <abbr>HTML5</abbr> mikrodata zahrnuje jak <abbr>HTML</abbr> značkování (zejména pro vyhledávače) tak sadu funkcí <abbr>DOM</abbr> (primárně pro prohlížeče). Použitím mikrodat na vašich webových stránkách nemůžete nic zkazit. Nejedná se o nic víc, než několik správně umístěných atributů; vyhledávače, které mikrodatům nerozumí, je budou prostě ignorovat. Ovšem, pokud potřebujete přistupovat a pracovat s mikrodaty skrze <abbr>DOM</abbr>, musíte napřed otestovat, zda prohlížeč podoruje microdata <abbr>DOM</abbr> <abbr>API</abbr>.
<p>Test podpory <abbr>HTML5</abbr> microdata <abbr>API</abbr> používá <a href=#techniques>detekční techniku #1</a>. Pokud váš prohlížeč podporuje <abbr>HTML5</abbr> microdata <abbr>API</abbr>, pak na globálním objektu <code>document</code> bude existovat funkce <code>getItems()</code>. Pokud váš prohlížeč microdata nepodporuje, pak bude funkce <code>getItems()</code> nedefinovaná.
<pre><code>function supports_microdata_api() {
return !!document.getItems;
}</code></pre>
<p>Modernizr zatím ještě neobsahuje detekci podpory pro microdata <abbr>API</abbr>, musíte proto použít funkci napsanou výše.
<p class=a>❧
<h2 id=history>History <abbr>API</abbr></h2>
<p class=ss style="float:left;margin:0 1.75em 1.75em 0;width:218px"><img src=i/openclipart.org_johnny_automatic_demon_reading_Stewart_Orr.png alt="démon čtoučí knížku" width=218 height=231><br><span id=live-history-api></span>
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html><abbr>HTML5</abbr> history <abbr>API</abbr></a> je standardizovaný způsob manipilace s historií prohlížeče pomocí skriptu. Část tohoto <abbr>API</abbr> — navigování historií — byla dostupná v předchozích verzích <abbr>HTML</abbr>. V <abbr>HTML5</abbr> přibyla možnost přidávat nové položky do historie prohlížeče a reagovat, pokud se tlačítkem back prohlížeče změní hladina zásobníku těchto položek- To znamená, že <abbr>URL</abbr> může i nadále sloužit jako jedinečný identifikátor daného zdroje, dokonce i pro komplikovanou javascriptovou aplikaci, která příliš často neprovádí načtení celé nové stránky.
<p>Test podpory <abbr>HTML5</abbr> history <abbr>API</abbr> využívá <a href=#techniques>detekční techniku #1</a>. Pokud váš prohlížeč podporuje <abbr>HTML5</abbr> history <abbr>API</abbr>, bude u globálního objektu <code>history</code> existovat funkce <code>pushState()</code>. Pokud váš prohlížeč nepodporuje history <abbr>API</abbr>, nebude funkce <code>pushState()</code> definovaná.
<pre><code>function supports_history_api() {
return !!(window.history && history.pushState);
}</code></pre>
<p>Funkci nemusíte psát sami, místo toho můžete použít <a href=#modernizr>Modernizr</a> (1.6 nebo novější).
<p class="legend top" style="padding-left:6em"><span class=arrow>↶</span> test podpory history <abbr>API</abbr>
<pre><code>if (<mark>Modernizr.history</mark>) {
// správa historie funguje!
} else {
// chybí podpora pro history API 8-(
// zkusme javascriptové řešení, např. <a href=https://github.com/balupton/History.js/>History.js</a>
}</code></pre>
<p class=a>❧
<h2 id=further-reading>Další čtení</h2>
<p>Specifikace a stnadardy:
<ul>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html>the <code><canvas></code> element</a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video>the <code><video></code> element</a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute><code><input></code> types</a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute>the <code><input placeholder></code> attribute</a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control>the <code><input autofocus></code> attribute</a>
<li><a href=http://dev.w3.org/html5/webstorage/><abbr>HTML5</abbr> storage</a>
<li><a href=http://www.whatwg.org/specs/web-workers/current-work/>Web Workers</a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline>Offline web applications</a>
<li><a href=http://www.w3.org/TR/geolocation-API/>Geolocation <abbr>API</abbr></a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html>Session history and navigation</a>
</ul>
<p>Javascriptové knihovny:
<ul>
<li><a href=http://www.modernizr.com/>Modernizr</a>, an <abbr>HTML5</abbr> detection library
<li><a href=http://code.google.com/p/geo-location-javascript/>geo.js</a>, a geolocation <abbr>API</abbr> wrapper
<li><a href=https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills><abbr>HTML5</abbr> Cross-browser Polyfills</a>
</ul>
<p>Dalšá články a návody:
<ul>
<li><a href=http://camendesign.com/code/video_for_everybody>Video for Everybody!</a>
<li><a href=http://diveintomark.org/tag/give>A gentle introduction to video encoding</a>
<li><a href=http://wiki.whatwg.org/wiki/Video_type_parameters>Video type parameters</a>
<li><a href=everything.html>The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything</a>
<li><a href=http://msdn.microsoft.com/en-us/ie/ff468705.aspx>Internet Explorer 9 Guide for Developers</a>
</ul>
<p class=a>❧
<p>Dočetli jste „Detekujeme podporu <abbr>HTML5</abbr>.“ Pro další čtení přejděte na <a href=table-of-contents.html>celý obsah knihy</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. This chapter is included in the paid edition.
<p>If you liked this chapter 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>
<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/modernizr.js></script>
<script src=j/gears_init.js></script>
<script src=j/geo.js></script>
<script src=j/dih5.js></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAArKygPSJECqoe3nBTUsQNyRTvLVXcqY7Szy8ilpe6LdIiNqza1BRpjssKFrYhkHtUr1vKcA5219YSyQ"></script>
<script>
function supports(bool, suffix) {
var s = "Your browser ";
if (bool) {
s += "supports " + suffix + ".";
} else {
s += "does not support " + suffix + ". :(";
}
return s;
}
function I_CAN_HAS(result) {
if (result == "probably") {
return "can play";
}
if (result == "maybe") {
return "isn't sure if it can play";
}
return "can't play";
}
function lookup_location() {
geo_position_js.getCurrentPosition(show_map, show_map_error);
}
function show_map(loc) {
$("#geo-wrapper").css({'width':'320px','height':'350px'});
var map = new GMap2(document.getElementById("geo-wrapper"));
var center = new GLatLng(loc.coords.latitude,loc.coords.longitude);
map.setCenter(center, 14);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(new GMarker(center, {draggable: false, title: "You are here (more or less)"}));
}
function show_map_error() {
$("#live-geolocation").html('Unable to determine your location.');
}
$(function() {
$("#live-canvas").html(supports(Modernizr.canvas, "the canvas API"));
$("#live-canvas-text").html(supports(Modernizr.canvastext, "the canvas text API"));
$("#live-video").html(supports(Modernizr.video, "HTML5 video"));
if (Modernizr.video) {
var ogg = Modernizr.video.ogg;
var h264 = Modernizr.video.h264;
var webm = Modernizr.video.webm;
var vf = "Your browser ";
if ((ogg == "probably") && (h264 == "probably")) {
vf += "can play both Ogg Theora and H.264";
} else if (((ogg == "") || (ogg == "no")) && (h264 == "probably")) {
vf += "can play H.264 video, but not Ogg Theora";
} else if (((h264 == "") || (h264 == "no")) && (ogg == "probably")) {
vf += "can play Ogg Theora video, but not H.264";
} else {
vf += I_CAN_HAS(ogg) + " Ogg Theora video. Your browser " + I_CAN_HAS(h264) + " H.264";
}
vf += " video.";
if (webm) {
vf += " Hey, you can play WebM video, too!";
}
$("#live-video-formats").html(vf);
} else {
$("#live-video-formats").html(supports(Modernizr.video, "any video formats"));
}
var localstorage = false;
try {
localstorage = Modernizr.localstorage;
} catch(e) {}
$("#live-storage").html(supports(localstorage, "HTML5 storage"));
$("#live-web-workers").html(supports(Modernizr.webworkers, "web workers"));
$("#live-offline").html(supports(Modernizr.applicationcache, "offline web applications"));
if (geo_position_js.init()) {
$("#live-geolocation").html(supports(true, "geolocation") + ' <a href="#" onclick="lookup_location();return false">Click to look up your location</a>.');
} else {
$("#live-geolocation").html(supports(false, "geolocation"));
}
var supported_input_types = '';
for (var itype in Modernizr.inputtypes) {
if (Modernizr.inputtypes[itype]) {
supported_input_types += '<code>' + itype + '</code>, ';
}
}
if (!!supported_input_types) {
$("#live-input-types").html('Your browser supports the following HTML5 input types: ' + supported_input_types.replace(/, $/, ''));
} else {
$("#live-input-types").html('Your browser does not support any HTML5 input types.');
}
$("#live-input-autofocus").html(supports(!!("autofocus" in document.createElement("input")), "form autofocus"));
$("#live-microdata-api").html(supports(!!document.getItems, "the HTML5 microdata API"));
$("#live-history-api").html(supports(!!Modernizr.history, "the HTML5 history API"));
});
</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>