Sommaire du livre : Relever le défi du Web mobile

Avant-propos
- Pourquoi ce livre ?
- À qui s’adresse ce livre ?
- Comment le livre est-il organisé ?
  - Apartés
  - Compléments en ligne
- Remerciements
1 Le Web mobile, qu’est-ce que c’est ?
- Le Web mobile, un autre Web ?
  - Un peu d’histoire : le WAP
  - Le Web mobile
  - Terminal mobile
- Les écueils spécifiques au monde mobile
  - Contraintes matérielles
  - Un contexte différent
  - Un domaine fragmenté
- Les opportunités offertes par la plate-forme mobile
  - Disponibilité
  - Personnalisation
  - Innovations
    - Interactions tactiles
    - Mouvements et déplacements
    - Interactions vocales
    - Un œil sur le monde
    - Géolocalisation
- Récapitulons
2 Le monde des navigateurs mobiles
- Dissection d’un terminal mobile
  - L’écran
    - Résolution et taille physique
    - Luminance, contraste et couleurs
  - Le micro-processeur
  - La mémoire
  - Les capacités de stockage
  - La batterie
  - Le clavier
    - Les claviers physiques numériques
    - Les claviers physiques alphanumériques
    - Les claviers virtuels
  - Le système de pointage
    - Le curseur
    - Le joystick
    - Les interactions tactiles
  - Le système d’exploitation
  - Capteurs en tout genre
    - Du GPS aux NFC
    - Le mobile à la pointe
  - Appareils non téléphoniques
  - Classification des téléphones
- La jungle des navigateurs mobiles
  - Navigateurs monolithiques
    - WebKit, roi protéiforme
    - Opera
    - Le navigateur BlackBerry
    - Internet Explorer Mobile
    - NetFront
    - Obigo
    - Firefox mobile
  - Les navigateurs légers
    - Opera Mini
    - Bolt
    - Skyfire
    - Autres navigateurs légers
- Parts de marché
  - Smartphones versus feature phones
  - Web classique versus Web mobile
  - Des disparités régionales
  - Éviter de reproduire l’Histoire
- Classification des navigateurs mobiles
  - Les navigateurs de base
  - Les navigateurs web de première génération
  - Les navigateurs web de dernière génération
  - Les inclassables
- Récapitulons
3 Quels formats pour le Web mobile ?
- HTML, XHTML : histoires de familles
  - Document Type
  - Media Type
  - Syntaxe XML
  - HTML 5 sur les téléphones
  - Vérification d’un document HTML
    - Pourquoi valider ?
    - Les outils à votre disposition
  - En résumé…
- CSS, feuilles de styles en cascade
  - Le niveau monte
  - CSS sur les mobiles
  - Vérification d’un document CSS
  - En résumé…
- JavaScript, à utiliser avec précaution
  - JavaScript et navigateurs mobiles
  - Les outils à votre disposition
- Images
  - Images bitmap : JPEG, GIF et PNG
  - Images vectorielles : Flash ou SVG ?
- Codage des caractères
  - Les systèmes de codage des caractères
  - Le codage de caractères en HTML
  - Codage de caractères et affichage
    - Déclaration du codage de caractères
    - Prise en charge par les navigateurs
    - Polices de caractères
  - Les outils à votre disposition
- Web, mensonges et vidéos
  - Avant HTML 5 : le règne des plug-ins
  - La balise <video>
  - La vidéo dans les mobiles
- Autres formats et extensions
  - Des extensions pour améliorer son navigateur…
  - Types d’extensions
  - Flash et PDF
  - Autres extensions : ActiveX, applets Java et Silverlight
  - … mais pas dans les mobiles !
    - Éviter Flash, Silverlight et applets Java
    - PDF : est-ce bien raisonnable ?
  - En résumé…
- Récapitulons
4 Les bases d’un bon site web mobile
- Retour aux sources de la simplicité
  - Privilégier une présentation linéaire
  - Ne pas chercher les problèmes inutiles
  - Images : la taille compte !
    - Préciser la taille avant toute chose
    - Des images aux mensurations parfaites
  - Soigner la navigation
    - Le juste équilibre
    - Une navigation cohérente
    - Touches de raccourci : prudence !
  - Contenu : aller droit au but
  - Limiter la longueur des pages
- S’adapter aux interactions utilisateur
  - Liens : cliquer n’est pas jouer
  - Du bon usage des formulaires
    - Limiter les entrées manuelles
    - Guider la saisie
    - À chaque champ son étiquette
    - Compact et à suivre
  - Adresses et codes barres 2D
- Personnaliser l’expérience utilisateur
  - Authentification de l’utilisateur
    - Nom d’utilisateur et mot de passe
    - Contrôler sa ligne en mangeant des cookies
    - Compléter les liens avec un jeton de session
  - Mémoriser les préférences
  - Combler le trou de la sécu
  - Vie privée, vie publique
- Adresse : .mobi ou m. ?
  - Trouver la version mobile d’un site web
    - Saisie de l’adresse
    - Référencement dans les moteurs de recherche
    - Partage de liens et de signets
  - L’utilisateur est roi
- Récapitulons
5 Adaptation
- Adapter le contenu au terminal
- Adaptation côté client
  - Amélioration progressive
  - Mécanismes HTML
    - La balise object
    - La balise <meta name= »viewport »>
  - CSS : adapter les styles au terminal
  - JavaScript
