HTML 5 - Une référence pour le développeur web...HTML 5 † CSS 3 † JavaScript † DOM † W3C & WhatWG Drag & drop † Audio/vidéo † Canvas † Géolocalisation † Hors ligne

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