Introduction 1. Avant-propos 9 2. Ressources 10 3. Historique 12 3.1 HTML/CSS/JavaScript 12 3.2 Sur les appareils mobiles 16 Particularité des sites mobiles 1. Introduction 19 2. Comportement des utilisateurs 20 3. Spécificités des appareils 21 3.1 Résolution 21 3.2 Tactile 22 3.3 Vitesse de connexion 25 3.4 Design général 26 4. Capacités des navigateurs 26 4.1 Extensions 27 4.2 Géolocalisation 28 4.3 Mode hors-ligne 28 5. Différence avec les applications natives 29 5.1 Accéder à toutes les fonctionnalités de l appareil 29 5.2 Les magasins d'application 30 5.3 Design adapté à l'appareil 31 5.4 Développement natif 32 1/7
5.5 Le meilleur des deux mondes 33 Premiers pas 1. Introduction 35 2. Première page HTML5 36 3. Émulateur pour applications mobiles 39 Créer un site mobile : HTML5 1. Introduction 45 2. Bonnes pratiques 46 2.1 Adapter le site à la taille de l'écran 46 2.2 Améliorer la visibilité 48 2.3 Écrire des pages légères 50 2.4 Gérer correctement le contenu 53 2.5 Simplifier la saisie 56 2.6 Penser à la navigation au doigt 57 2.7 Rendre le site accessible pour touset pour toute orientation 57 3. Doctypes 58 3.1 Écrire le doctype pour les sites classiques 58 3.2 Écrire le doctype pour un site mobile 61 3.3 Écrire le doctype HTML5 62 3.4 Utiliser la taille de son navigateur 65 4. Nouveaux tags en HTML5 67 2/7
5. Formulaires 79 5.1 Utiliser les nouveaux types 79 5.2 Utiliser les nouveaux attributs 82 5.3 Validation automatique des formulaires 84 5.4 Utiliser les éléments avancés 87 5.5 Créer un formulaire de contact 89 6. Mode hors-ligne 93 6.1 Installer le serveur Apache 94 6.2 Créer les pages HTML 98 6.2.1 Créer une page montrant neuf chiens perdus 98 6.2.2 Écrire la page de description d'un chien 103 6.3 Installer les pages sous Apache 106 6.4 Créer un manifest pour le mode hors-ligne 107 6.5 Aller plus loin 111 6.5.1 Affichage d'un message pour un site hors-ligne 111 6.5.2 NETWORK et FALLBACK dans le manifest 115 6.5.3 Gérer le mode hors-ligne avec JavaScript 117 Créer un site mobile : CSS3 1. Introduction 119 2. Bonnes pratiques 120 2.1 Optimiser la connexion avec le serveur 120 2.2 Gérer un défilement vertical 120 2.3 Faciliter la navigation au doigt 131 2.4 Gérer les images 133 2.5 Gérer correctement les tailles de caractères 142 3. Formulaires 145 3/7
4. Mises en page fluides 148 5. Media Queries 154 5.1 Où écrire les requêtes 156 5.2 Comment écrire les requêtes 157 5.3 Gérer l'écran en paysage et en portrait 160 5.4 Gérer une page pour smartphone, tabletteou ordinateur classique 166 Créer un site mobile : JavaScript 1. Introduction 175 2. Bonnes pratiques 176 2.1 Optimiser la connexion avec le serveur 176 2.2 Utiliser Ajax avec précaution 177 2.3 Écouter les événements 178 3. Méthodes spécifiques et/ou utiles pour mobiles 181 3.1 Gérer l'orientation du navigateur 181 3.2 Gérer l'accélération de l'appareil 187 3.3 Utiliser les Media Queries en JavaScript 189 3.4 Événements tactiles et gestuels 192 3.5 Valider les formulaires 196 3.6 Dynamiser le mode hors-ligne 200 3.7 Utiliser les Web Workers 207 4. Canvas 214 4.1 Créer son premier canevas 215 4.2 Créer d'autres objets en deux dimensions 218 4.3 Aller plus loin 223 4.4 Utiliser les autres technologies graphiques du HTML5 243 4.5 Conclusion sur les canevas 245 4/7
5. Géolocalisation 245 5.1 Localiser l'utilisateur 246 5.2 Suivre l'utilisateur 249 5.3 Un exemple avec Google Maps 251 6. WebSockets 255 Aller plus loin 1. Introduction 271 2. Gérer les flux audio ou vidéo 272 2.1 Utiliser la balise audio 272 2.2 Utiliser la balise video 277 2.3 Lire de l audio et des vidéos autrement en HTML5 281 3. Glisser-déposer 293 4. HTML5 Web Storage 298 4.1 Avant : utiliser les cookies 298 4.2 Comprendre le Session storage 299 4.3 Comprendre le Local storage 299 4.4 Stocker une donnée 300 4.5 Lire une donnée 301 4.6 Supprimer une donnée 301 4.7 Utiliser un exemple 301 4.8 Aller plus loin 307 Aller plus vite 1. Introduction 313 5/7
2. HTML5 314 2.1 Template HTML5 BoilerPlate 314 2.2 Template Gridless 316 2.3 52 framework 317 2.4 Framework Lungo.js 318 3. JavaScript 320 3.1 Wink toolkit 320 3.2 Librairie jqmobi 322 3.3 The-M-Project 323 3.4 jquery Mobile 324 3.4.1 Créer un Hello World 325 3.4.2 Réécrire une page plus complexe 328 Site normal vers site mobile 1. Introduction 335 2. Préparer le site 336 3. Modifier le site 344 3.1 Utiliser le même site pour une version mobile 344 3.2 Créer un site mobile supplémentaire 346 3.2.1 User-Agent 346 3.2.2 Media Queries 348 3.2.3 Lien sur notre page 348 Transformer un site en application native 1. Introduction 355 6/7
2. Possibilités actuelles 356 2.1 Enregistrer son site Internet 356 2.2 Sencha Touch 359 2.3 Titanium Mobile 361 3. PhoneGap (Apache Cordova) 362 3.1 Créer un Hello World pour Android 363 3.2 Créer un Hello World pour ios 372 3.3 Créer un Hello World via PhoneGap:Build 379 3.4 Créer une application native de notre site Internet 385 3.5 Aller plus loin 387 3.5.1 Utiliser l'appareil photo 388 3.5.2 Gérer les contacts du mobinaute 396 3.5.3 Utiliser le stockage de l'appareil 401 3.6 Conclusion 407 Index 409 7/7