R o d o l p h e R i m e l é
Préface de Raphaël Goetter
HTML 5Une référence pourle développeur web
HTML 5 • CSS 3 • JavaScript • DOM • W3C & WhatWG Drag & drop • Audio/vidéo • Canvas • Géolocalisation • Hors ligne
Web Sockets • Web Storage • File API • Microformats
2e éditionTraite les dernières
évolutions d’HTML 5
© Groupe Eyrolles, 2013, ISBN : 978-2-212-13638-8
Table des matières
CHAPITRE 1Une brève histoire du Webet de ses standards ....................... 1
Un successeur pour HTML 4 et XHTML 2Le rôle du W3C . . . . . . . . . . . . . . . . . . . 8
Une maturation rigoureuse... . . . . . . . . 9… mais peu véloce . . . . . . . . . . . . . . 10
Le rôle du WhatWG . . . . . . . . . . . . . . . 11Les fondements de l’évolution . . . . . . . . 12
Tout le monde sur la brèche . . . . . . . 13En quoi consiste réellement HTML 5 ? . 14Différences depuis HTML 4.01 et XHTML 1.x . . . . . . . . . . . . . . . 15
HTML 5 = HTML + JavaScript + CSS (3) ? 16Page web ou application web ? . . . . . . 16Pourquoi des standards pour le Web ? 17
CHAPITRE 2HTML en seconde langue ........... 19
La syntaxe HTML 5 . . . . . . . . . . . . . . . 21Rappel sur les balises . . . . . . . . . . . . 21Imbrications et types de contenu . . . . 22Structure générale d’un document HTML . 24Attributs . . . . . . . . . . . . . . . . . . . . 25Les commentaires . . . . . . . . . . . . . . 26
L’encodage des caractères . . . . . . . . . . . 27Les entités . . . . . . . . . . . . . . . . . . . 28
Le type MIME . . . . . . . . . . . . . . . . . . . 28Comment le navigateur détermine-t-il l’encodage des caractères et le type MIME ? . . 29
HTML 5 ou XHTML 5 ? . . . . . . . . . . . 30Forme HTML . . . . . . . . . . . . . . . . 30Forme XHTML . . . . . . . . . . . . . . . 31Ce que vous savez sur XHTML est probablement faux . . . . . . . . . . . . 31Du vrai XHTML 5 . . . . . . . . . . . . . 32
La validation . . . . . . . . . . . . . . . . . . . . . 35Rappels sur les styles CSS . . . . . . . . . . . . 36Rappels sur JavaScript . . . . . . . . . . . . . . 39
Frameworks JavaScript . . . . . . . . . . . 40Où placer <script> ? . . . . . . . . . . . . . 40
Publier un site en ligne . . . . . . . . . . . . . . 41Choisir un hébergeur web . . . . . . . . . 41
« I believe I can touch the sky » : le cloud . . . . . . . . . . . . . . . . . . . 42
Utiliser un client FTP . . . . . . . . . . . . 42Choisir un langage serveur et un système de gestion de contenu . . . . . . . . . . . . 42
Le protocole HTTP . . . . . . . . . . . . . . . . 44Requêtes et en-têtes . . . . . . . . . . . . . 45
Bonnes pratiques . . . . . . . . . . . . . . . . . . 48Organisation du code . . . . . . . . . . . . 48Organisation des fichiers . . . . . . . . . . 48Optimisations en vue des performances . 48
Les sites de référence . . . . . . . . . . . . . . . 50
CHAPITRE 3Navigateurs et support............... 55
Panorama des navigateurs web et moteurs de rendu . . . . . . . . . . . . . . . . . . . . . . . . 56
HTML 5 – Une référence pour le développeur web
© Groupe Eyrolles, 2004XIV
Mobiles et tablettes . . . . . . . . . . . . . 57TV connectée et console . . . . . . . . . . 57
Prise en charge de HTML 5 . . . . . . . . . . 58Bibliothèques de détection et de modernisation . . . . . . . . . . . . . . . . 59
Modernizr . . . . . . . . . . . . . . . . . . . 59html5shim (ou html5shiv) . . . . . . . . 61Polyfills . . . . . . . . . . . . . . . . . . . . . 62
Frameworks HTML . . . . . . . . . . . . . . . 63HTML5 Boilerplate . . . . . . . . . . . . 63Bootstrap . . . . . . . . . . . . . . . . . . . . 64Initializr . . . . . . . . . . . . . . . . . . . . . 64HTML5 Reset . . . . . . . . . . . . . . . . 65
Les bons outils . . . . . . . . . . . . . . . . . . . 66Pour éditer . . . . . . . . . . . . . . . . . . . 66Pour tester et déboguer . . . . . . . . . . . 69
Virtualisez ! . . . . . . . . . . . . . . . 69Mozilla Firefox . . . . . . . . . . . . . 70Google Chrome . . . . . . . . . . . . . 71Safari . . . . . . . . . . . . . . . . . . . 71Opera . . . . . . . . . . . . . . . . . . . 72Internet Explorer . . . . . . . . . . . . 72
Extensions de développement et consoles JavaScript . . . . . . . . . . . . 73
Les pages about: . . . . . . . . . . . . . 74Surveiller la performance navigateur . 74
Pour créer des applications mobiles . . 76
CHAPITRE 4Éléments et attributs HTML 5 .... 79
Modèles de contenu . . . . . . . . . . . . . . . 82Le doctype avant tout . . . . . . . . . . . . . . 83
Rappel des précédents doctypes . . . . . 84Éléments racines et méta-informations . . 85
<html> . . . . . . . . . . . . . . . . . . . . . 85manifest . . . . . . . . . . . . . . . . . . 85
<head> . . . . . . . . . . . . . . . . . . . . . 86<title> . . . . . . . . . . . . . . . . . . . . . . 88<meta> . . . . . . . . . . . . . . . . . . . . . 89
<meta name> . . . . . . . . . . . . . . 90<meta charset> . . . . . . . . . . . . . 90
<meta http-equiv> . . . . . . . . . . . 91<link> . . . . . . . . . . . . . . . . . . . . . . 92<style> . . . . . . . . . . . . . . . . . . . . . . 94
scoped . . . . . . . . . . . . . . . . . . . 95media . . . . . . . . . . . . . . . . . . . 97
<base> . . . . . . . . . . . . . . . . . . . . . . 97href . . . . . . . . . . . . . . . . . . . . . 98target . . . . . . . . . . . . . . . . . . . . 98
<body> . . . . . . . . . . . . . . . . . . . . . . 98Groupement . . . . . . . . . . . . . . . . . . . . . 99
<div> . . . . . . . . . . . . . . . . . . . . . . . 99<span> . . . . . . . . . . . . . . . . . . . . . 100
Liens . . . . . . . . . . . . . . . . . . . . . . . . . 101<a> . . . . . . . . . . . . . . . . . . . . . . . 101
href et hreflang . . . . . . . . . . . . . 102rel . . . . . . . . . . . . . . . . . . . . . 104id et ancres . . . . . . . . . . . . . . . 104target . . . . . . . . . . . . . . . . . . . 105download . . . . . . . . . . . . . . . . 106ping . . . . . . . . . . . . . . . . . . . 106Liens et blocs . . . . . . . . . . . . . . 107
Sections et titres . . . . . . . . . . . . . . . . . . 108Le cas Internet Explorer . . . . . . . 112Le cas Internet Explorer sans JavaScript . . . . . . . . . . . . 115Le cas Internet Explorer sans JavaScript, bis . . . . . . . . . . 116
<section> . . . . . . . . . . . . . . . . . . . 116<article> . . . . . . . . . . . . . . . . . . . . 118<header> . . . . . . . . . . . . . . . . . . . 120<footer> . . . . . . . . . . . . . . . . . . . . 121<nav> . . . . . . . . . . . . . . . . . . . . . 122<aside> . . . . . . . . . . . . . . . . . . . . 123<address> . . . . . . . . . . . . . . . . . . . 125<h1> à <h6> . . . . . . . . . . . . . . . . . 126
Hiérarchie des éléments de sections et outline . . . . . . . . . . . . . . . . . 128
<hgroup> . . . . . . . . . . . . . . . . . . . 133Listes . . . . . . . . . . . . . . . . . . . . . . . . . 134
<ol> . . . . . . . . . . . . . . . . . . . . . . . 134<ul> . . . . . . . . . . . . . . . . . . . . . . . 136
Table des matières
© Groupe Eyrolles, 2004 XV
<li> . . . . . . . . . . . . . . . . . . . . . . . 137<dl> . . . . . . . . . . . . . . . . . . . . . . 138<dt> . . . . . . . . . . . . . . . . . . . . . . 139<dd> . . . . . . . . . . . . . . . . . . . . . . 140
Texte et sémantique . . . . . . . . . . . . . . 140<p> . . . . . . . . . . . . . . . . . . . . . . . 140<blockquote> . . . . . . . . . . . . . . . . 141<q> . . . . . . . . . . . . . . . . . . . . . . . 143
cite . . . . . . . . . . . . . . . . . . . . 144<cite> . . . . . . . . . . . . . . . . . . . . . 144<strong> . . . . . . . . . . . . . . . . . . . 145<em> . . . . . . . . . . . . . . . . . . . . . 145<b> . . . . . . . . . . . . . . . . . . . . . . . 146<i> . . . . . . . . . . . . . . . . . . . . . . . 147<u> . . . . . . . . . . . . . . . . . . . . . . . 148<small> . . . . . . . . . . . . . . . . . . . . 149<dfn> . . . . . . . . . . . . . . . . . . . . . 150<abbr> . . . . . . . . . . . . . . . . . . . . . 150<code> . . . . . . . . . . . . . . . . . . . . 151<var> . . . . . . . . . . . . . . . . . . . . . . 152<kbd> . . . . . . . . . . . . . . . . . . . . . 153<samp> . . . . . . . . . . . . . . . . . . . . 154<sub> . . . . . . . . . . . . . . . . . . . . . 154<sup> . . . . . . . . . . . . . . . . . . . . . 155<time> . . . . . . . . . . . . . . . . . . . . 156
datetime . . . . . . . . . . . . . . . . 156pubdate . . . . . . . . . . . . . . . . . 158
<hr> . . . . . . . . . . . . . . . . . . . . . . 159<br> . . . . . . . . . . . . . . . . . . . . . . 160<wbr> . . . . . . . . . . . . . . . . . . . . . 161<ins> . . . . . . . . . . . . . . . . . . . . . . 161<del> . . . . . . . . . . . . . . . . . . . . . . 162<s> . . . . . . . . . . . . . . . . . . . . . . . 163<pre> . . . . . . . . . . . . . . . . . . . . . 164<mark> . . . . . . . . . . . . . . . . . . . . 165<ruby> . . . . . . . . . . . . . . . . . . . . 167<rt> . . . . . . . . . . . . . . . . . . . . . . 168<rp> . . . . . . . . . . . . . . . . . . . . . . 168<bdo> . . . . . . . . . . . . . . . . . . . . . 169<bdi> . . . . . . . . . . . . . . . . . . . . . 170
Contenu embarqué . . . . . . . . . . . . . . . 170<img> . . . . . . . . . . . . . . . . . . . . . 170
Formats de compression d’images . 171Bref comparatif visuel . . . . . . . . 173Usage des images en HTML . . . 174src . . . . . . . . . . . . . . . . . . . . . 175alt . . . . . . . . . . . . . . . . . . . . . 176width, height . . . . . . . . . . . . . . 178usemap . . . . . . . . . . . . . . . . . . 179ismap . . . . . . . . . . . . . . . . . . . 179Liens sur images . . . . . . . . . . . . 180Positionnement des images . . . . . 181Images à résolution adaptative (responsive images) . . . . . . . . . . 182
<map> . . . . . . . . . . . . . . . . . . . . . 183<area> . . . . . . . . . . . . . . . . . . . . . 185<figure> . . . . . . . . . . . . . . . . . . . . 187<figcaption> . . . . . . . . . . . . . . . . . 190<iframe> . . . . . . . . . . . . . . . . . . . . 191
src . . . . . . . . . . . . . . . . . . . . . 192width, height . . . . . . . . . . . . . . 192sandbox . . . . . . . . . . . . . . . . 193srcdoc . . . . . . . . . . . . . . . . . . 194seamless . . . . . . . . . . . . . . . . . 195
<embed> . . . . . . . . . . . . . . . . . . . 196Imbrications avec <object> et éléments média . . . . . . . . . . . 198
<object> . . . . . . . . . . . . . . . . . . . . 199Le cas de Flash . . . . . . . . . . . . . 200
<param> . . . . . . . . . . . . . . . . . . . . 201<video> . . . . . . . . . . . . . . . . . . . . 202<audio> . . . . . . . . . . . . . . . . . . . . 203<source> . . . . . . . . . . . . . . . . . . . 203<track> . . . . . . . . . . . . . . . . . . . . 203<canvas> . . . . . . . . . . . . . . . . . . . 203
Données tabulaires . . . . . . . . . . . . . . . 204<table> . . . . . . . . . . . . . . . . . . . . . 204<thead> . . . . . . . . . . . . . . . . . . . . 207<tfoot> . . . . . . . . . . . . . . . . . . . . . 208<tbody> . . . . . . . . . . . . . . . . . . . . 208<tr> . . . . . . . . . . . . . . . . . . . . . . . 210<td> . . . . . . . . . . . . . . . . . . . . . . . 211<th> . . . . . . . . . . . . . . . . . . . . . . . 213<caption> . . . . . . . . . . . . . . . . . . . 214
HTML 5 – Une référence pour le développeur web
© Groupe Eyrolles, 2004XVI
<colgroup> . . . . . . . . . . . . . . . . . . 216<col> . . . . . . . . . . . . . . . . . . . . . . 217
Éléments interactifs . . . . . . . . . . . . . . 219<menu> . . . . . . . . . . . . . . . . . . . . 219
type . . . . . . . . . . . . . . . . . . . . 220label . . . . . . . . . . . . . . . . . . . 221
<command> . . . . . . . . . . . . . . . . 222<details> . . . . . . . . . . . . . . . . . . . 223<summary> . . . . . . . . . . . . . . . . . 226<device> . . . . . . . . . . . . . . . . . . . 227
Scripting . . . . . . . . . . . . . . . . . . . . . . 227<script> . . . . . . . . . . . . . . . . . . . . 227
Script externe à la page HTML . 229Exécution asynchrone . . . . . . . . 230Exécution différée . . . . . . . . . . 230
<noscript> . . . . . . . . . . . . . . . . . . 230Attributs HTML globaux . . . . . . . . . . 231
accesskey . . . . . . . . . . . . . . . . . . . 233class . . . . . . . . . . . . . . . . . . . . . . 234contextmenu . . . . . . . . . . . . . . . . 235contenteditable . . . . . . . . . . . . . . 235data- . . . . . . . . . . . . . . . . . . . . . 236dir . . . . . . . . . . . . . . . . . . . . . . . 238draggable . . . . . . . . . . . . . . . . . . 238dropzone . . . . . . . . . . . . . . . . . . 239hidden . . . . . . . . . . . . . . . . . . . . 239id . . . . . . . . . . . . . . . . . . . . . . . . 240itemid, itemref, itemscope, itemtype, itemprop . . . . . . . . . . . 241lang . . . . . . . . . . . . . . . . . . . . . . 241tabindex . . . . . . . . . . . . . . . . . . . . 242translate . . . . . . . . . . . . . . . . . . . 244title . . . . . . . . . . . . . . . . . . . . . . . 245spellcheck . . . . . . . . . . . . . . . . . . 245style . . . . . . . . . . . . . . . . . . . . . . 246
Relations des liens . . . . . . . . . . . . . . . . 247Quelques relations notables . . . . . . . 249
nofollow . . . . . . . . . . . . . . . . . 249noreferrer . . . . . . . . . . . . . . . 250prefetch . . . . . . . . . . . . . . . . 250first, last, prev, next, up . . . . . . 251
Attributs événements . . . . . . . . . . . . . . 252
CHAPITRE 5Les formulaires (Web Forms) .. 257
<input> et ses variantes . . . . . . . . . . . . . 259text . . . . . . . . . . . . . . . . . . . . . . . 261password . . . . . . . . . . . . . . . . . . . 262tel . . . . . . . . . . . . . . . . . . . . . . . 262url . . . . . . . . . . . . . . . . . . . . . . . 264email . . . . . . . . . . . . . . . . . . . . . 265search . . . . . . . . . . . . . . . . . . . . . 266hidden . . . . . . . . . . . . . . . . . . . . . 267radio . . . . . . . . . . . . . . . . . . . . . . 268checkbox . . . . . . . . . . . . . . . . . . . 269button . . . . . . . . . . . . . . . . . . . . . 270reset . . . . . . . . . . . . . . . . . . . . . . . 270submit . . . . . . . . . . . . . . . . . . . . . 271image . . . . . . . . . . . . . . . . . . . . . . 271file . . . . . . . . . . . . . . . . . . . . . . . . 272
Camera API et périphériques mobiles . . . . . . . . . . . . . . . . . . 275
date . . . . . . . . . . . . . . . . . . . . . . 276time . . . . . . . . . . . . . . . . . . . . . . 277datetime . . . . . . . . . . . . . . . . . . . 277datetime-local . . . . . . . . . . . . . . . 278month . . . . . . . . . . . . . . . . . . . . 279week . . . . . . . . . . . . . . . . . . . . . 280number . . . . . . . . . . . . . . . . . . . . 281range . . . . . . . . . . . . . . . . . . . . . 281color . . . . . . . . . . . . . . . . . . . . . . 282
Autres éléments de formulaires . . . . . . . 283<textarea> . . . . . . . . . . . . . . . . . . . 283<select> . . . . . . . . . . . . . . . . . . . . 284<option> . . . . . . . . . . . . . . . . . . . . 285<optgroup> . . . . . . . . . . . . . . . . . . 286<datalist> . . . . . . . . . . . . . . . . . . . 287<button> . . . . . . . . . . . . . . . . . . . . 289<output> . . . . . . . . . . . . . . . . . . . 289<keygen> . . . . . . . . . . . . . . . . . . . 291<progress> . . . . . . . . . . . . . . . . . . 294<meter> . . . . . . . . . . . . . . . . . . . . 296
Table des matières
© Groupe Eyrolles, 2004 XVII
Construction de formulaires . . . . . . . . . 298<form> . . . . . . . . . . . . . . . . . . . . 298
Validation des données . . . . . . . 299<fieldset> . . . . . . . . . . . . . . . . . . . 301<legend> . . . . . . . . . . . . . . . . . . . 302<label> . . . . . . . . . . . . . . . . . . . . 302
Attributs communs pour les éléments de formulaire . . . . . . . . . . . . . . . . . . . 305
Quelques nouveaux attributs HTML 5 . . 307placeholder . . . . . . . . . . . . . . . 307autofocus . . . . . . . . . . . . . . . . 307autocomplete . . . . . . . . . . . . . . 308required . . . . . . . . . . . . . . . . . 308multiple . . . . . . . . . . . . . . . . . 308dirname . . . . . . . . . . . . . . . . . 308pattern . . . . . . . . . . . . . . . . . 309min, max, step . . . . . . . . . . . . 309
Une touche de style . . . . . . . . . . . . . . . 310Un zeste de script . . . . . . . . . . . . . . . . 312Prise en charge . . . . . . . . . . . . . . . . . . 313
CHAPITRE 6Les microformats (microdata) .... 317
Principe des microformats : vers le Web sémantique . . . . . . . . . . . . 318
Les prémices . . . . . . . . . . . . . . . . 320Microdata à la rescousse . . . . . . . . . . . 322
Attributs globaux . . . . . . . . . . . . . 323itemscope . . . . . . . . . . . . . . . . 323itemtype . . . . . . . . . . . . . . . . . 323Vocabulaires . . . . . . . . . . . . . . 324itemprop . . . . . . . . . . . . . . . . 326itemid . . . . . . . . . . . . . . . . . . 328itemref . . . . . . . . . . . . . . . . . . 328
API DOM Microdata . . . . . . . . . . 329document.getItems() . . . . . . . . . 331itemType, itemRef, itemId . . . . 332properties . . . . . . . . . . . . . . . . 332properties.namedItem() . . . . . . . 332itemValue . . . . . . . . . . . . . . . 333
Rich Snippets . . . . . . . . . . . . . . . . . . . 334
CHAPITRE 7Audio et Vidéo........................... 337
Conteneurs, codecs, licences et support . 339Vidéo . . . . . . . . . . . . . . . . . . . . . . 341
Theora . . . . . . . . . . . . . . . . . . 342WebM . . . . . . . . . . . . . . . . . . 342H.264 . . . . . . . . . . . . . . . . . . 343
Audio . . . . . . . . . . . . . . . . . . . . . 344MP3 (Mpeg-1 Audio Layer 3) . . 344AAC (Advanced Audio Coding) . 344Vorbis . . . . . . . . . . . . . . . . . . 345Le codec audio Opus . . . . . . . . . 345
Les balises media . . . . . . . . . . . . . . . . . 346<audio> . . . . . . . . . . . . . . . . . . . . . . . . 348<video> . . . . . . . . . . . . . . . . . . . . . . . . 348<source> . . . . . . . . . . . . . . . . . . . . . . . 349<track> . . . . . . . . . . . . . . . . . . . . . . . . 350
Attributs pour <track> . . . . . . . . . . 352Attributs pour <audio> et <video> . . . . . 354
src . . . . . . . . . . . . . . . . . . . . . . . . 354width et height . . . . . . . . . . . . . . . 354controls . . . . . . . . . . . . . . . . . . . . 354poster . . . . . . . . . . . . . . . . . . . . . . 354autoplay . . . . . . . . . . . . . . . . . . . . 354preload . . . . . . . . . . . . . . . . . . . . . 355loop . . . . . . . . . . . . . . . . . . . . . . . 355mediagroup . . . . . . . . . . . . . . . . . . 355
Interface de contrôle et événements . . . . 356Contrôler la lecture . . . . . . . . . . 357Surveiller les événements . . . . . . 358
Créer une interface graphique personnalisée . . . . . . . . . . . . . . . . . 360
Détecter les erreurs de lecture . . . . 366Détection du support avec canPlayType() . 367
Solution de repli avec Flash et Java . . 368Media Fragments . . . . . . . . . . . . . . 370Vous reprendrez bien un peu de popcorn ? 370
Plein écran (fullscreen) . . . . . . . . . . . . . 371Aller plus loin avec les API . . . . . . . 373
Prise en charge de <audio> et <video> par les navigateurs : comment choisir ? . . 373
HTML 5 – Une référence pour le développeur web
© Groupe Eyrolles, 2004XVIII
Librairies et lecteurs . . . . . . . . . . . . . . 376
CHAPITRE 8Dessin avec Canvas ................... 377
L’élément <canvas> . . . . . . . . . . . . . . . 379Base de départ et contexte graphique 380Coordonnées . . . . . . . . . . . . . . . . 380
Formes géométriques . . . . . . . . . . . . . 382Chemins . . . . . . . . . . . . . . . . . . . . . . 383
beginPath() et closePath() . . . . . . . . 384moveTo() et lineTo() . . . . . . . . . . . 385fill() et stroke() . . . . . . . . . . . . . . . 386rect() . . . . . . . . . . . . . . . . . . . . . . 386arcTo() . . . . . . . . . . . . . . . . . . . . 387arc() . . . . . . . . . . . . . . . . . . . . . . 388bezierCurveTo() . . . . . . . . . . . . . . 389quadraticCurveTo() . . . . . . . . . . . . 390
Styles de traits, remplissages et couleurs . 391Dégradés . . . . . . . . . . . . . . . . . . . . . . 392Transformations et états du contexte . . . 394
save() et restore() . . . . . . . . . . . . . . 396Images . . . . . . . . . . . . . . . . . . . . . . . . 398Pixels . . . . . . . . . . . . . . . . . . . . . . . . . 400
Créer des pixels . . . . . . . . . . . . . . . 402Lire des pixels . . . . . . . . . . . . . . . . 403Modifier des pixels . . . . . . . . . . . . 405
Motifs et sprites . . . . . . . . . . . . . . . . . 408Texte . . . . . . . . . . . . . . . . . . . . . . . . . 413Ombrages . . . . . . . . . . . . . . . . . . . . . 415Transparence, compositions et masques 417
Transparence générale . . . . . . . . . . 417Compositions . . . . . . . . . . . . . . . . 418Masques . . . . . . . . . . . . . . . . . . . 420
Contrôle clavier et souris . . . . . . . . . . . 424Souris . . . . . . . . . . . . . . . . . . . . . 424Clavier . . . . . . . . . . . . . . . . . . . . 427
Animation et jeux . . . . . . . . . . . . . . . . 430requestAnimationFrame . . . . . . . . . 431Jeux . . . . . . . . . . . . . . . . . . . . . . 433
Performance . . . . . . . . . . . . . . . . . . . . 434L’API Page Visibility . . . . . . . . . . . . . 435
Plein écran . . . . . . . . . . . . . . . . . . . . . 438Adapter la taille du canvas à la fenêtre 439
Vidéo et audio . . . . . . . . . . . . . . . . . . . 439Prise en charge . . . . . . . . . . . . . . . . . . . 442Bibliothèques . . . . . . . . . . . . . . . . . . . 443Et la 3D ? WebGL ! . . . . . . . . . . . . . . . 445Et le graphisme vectoriel ? SVG ! . . . . . . 447
Création au format SVG . . . . . . . . . 449Inclusion HTML . . . . . . . . . . . . . 450Syntaxe . . . . . . . . . . . . . . . . . . . . 451Support . . . . . . . . . . . . . . . . . . . . 452Alternatives pour développer en SVG : SVGWeb, Raphaël, Bonsai.js... . . . . 453
CHAPITRE 9Géolocalisation ......................... 455
Principe . . . . . . . . . . . . . . . . . . . . . . . 457Les mains dans le code . . . . . . . . . . . . . 458
Déclencher la localisation . . . . . . . . 459Travailler avec la position et les coordonnées . . . . . . . . . . . . . 460Gestion des erreurs . . . . . . . . . . . . . 461Options supplémentaires . . . . . . . . . 462Utiliser une carte . . . . . . . . . . . . . . 464
Prise en charge de l’API Geolocation par les navigateurs . . . . . . . . . . . . . . . . 467
Alternative avec geo-location-javascript 467
CHAPITRE 10Interactions avec les fichiers (File API)..................................... 469
Principe . . . . . . . . . . . . . . . . . . . . . . . 470Fonctionnement . . . . . . . . . . . . . . . . . 471
Événement onchange . . . . . . . . . . . 472Recueillir les informations des fichiers sélectionnés . . . . . . . . . . . . . . . . . . 473
Lire des fichiers avec FileReader . . . . . . 475Utiliser Canvas . . . . . . . . . . . . . . . 478CreateObjectURL . . . . . . . . . . . . . 480
Upload simple avec PHP . . . . . . . . . . . 481Upload avec XMLHttpRequest 2 . . . . . 483
Table des matières
© Groupe Eyrolles, 2004 XIX
FormData . . . . . . . . . . . . . . . . . . 484Drag & Drop . . . . . . . . . . . . . . . . . . . 488Écrire des fichiers, accéder au système . . 488Prise en charge . . . . . . . . . . . . . . . . . . 489
CHAPITRE 11Gestion du glisser-déposer (Drag & Drop) ............................ 491
Principe . . . . . . . . . . . . . . . . . . . . . . . 492Événements et attributs mis en œuvre . . 493Glisser... . . . . . . . . . . . . . . . . . . . . . . 494
L’attribut draggable . . . . . . . . . . . . 494Un zeste de CSS . . . . . . . . . . . . . . 495
Déposer ! . . . . . . . . . . . . . . . . . . . . . . 497L’attribut dropzone . . . . . . . . . . . . 498Les événements dragenter et dragleave . 499L’événement dragover . . . . . . . . . . 500
L’interface DataTransfer . . . . . . . . . . . 502L’événement dragstart . . . . . . . . . . 502
effectAllowed et dropEffect . . . . . 502Données transportées par setData() . 503L’événement drop et getData() . . . . 504L’événement dragend . . . . . . . . . . . 506Aller plus loin . . . . . . . . . . . . . . . . 507Script complet . . . . . . . . . . . . . . . 507
Glisser-déposer de fichiers . . . . . . . . . . 508Dépôt depuis le système (drag-in) . . 508En symbiose avec FileReader et Data URI . . . . . . . . . . . . . . . . . 510Dépose d’éléments hors du navigateur (drag-out) . . . . . . . . . . . . . . . . . . 514
Prise en charge du glisser-déposer . . . . . 516
CHAPITRE 12Événements envoyés par le serveur (« push ») .......... 517
Push-toi, j’arrive . . . . . . . . . . . . . . . . . 518Principe général . . . . . . . . . . . . . . 519
Sous le capot . . . . . . . . . . . . . . . . . . . . 519Côté client (navigateur) . . . . . . . . . 519
Propriétés et méthodes . . . . . . . . 520
Côté serveur . . . . . . . . . . . . . . . . . 520Mise en place d’un flux continu . . 521
Syntaxe des messages source . . . . . . 526id . . . . . . . . . . . . . . . . . . . . . 528event . . . . . . . . . . . . . . . . . . . 530retry . . . . . . . . . . . . . . . . . . . . 531Utiliser JSON . . . . . . . . . . . . . 532
Prise en charge . . . . . . . . . . . . . . . . . . 533
CHAPITRE 13Échange d’informations entre documents (Web Messaging) .. 535
Fonctionnement . . . . . . . . . . . . . . . . . 536Surveiller les appels . . . . . . . . . . . . . 540
Sécurité . . . . . . . . . . . . . . . . . . . . . . . 541Vérification de l’origine . . . . . . . . . . 541Vérification du contenu . . . . . . . . . . 541
Données transférées et JSON . . . . . . . . 542Source et réponse . . . . . . . . . . . . . . . . . 544Prise en charge . . . . . . . . . . . . . . . . . . 547
CHAPITRE 14Communication en temps réel (Web Sockets) ............................ 549
Un protocole commun . . . . . . . . . . . . . 551Pour démarrer, une poignée de mains (handshake) . . . . . . . . . . . . . . . . . 551
Côté serveur . . . . . . . . . . . . . . . . . . . . 552phpwebsocket . . . . . . . . . . . . . . . . 553
Côté navigateur . . . . . . . . . . . . . . . . . . 555Application HTML . . . . . . . . . . . . 556Se connecter . . . . . . . . . . . . . . . . . 559Envoyer des données . . . . . . . . . . . 560Recevoir des messages . . . . . . . . . . . 560Gérer les erreurs . . . . . . . . . . . . . . . 561Fermer la connexion . . . . . . . . . . . . 561Aller plus loin . . . . . . . . . . . . . . . . 562
Prise en charge . . . . . . . . . . . . . . . . . . 564
HTML 5 – Une référence pour le développeur web
© Groupe Eyrolles, 2004XX
CHAPITRE 15Stockage des données locales (Web Storage) ............................ 567
Deux espaces de stockage . . . . . . . . . . . 569Stockage de session . . . . . . . . . . . . 569Local Storage . . . . . . . . . . . . . . . . 570
L’interface Storage . . . . . . . . . . . . . . . 570Stockage, lecture, suppression . . . . . 570Sécurité et accès aux données . . . . . . 572Un compteur de visites avec localStorage . 573Surveiller le dépassement de quota . . 574
Un soupçon de JSON . . . . . . . . . . . . . 575Autres types de données . . . . . . . . . 577
Stocker sur un événement . . . . . . . . . . 578Stockage à intervalles réguliers . . . . . 578Événements . . . . . . . . . . . . . . . . . 579
Prise en charge . . . . . . . . . . . . . . . . . . 580Alternatives à Web Storage . . . . . . . 580
CHAPITRE 16Bases de données (Indexed Database & Web SQL Database)...... 583
L’aube d’IndexedDB . . . . . . . . . . . . . . 585Philosophie d’une base NoSQL . . . . 585Ouvrir une base et créer un catalogue 587Insérer des données dans une transaction . 590Afficher le contenu . . . . . . . . . . . . 592Utiliser un index . . . . . . . . . . . . . . 594Effacer un catalogue . . . . . . . . . . . 596Perspectives . . . . . . . . . . . . . . . . . 596Prise en charge . . . . . . . . . . . . . . . 597
Le crépuscule de l’API Web SQL Database ? 598Philosophie . . . . . . . . . . . . . . . . . 599Ouvrir une base . . . . . . . . . . . . . . . 599Initier une transaction . . . . . . . . . . 599Créer une table . . . . . . . . . . . . . . . 600Insérer des données . . . . . . . . . . . . 600Exploiter les résultats . . . . . . . . . . . 601Perspectives . . . . . . . . . . . . . . . . . 602Prise en charge . . . . . . . . . . . . . . . 602
CHAPITRE 17Applications web hors ligne.... 603
Principe . . . . . . . . . . . . . . . . . . . . . . . 604En ligne ou hors ligne ? . . . . . . . . . . . . . 605
Structure complète . . . . . . . . . . . . . 607Liste des fichiers à mettre en cache (manifeste) . . . . . . . . . . . . . . . . . . . . . 609
Syntaxe pour le manifeste . . . . . . . . 610La section CACHE . . . . . . . . . 610La section NETWORK . . . . . . 611La section FALLBACK . . . . . . 611HTTPS . . . . . . . . . . . . . . . . . 613
Élaboration et test du cache . . . . . . . 614Mise à jour du cache . . . . . . . . . . . . 615
L’API Application cache . . . . . . . . . . . 616Propriétés . . . . . . . . . . . . . . . . . . . 617Événements . . . . . . . . . . . . . . . . . 617Méthodes . . . . . . . . . . . . . . . . . . . 618
Une application hors ligne . . . . . . . . . . 620Prise en charge . . . . . . . . . . . . . . . . . . . 622
CHAPITRE 18Historique de navigation......... 625
Navigation dans l’historique . . . . . . . . . 626History . . . . . . . . . . . . . . . . . . . . . 626Location . . . . . . . . . . . . . . . . . . . . 627
Modification dynamique de l’historique . 629pushState() . . . . . . . . . . . . . . . . . . 630replaceState() . . . . . . . . . . . . . . . . 631The king of popstate . . . . . . . . . . . . 631
Simulation . . . . . . . . . . . . . . . . . . . . . 632Cas pratique . . . . . . . . . . . . . . . . . 633Réécriture d’adresse . . . . . . . . . . . . 638
Les ancres et l’événement hashchange . . 639Détection . . . . . . . . . . . . . . . . . . . . . . 640Prise en charge . . . . . . . . . . . . . . . . . . . 640
CHAPITRE 19JavaScript en (multi)tâche de fond : les Web Workers....... 641
Principe . . . . . . . . . . . . . . . . . . . . . . . 643
Table des matières
© Groupe Eyrolles, 2004 XXI
Outils de développement . . . . . . . . 644Fonctionnement . . . . . . . . . . . . . . . . . 645
Initialisation . . . . . . . . . . . . . . . . . 645Communication . . . . . . . . . . . . . . 647Terminaison . . . . . . . . . . . . . . . . . 650Gestion des erreurs . . . . . . . . . . . . 650Contexte . . . . . . . . . . . . . . . . . . . 650Fonctions complémentaires . . . . . . 651Blob à la rescousse . . . . . . . . . . . . . 652
Prise en charge . . . . . . . . . . . . . . . . . . 653
CHAPITRE 20JavaScript, le DOM et l’API Selectors ....................... 655
Les bases de JavaScript . . . . . . . . . . . . 657Variables . . . . . . . . . . . . . . . . . . . 657Types simples . . . . . . . . . . . . . . . . 658
Objets . . . . . . . . . . . . . . . . . . 659Fonctions . . . . . . . . . . . . . . . . 660Boucles . . . . . . . . . . . . . . . . . 661
Méthodes de sélection DOM . . . . . . . . 662getElementById() . . . . . . . . . . . . . 662getElementsByTagName() . . . . . . . 663getElementsByClassName() . . . . . . 663querySelector() . . . . . . . . . . . . . . . 663querySelectorAll() . . . . . . . . . . . . 663
Propriétés et méthodes DOM . . . . . . . 663Manipulation DOM . . . . . . . . . . . . . . 664
createElement() . . . . . . . . . . . . . . 664appendChild() . . . . . . . . . . . . . . . 665removeChild() . . . . . . . . . . . . . . . 665insertBefore() . . . . . . . . . . . . . . . . 665createTextNode() . . . . . . . . . . . . . 665classList . . . . . . . . . . . . . . . . . . . 666insertAdjacentHTML() . . . . . . . . . 666
Méthodes pour formulaires . . . . . . . . . 667Gestionnaires d’événements . . . . . . . . . 668Autres fonctions utiles . . . . . . . . . . . . . 669
matchMedia() et Media Queries . . . 670Comment écrire du bon code JavaScript ? . . 671Prise en charge . . . . . . . . . . . . . . . . . . 671
Conclusion et perspectives ...... 673Quid des frameworks JavaScript et de Flash ? . . . . . . . . . . . . . . . . . . . . . 673Perspectives d’avenir . . . . . . . . . . . . . . 674
ANNEXE AFonctionnalités modifiées et obsolètes................................ 677
Différences HTML 5 par rapport à HTML 4 . . . . . . . . . . . . . . . . . . . . . 677Fonctionnalités obsolètes . . . . . . . . . . . 677Fonctionnalités obsolètes non conformes . 678
Éléments . . . . . . . . . . . . . . . . . . . 678Attributs . . . . . . . . . . . . . . . . . . . . 678
ANNEXE BFeuilles de style CSS.................. 681
Principe général . . . . . . . . . . . . . . . . . . 683Sélecteurs . . . . . . . . . . . . . . . . . . . . . . 684Propriétés . . . . . . . . . . . . . . . . . . . . . . 685Pseudo-classes et pseudo-éléments . . . . 691Règles @ . . . . . . . . . . . . . . . . . . . . . . . 692Media queries . . . . . . . . . . . . . . . . . . . 693
ANNEXE CAccessibilité et ARIA................. 695
Qu’est-ce que l’accessibilité du Web ? . . . 696HTML sémantique . . . . . . . . . . . . 699
WAI, WCAG et ARIA . . . . . . . . . . . . 700Les rôles et propriétés de WAI-ARIA . . 703
Rôles avec l’attribut role . . . . . . . . . 704Points de repère (landmark roles) . 704Structure de document . . . . . . . . 706Composants graphiques (widgets) 707
Propriétés et états avec les attributs aria-* . 710Globaux . . . . . . . . . . . . . . . . . 711Contrôles d’interface . . . . . . . . . 712
Il y a de la vie sur cette planète . . . . . 715Drag & drop (glisser-déposer) . . . 717Relations . . . . . . . . . . . . . . . . 717
HTML 5 – Une référence pour le développeur web
© Groupe Eyrolles, 2004XXII
Valider et tester . . . . . . . . . . . . . . . 719L’aide de JavaScript . . . . . . . . . . . . 721
Index ........................................... 723