API HTML5 Maîtrisez le web moderne !

La nouvelle référence sur HTML 5
Malgré l'importance qu'occupent les nouvelles API JavaScript de HTML 5 au sein des applications web actuelles, il n'existe que peu d'ouvrages qui détaillent et présentent ces nouvelles spécifications. L'objectif de ce livre est justement de devenir une référence sur ces fonctionnalités avancées en répondant à ce manque via la présentation de chacune des API les plus utiles de manière claire, explicite et conforme aux normes du W3C.

Cet ouvrage aborde les principaux sujets suivants : l'API canvas permet de dessiner des graphiques 2D, de manipuler des images et de créer des animations, l'API SVG sert à définir des graphismes vectoriels bidimensionnels, l'API Géolocalisation détermine la position d'un objet sur un plan ou une carte à l'aide de ses coordonnées géographiques, l'API Glisser-Déposer permet de déplacer des éléments graphiques d'une zone vers une autre à l'aide de la souris, l'API Web Storage offre aux applications web la possibilité de stocker des données localement dans une base de données côté client (au niveau du navigateur), l'API Application Cache, de moins en moins utilisée, consiste à rendre les applications web disponibles en cas de coupure de la connexion Internet et enfin l'API Web Workers pour exécuter du code JavaScript en parallèle.

Des TPs pour pratiquer
Des travaux pratiques présentent une synthèse des concepts traités dans l'ouvrage sous forme d'exercices corrigés. L'objectif de ces travaux pratiques est d'illustrer concrètement l'utilisation conjointe des différentes API HTML 5.

À qui cet ouvrage s'adresse-t-il ?

Aux développeurs web, intégrateurs qui souhaitent mettre en oeuvre les nouvelles API d'HTML 5 et moderniser leurs bonnes pratiques
Aux designers web qui souhaitent découvrir toutes les possibilités que leur offre HTML 5


Table des matières API HTML 5

Chapitre 1 : canvas

Déclaration d’un canvas

API de dessin 2D du canvas

Grille de coordonnées

Formes géométriques simples

Tracés et chemins

Tracer des lignes droites

Style de contour et de remplissage des lignes

Tracer des courbes

La méthode arc()

La méthode quadraticCurveTo()

La méthode bezierCurveTo()

Tracer des chemins

La méthode arcTo()

Tracer des rectangles avec la méthode rect()

Styles et modes de remplissage

Remplissage par une couleur unie

Remplissage par un dégradé de couleur

Remplissage avec un motif

Manipuler des images

Dessiner des images

Créer une image par pixel

Lire et copier des pixels d’une image

Appliquer des filtres et modifier des pixels d’une image

Manipuler du texte

Quelques effets

Gérer la transparence

Prise en charge de l’API canvas

Chapitre 2 : Scalable Vector Graphics

Dessiner avec SVG

Structure d’un document SVG

Élément de groupement <g>

Élément <symbol>

Élément <defs>

Élément <use>

Élément <desc>

Système de coordonnées

Viewport

Attributs viewBox et preserveAspectRatio

Formes simples

Chemins

Remplissage et mise en forme

Intégrer les propriétés de style

Sous forme d’attributs à l’intérieur d’une balise

Sous forme d’une feuille de styles externe

Sous forme d’une feuille de styles interne

Sous forme de style intégré dans la balise de forme

Motifs et dégradés de couleurs

Motifs

Dégradés de couleurs

Texte

Mettre en forme du texte

Manipuler du texte

Texte multiligne

Glissement de texte

Rotation de texte

Page 105

Texte le long d’une ligne courbe

Page 106

Animation SVG

Page 107

Élément <animate>

Page 108

Élément <animateColor>

Page 111

Élément <set>

Page 113

Élément <animateTransform>

Page 114

Élément <animateMotion>

Page 117

Prise en charge de l’API SVG

Page 119

Chapitre 3 : Géolocalisation

Page 121

Principe

Page 123

Méthodes

Page 123

Récupérer les coordonnées d’une position

Page 125

Gérer les erreurs

