HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

Transcription

1 Introduction 1. Avant-propos 9 2. Ressources Historique HTML/CSS/JavaScript Sur les appareils mobiles 16 Particularité des sites mobiles 1. Introduction Comportement des utilisateurs Spécificités des appareils Résolution Tactile Vitesse de connexion Design général Capacités des navigateurs Extensions Géolocalisation Mode hors-ligne Différence avec les applications natives Accéder à toutes les fonctionnalités de l appareil Les magasins d'application Design adapté à l'appareil Développement natif 32 1/7

2 5.5 Le meilleur des deux mondes 33 Premiers pas 1. Introduction Première page HTML Émulateur pour applications mobiles 39 Créer un site mobile : HTML5 1. Introduction Bonnes pratiques Adapter le site à la taille de l'écran Améliorer la visibilité Écrire des pages légères Gérer correctement le contenu Simplifier la saisie Penser à la navigation au doigt Rendre le site accessible pour touset pour toute orientation Doctypes Écrire le doctype pour les sites classiques Écrire le doctype pour un site mobile Écrire le doctype HTML Utiliser la taille de son navigateur Nouveaux tags en HTML5 67 2/7

3 5. Formulaires Utiliser les nouveaux types Utiliser les nouveaux attributs Validation automatique des formulaires Utiliser les éléments avancés Créer un formulaire de contact Mode hors-ligne Installer le serveur Apache Créer les pages HTML Créer une page montrant neuf chiens perdus Écrire la page de description d'un chien Installer les pages sous Apache Créer un manifest pour le mode hors-ligne Aller plus loin Affichage d'un message pour un site hors-ligne NETWORK et FALLBACK dans le manifest Gérer le mode hors-ligne avec JavaScript 117 Créer un site mobile : CSS3 1. Introduction Bonnes pratiques Optimiser la connexion avec le serveur Gérer un défilement vertical Faciliter la navigation au doigt Gérer les images Gérer correctement les tailles de caractères Formulaires 145 3/7

4 4. Mises en page fluides Media Queries Où écrire les requêtes Comment écrire les requêtes Gérer l'écran en paysage et en portrait Gérer une page pour smartphone, tabletteou ordinateur classique 166 Créer un site mobile : JavaScript 1. Introduction Bonnes pratiques Optimiser la connexion avec le serveur Utiliser Ajax avec précaution Écouter les événements Méthodes spécifiques et/ou utiles pour mobiles Gérer l'orientation du navigateur Gérer l'accélération de l'appareil Utiliser les Media Queries en JavaScript Événements tactiles et gestuels Valider les formulaires Dynamiser le mode hors-ligne Utiliser les Web Workers Canvas Créer son premier canevas Créer d'autres objets en deux dimensions Aller plus loin Utiliser les autres technologies graphiques du HTML Conclusion sur les canevas 245 4/7

5 5. Géolocalisation Localiser l'utilisateur Suivre l'utilisateur Un exemple avec Google Maps WebSockets 255 Aller plus loin 1. Introduction Gérer les flux audio ou vidéo Utiliser la balise audio Utiliser la balise video Lire de l audio et des vidéos autrement en HTML Glisser-déposer HTML5 Web Storage Avant : utiliser les cookies Comprendre le Session storage Comprendre le Local storage Stocker une donnée Lire une donnée Supprimer une donnée Utiliser un exemple Aller plus loin 307 Aller plus vite 1. Introduction 313 5/7

6 2. HTML Template HTML5 BoilerPlate Template Gridless framework Framework Lungo.js JavaScript Wink toolkit Librairie jqmobi The-M-Project jquery Mobile Créer un Hello World Réécrire une page plus complexe 328 Site normal vers site mobile 1. Introduction Préparer le site Modifier le site Utiliser le même site pour une version mobile Créer un site mobile supplémentaire User-Agent Media Queries Lien sur notre page 348 Transformer un site en application native 1. Introduction 355 6/7

7 2. Possibilités actuelles Enregistrer son site Internet Sencha Touch Titanium Mobile PhoneGap (Apache Cordova) Créer un Hello World pour Android Créer un Hello World pour ios Créer un Hello World via PhoneGap:Build Créer une application native de notre site Internet Aller plus loin Utiliser l'appareil photo Gérer les contacts du mobinaute Utiliser le stockage de l'appareil Conclusion 407 Index 409 7/7