HTML5 – Leitfaden für Webentwickler

HTML5 – Leitfaden für Webentwickler......Page 1
Übersicht......Page 6
3 Intelligente Formulare......Page 8
4 Video und Audio......Page 9
5 Canvas......Page 10
8 Web Storage und Offline-Webapplikationen......Page 11
Index......Page 12
Vorwort......Page 14
1.1 Wie alles begann …......Page 16
1.2 Zeitreise zu Originalschauplätzen......Page 23
1.3 In medias res......Page 24
1.3.1 Was gibt es Neues?......Page 25
1.3.2 Was ist veraltet?......Page 29
1.3.3 … und was ist mit XHTML?......Page 32
1.4 Kann ich HTML5 jetzt schon verwenden?......Page 33
2 Struktur & Semantik für Dokumente......Page 36
2.1 Kopfzeile mit »header« und »hgroup«......Page 38
2.2 Inhalt mit »article«......Page 40
2.3 Fußzeile mit »footer« und »nav«......Page 41
2.4 Randspalte mit »aside« und »section«......Page 42
2.5 Der Outline-Algorithmus......Page 44
2.6 Abbildungen mit »figure« und »figcaption«......Page 45
2.7 Semantik auf Textebene – weitere neue Tags......Page 46
2.7.1 Die Elemente »ruby«, »rt« und »rp«......Page 47
2.7.2 Das Element »time«......Page 48
2.7.4 Das Element »wbr«......Page 49
2.7.5 Elemente mit marginalen Änderungen......Page 50
3 Intelligente Formulare......Page 54
3.1 Neue Input-Typen......Page 55
3.1.1 Die Input-Typen »tel« und »search«......Page 56
3.1.3 Datum und Uhrzeit mit »datetime«, »date«, »month«, »week«, »time« und »datetime-local«......Page 57
3.1.4 Die Input-Typen »number« und »range«......Page 58
3.1.6 Die neuen Input-Typen im Einsatz......Page 59
3.2.1 Fokussieren mit »autofocus«......Page 61
3.2.2 Platzhalter-Text mit »placeholder«......Page 62
3.2.4 Noch mehr neue Attribute für das »input«-­Element......Page 63
3.3.1 Anzeigen von Messgrößen mit »meter«......Page 66
3.3.2 Fortschrittsanzeige mit »progress«......Page 69
3.3.3 Auswahllisten mit »datalist«......Page 70
3.3.4 Kryptografische Schlüssel mit »keygen«......Page 72
3.3.5 Berechnungen mit »output«......Page 75
3.4 Clientseitige Formular-Überprüfung......Page 77
3.4.2 Die »checkValidity«-Funktion......Page 79
3.4.3 Fehlerbehandlung mit »setCustomValidity()«......Page 82
3.4.4 Zusammenfassung der Gültigkeitsprüfungen......Page 83
3.5 Beispiel: Ein Support-Formular......Page 84
4 Video und Audio......Page 92
4.1 Ein erstes Beispiel......Page 93
4.2 Das »video«-Element und seine Attribute......Page 94
4.3 Video-Codecs......Page 96
4.3.1 Ogg: Theora und Vorbis......Page 98
4.3.3 WebM: VP8 und Vorbis......Page 99
4.4.1 ffmpeg......Page 100
4.4.2 vlc......Page 102
4.4.3 Firefogg......Page 103
4.4.4 Miro Video Converter......Page 105
4.5 Welches Format für welchen Browser?......Page 106
4.6.1 mwEmbed......Page 107
4.6.2 html5media......Page 109
4.7 Video und Scripting – ein einfacher ­Video-Player......Page 111
4.7.1 Einbau des Videos......Page 112
4.7.2 Das Starten und Stoppen des Videos......Page 114
4.7.3 Das Anzeigen und Setzen der Wiedergabeposition......Page 115
4.7.4 Schnellsuchlauf vor und zurück......Page 117
4.7.6 Laut, leise und stumm schalten......Page 119
4.7.7 Weitere Attribute und Methoden des »HTMLMediaElement«-Interfaces......Page 121
4.7.8 Die lange Liste der »MediaEvents«......Page 124
4.8 Und was ist mit Audio?......Page 125
5 Canvas......Page 132
5.1 Ein erstes Beispiel......Page 133
5.2 Rechtecke......Page 136
5.3 Farben und Schatten......Page 138
5.4 Farbverläufe......Page 140
5.5 Pfade......Page 142
5.5.2 Bézierkurven......Page 144
5.5.3 Kreisbögen......Page 146
5.5.4 Rechtecke......Page 150
5.5.5 Umrisse, Füllungen und Clipmasken......Page 151
5.6 Text......Page 154
5.6.1 Fonts......Page 155
5.6.2 Horizontaler Textanfasspunkt......Page 157
5.6.3 Vertikaler Textanfasspunkt......Page 158
5.6.4 Text zeichnen und messen......Page 159
5.7 Bilder einbetten......Page 160
5.8 Pixelmanipulation......Page 165
5.8.1 Arbeiten mit dem »ImageData«-Objekt......Page 166
5.8.2 Farbmanipulation mit »getImageData()«, ­»createImageData()« und »putImageData()«......Page 169
5.9 Compositing......Page 173
5.10 Muster......Page 176
5.11 Transformationen......Page 180
5.12 Base64-Kodieren mit »canvas.toDataURL()«......Page 188
5.13 „save()« und »restore()«......Page 190
5.14.1 Animation farbiger Kugeln......Page 191
5.14.2 Video abspielen mit »drawImage()«......Page 195
5.15.1 »isPointInPath(x, y)«......Page 199
5.15.2 Barrierefreiheit in Canvas?......Page 200
5.15.3 Sicherheitsaspekte......Page 201
5.15.4 Browserunterstützung......Page 202
5.15.5 Weiterführende Links......Page 203
6 SVG und MathML......Page 204
7 Geolocation......Page 210
7.1.2 Online-Kartendienste......Page 211
7.2 Ein erster Versuch: Positionsausgabe im Browser......Page 215
7.3 Technischer Hintergrund der ­Positionsbestimmung......Page 218
7.4 Anzeige der aktuellen Position auf ­OpenStreetMap......Page 220
7.5 Positionsverfolgung auf Google Maps......Page 222
7.6.1 Bedienung......Page 224
7.6.2 Wichtige Code-Fragmente......Page 225
7.7 Browserunterstützung......Page 230
8.1 Einführung......Page 232
8.2 Storage......Page 233
8.2.1 Das »Storage-Interface«......Page 234
8.2.2 »sessionStorage«......Page 235
8.2.4 Das »Storage-Event«......Page 237
8.2.5 Debugging......Page 238
8.3 Offline-Web-Applikationen......Page 240
8.3.1 Die Cache-Manifest-Datei......Page 241
8.3.2 Offline-Status und Events......Page 242
8.3.3 Debugging......Page 245
8.4 Browser-Unterstützung......Page 248
8.5 Beispiel: Knapp dran!......Page 249
8.5.1 Bedienung der Anwendung für Spieler......Page 250
8.5.2 Bedienung der Anwendung für Administratoren......Page 251
8.5.3 Wichtige Codefragmente......Page 252
8.5.4 Erweiterungsmöglichkeiten......Page 259
9.1 Einführung......Page 262
9.1.1 Der Websocket-Server......Page 264
9.2.1 Der Broadcast-Client......Page 266
9.2.2 Der Broadcast-Server......Page 269
9.3 Beispiel: Schiffe versenken!......Page 271
10.1 Einführung......Page 282
10.2 Suche nach Schaltjahren......Page 284
10.3 Höhenprofile berechnen mit Canvas......Page 287
10.3.1 Wichtige Code-Fragmente......Page 289
11.1 Ein ganz normaler Text …......Page 296
11.2 Die Syntax von Microdata......Page 298
11.2.1 Die Attribute »itemscope« und »itemprop«......Page 299
11.2.2 Das »itemtype«-Attribut......Page 301
11.2.4 Das »itemref«-Attribut......Page 304
11.3 Die Microdata DOM-API......Page 305
12 Einige globale Attribute zum Schluss......Page 308
12.1 Neuigkeiten beim »class«-Attribut......Page 309
12.2 Beliebige »private« Attribute mit »data-*«......Page 310
12.3 Das »hidden«-Attribut......Page 311
12.4 Das »classList«-Interface......Page 312
12.5 Drag&Drop mit dem »draggable«-Attribut......Page 314
12.5.1 Drag&Drop in Kombination mit der »FileAPI«......Page 320
12.6 Die Attribute »contenteditable« und »spellcheck«......Page 324
Ausblick......Page 328
A......Page 330
B......Page 331
C......Page 332
D......Page 333
F......Page 334
H......Page 335
L......Page 336
M......Page 337
O......Page 338
P......Page 339
S......Page 340
U......Page 342
W......Page 343
Z......Page 344