Page 127

Options supplémentaires

Page 129

Géolocalisation sur une carte

Page 130

Prise en charge de l’API de géolocalisation

Page 136

Chapitre 4 : Glisser-Déposer

Page 137

Principe

Page 137

Événements

Page 138

Attribut draggable

Page 138

Objet DataTransfer

Page 139

Propriétés

Page 139

effectAllowed

Page 139

dropEffect

Page 140

Méthodes

Page 141

setData()

Page 141

getData()

Page 141

setDragImage()

Page 141

Exemple complet

Page 142

Glisser-Déposer des fichiers

Page 144

Déposer des fichiers du système d’exploitation vers le navigateur

Page 144

Déposer des fichiers du navigateur vers le système d’exploitation

Page 145

Objet FileReader

Page 147

Méthodes

Page 147

Événements

Page 147

Propriétés

Page 148

Prise en charge de l’API Glisser-Déposer et de l’objet FileReader

Page 150

Chapitre 5 : Stockage local

Page 151

Objets Web Storage

Page 152

Interface Web Storage

Page 152

Manipuler des données via l’interface Storage

Page 153

Exemple complet

Page 156

Prise en charge de l’API Web Storage

Page 157

Chapitre 6 : Application web hors ligne

Page 159

Structure du fichier Manifest

Page 160

CACHE

Page 161

NETWORK

Page 161

FALLBACK

Page 162

Assigner le Manifest au site web

Page 163

Gérer un cache

Page 165

API Application Cache

Page 167

Propriétés

Page 167

Événements

Page 168

Méthodes

Page 169

Mettre à jour le cache

Page 170

Exemple complet d’utilisation du cache

Page 170

Prise en charge de l’API Application Cache

Page 174

Chapitre 7 : Web Workers

Page 175

Comprendre la programmation parallèle

Page 176

Programmation séquentielle

Page 176

Programmation impérative

Page 176

Programmation événementielle

Page 177

Programmation parallèle

Page 178

Communication par mémoire partagée

Page 179

Communication par passage de message

Page 179

Types de Web Workers

Page 179

Workers dédiés

Page 179

Créer un Web Worker

Page 180

Gérer la communication d’un Worker : envoyer et recevoir des messages

Page 182

Gérer un Worker

Page 185

Restriction

Page 185

Espace global dans le Worker

Page 185

Terminaison d’un Worker

Page 185

Workers partagés

Page 187

Créer un Web Worker partagé

Page 187

Gérer la communication des Workers partagés

Page 189

Service Workers

Page 192

Cycle de vie

Page 192

Objet Promise

Page 193

Interfaces

Page 195

Compatibilité des objets

Page 200

Créer un Service Worker

Page 201

Manipulation des Web Workers

Page 210

Gestion des erreurs

Page 210

Contexte d’exécution du Web Worker

Page 212

Objet location

Page 212

Objet navigator

Page 212

Importation des scripts

Page 213

Enchaînement des Web Workers

Page 214

Prise en charge de l’API Web Worker

Page 216

Chapitre 8 : Travaux pratiques

Page 217

TP 1 : logiciel de dessin

Page 218

Exercice 1 : Canvas

Page 218



Page 218



Page 219

Exercice 2 : localStorage

Page 225



Page 225



Page 225

Exercice 3 : shared Worker

Page 228



Page 228



Page 229

TP 2 : jeu du Gomoku

Page 239

Exercice 1 : SVG

Page 240



Page 240



Page 240

Exercice 2 : Web Worker

Page 247



Page 247



Page 247

Exercice 3 : localStorage

Page 258



Page 258



Page 259

Exercice 4 : Glisser-Déposer d’un fichier

Page 271



Page 271



Page 271

TP 3 : gestion d’infrastructure

Page 275

Exercice 1 : Glisser-Déposer un élément

Page 275



Page 275



Page 276

Exercice 2 : localStorage

Page 285



Page 285



Page 285

Exercice 3 : géolocalisation

Page 293



Page 293



Page 294

Index

Page 307