- Adaptation côté serveur
  - Dis-moi tes en‑têtes HTTP, je te dirai qui tu es
  - Reconnaître les capacités du client : Accept
  - Identifier le client
    - Les mensonges de l’User-Agent
    - X-WAP-Profile et le profil d’agent utilisateur (UAProf)
  - Les bases de description des terminaux
  - Méthodes d’adaptation côté serveur
    - Adaptation en fonction des en‑têtes Accept
    - Réécriture d’URL au niveau du serveur web
    - Utilisation de langages de script
  - Les bonnes manières de l’adaptation côté serveur
- Entre le client et le serveur : un réseau intrusif
  - Adaptation par les opérateurs réseau
  - Adaptation par les moteurs de recherche
  - Se prémunir du réseau
- Récapitulons
6 CSS : faites-le avec du style
- Le style pour les petits et l’écran
  - Le bon pixel et le mauvais pixel
    - Les unités en CSS
    - La fenêtre d’affichage : pixels réels et pixels CSS
    - Taille de la fenêtre et zoom initial (viewport)
  - Insister sur la compacité
  - Privilégier la linéarité
    - Largeur des blocs
    - Blocs flottants et blocs positionnés
  - Accentuer les contrastes
  - En résumé…
- Des styles adaptés au contexte
  - Cibler un type de média donné
    - Déclarer un type de média
    - @media handheld : une utilité limitée
  - Les requêtes de média pour un ciblage plus précis
    - width ou device-width : telle est la question
    - Détecter l’orientation du terminal
- Quelques techniques d’adaptation
  - « Le retour de la feuille de styles mobile »
  - Cibler les navigateurs de bureau plutôt que les navigateurs mobiles
  - Adaptation côté serveur : pour CSS aussi !
  - Prévoir l’avenir
- Tirer parti de CSS
  - Plusieurs tailles d’images
  - Un menu voyageur
- Récapitulons
7 JavaScript, un ami qui vous veut du bien
- Le Bon – Techniques utiles sur les mobiles
  - JavaScript en mode strict
  - Séparer pour mieux régner
  - Merci de frapper avant d’entrer
  - Validation côté client
  - Le meilleur <script> pour la fin
  - Hors du temps : mode asynchrone
  - JSON et la Toile sont d’or
  - Du JavaScript dans un document XHTML
  - Stocker du contenu localement
- La Brute – Écueils à éviter
  - Une bibliothèque qui brûle
  - Processeur : le tic-tac du réveil empêche de dormir
  - Le DOM est gourmand
  - Styles : repeindre, c’est fatigant
  - Variables : les scripts sont plus rapides dans le var
  - Le doigt ou la souris : événements onmouse…
  - Événements de groupe
  - Sus à l’interprète ! Vive l’anonymat !
- Le Truand – Jongler avec les règles
- Récapitulons
8 Optimisation : petit, c’est costaud
- Réseaux mobiles : vitesses et coûts
  - Caractéristiques des réseaux mobiles
    - Des petits paquets
    - Bande passante
    - Latence
    - Coûts
    - Réseau et batterie
    - Portée et continuité
    - Un détour au ski
  - Les réseaux de nouvelle génération
  - En résumé…
- Tirer parti du cache
  - Durée de validité : ce message s’autodétruira dans…
  - Numéroter les versions
  - Vérifier le bon usage des directives de cache
  - Cachez ce script que je ne saurais revoir
  - Passer par un CDN pour cacher votre contenu
  - Le manifeste HTML 5 pour simplifier la donne
- Requêtes HTTP : travailler moins pour gagner plus
  - Combien de requêtes pour une page web ?
  - Savoir mélanger les ingrédients
    - Combiner les scripts
    - Combiner les feuilles de styles
    - Des images et des lutins (sprites)
    - HTML, styles et scripts ensemble
    - Des images vectorielles intégrées à HTML
    - Du contenu binaire dans des adresses web
  - Trouver la bonne formule de réduction
    - Le tout-en-un
    - Séparer les torchons et les serviettes
  - Réduire les échanges annexes
    - Minimiser les redirections
    - Supprimer le rafraîchissement automatique
    - Un mot sur les documents multipart
    - Répartir le contenu sur plusieurs noms de domaine
  - Retour sur le site de la librairie Eyrolles
- La chasse aux bourrelets : supprimer le superflu
  - Il faut éliminer !
  - Formats textuels allégés
    - Espaces et commentaires
    - Le HTML light
    - Une CSS mince et stylée
    - Affiner un JavaScript bedonnant
    - Mincir sans effort : les outils de minimisation
  - Les cookies, ça fait grossir
  - Formulaires aux acides gras saturés
    - Noms des champs
    - Champs optionnels et non-modifiés
    - Validation côté client
    - Champs cachés
  - Optimisation des images
    - Le JPEG en bikini
    - Un PNG sans cellulite
- Compression
  - Maigrir sans effort
    - Compression de contenu en PHP
    - Configurer Apache pour servir du contenu statique compressé
  - Limites de la compression à la volée
- Récapitulons
9 Bientôt dans un portable près de chez vous…
- De nouvelles interactions
  - Géolocalisation
  - Interactions audio
  - Photo et vidéo
  - Les API JavaScript se ramassent à la pelle
- Applications web et widgets
  - Applications natives contre Web mobile
  - Technologies web et applications natives
- Un monde à inventer