Relever le défi du web mobile , livre ebook

Relever le défi du Web mobile


Bonnes pratiques de conception et développement


François Daoust

Dominique Hazaël-Massieux
Groupe Eyrolles
61, bd Saint-Germain
75240 Paris cedex 05
www.editions-eyrolles.com

CHEZ LE MÊME ÉDITEUR

D. G UIGNARD , E. R OBLES , N. S OREL , J. C HABLE . –  Programmation Android .
N°12587, 2010, 486 pages.

E. S ARRION . –  XHTML/CSS et JavaScript pour le Web mobile .
Développement iPhone et Android avec et iUI et XUI.
N°12775, 2010, 274 pages.

J. S TARK . –  Applications iPhone avec HTML, CSS et JavaScript .
Conversion en natifs avec PhoneGap .
N°12745, 2010, 190 pages.

P. C HATELIER .  – Objective-C pour le développeur avancé .
Le langage iPhone/iPad et Mac OS X pour les développeurs C++/Java/C#.
N°12751, 2010, 240 pages.

T. S ARLANDIE . –  Programmation iPhone OS 3 .
Conception, ergonomie, développement et publication .
N°12477, 2009, 276 pages.

A. B OUCHER . –  Ergonomie web illustrée .
60 sites à la loupe.
N°12695, 2010, 302 pages. « Design & Interface ».

B. M ORIN . –  L’iPhone OS 4 maîtrisé .
Pour utilisateurs avancés .
N°12746, 2010, 256 pages. « Sans Taboo ».

Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui menacée. En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris.

ISBN 978-2-212-12828-4
© Groupe Eyrolles

Le format ePub a été préparé par Isako www.isako.com à partir de l'édition papier du même ouvrage.
Table
Couverture
Titre
Licence
Table
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 microprocesseur
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
Écran résistif ou capacitif
Interfaces multitactiles
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 les 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
Via l’en-tête HTTP Content-Type
Via le prologue XML
Via <meta-http-equiv>
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 cont