DESIGN Préface d Élie Sloïm & Laurent Denis Corinne Schillinger Intégration web Les bonnes pratiques LE GUIDE DE SURVIE DE L INTÉGRATEUR! Groupe Eyrolles, 2012 ISBN : 978-2-212-13370-7
TABLE DES MATIÈRES 1 Avant-Propos 1 À qui s adresse ce livre? 1 Pourquoi ce livre? 2 Comment le livre est-il organisé? 4 Remerciements Partie 1 7 Bien préparer son projet Chapitre 1 9 Organiser son espace de travail 10 Arborescence : créer un dossier par projet 10 Avoir tous les éléments à portée de main 11 Organiser les répertoires en fonction du type de fichiers 11 Cas particulier : les images 13 Adopter une convention de nommage 14 Exemples de règles de nommage 15 Où placer la convention de nommage? 15 Qualité : mettre en place une checklist détaillée 16 Index des maquettes 16 Évaluation individuelle des pages 20 Évaluation transversale de l intégration 21 Rédiger la checklist au format Markdown Chapitre 2 23 S équiper des bons outils 24 Les éditeurs de code 24 Zen Coding 25 Produire du HTML 25 Produire du code CSS 26 Les préprocesseurs CSS 27 Les variables 28 Les déclarations imbriquées
X INTÉGRATION WEB : LES BONNES PRATIQUES 29 L héritage 31 Les fonctions mathématiques 32 Les inspecteurs de code 34 Édition des éléments HTML et des styles CSS 35 Débogage du code JavaScript 36 Validation du code HTML et CSS 37 Analyse des performances 37 Visualisation du temps de chargement 39 Le système de gestion de versions 39 Organiser logiquement les commits 40 Outils en ligne 41 Outils pour le HTML 41 CopyPasteCharacter 41 HTML-Ipsum 41 Outils pour les CSS 41 CSS3 Generator 41 ProCSSor 42 CSS Lint 42 Outils pour améliorer les performances 42 WebPagetest 42 SPOF-o-Matic 42 Ressources et outils pour la qualité web 43 Les bonnes pratiques Opquast 43 Opquast Reporting 43 Outils de vérification et de validation 43 Validateurs HTML et CSS 44 Contrôleur JavaScript : JSLint 44 Vérificateur de liens 44 Validateur pour les flux de syndication (Atom, RSS) 45 Ressources diverses 45 DocHub 45 Le wiki du W3C 45 JsFiddle Chapitre 3 47 Mettre en place l environnement de test 48 Quelles configurations tester? 48 Le panel de test 49 Le contexte projet
TABLE DES MATIÈRES XI 50 Le «cas» Internet Explorer 51 L affichage de compatibilité 53 Les installations multiples 53 IETester 53 IE Collection 54 Google Chrome Frame 55 Les services en ligne 55 Les services de captures d écran 55 Browsershots 55 BrowserLab 56 Les services d accès à distance 56 Sauce Labs 57 CrossBrowserTesting 57 La virtualisation 58 Des conditions de test réelles 58 Une grande flexibilité 59 Contraintes liées aux systèmes d exploitation 59 Windows 60 Mac OS 61 Linux 62 Les terminaux mobiles 62 WebKit 62 Android 63 iphone/ipad 63 Windows 64 Opera 64 Opera Mobile 64 Opera Mini 65 Les technologies d assistance 66 JAWS 66 NVDA 66 VoiceOver
XII INTÉGRATION WEB : LES BONNES PRATIQUES Partie 2 69 Élaborer un socle HTML solide Chapitre 4 71 Adopter HTML5 72 Prendre connaissance des différentes contraintes 72 L instabilité de la spécification 72 Les problèmes d accessibilité 77 Tirer parti des évolutions apportées 77 Une charpente HTML simplifiée 77 Un Doctype raccourci 78 Un en-tête de document allégé 78 Un gabarit minimaliste 79 Les éléments redéfinis 80 <a> 82 <cite> 82 <b> 83 <i> 83 <small> 84 Les nouveaux champs de formulaire 85 <input type="email" /> 85 <input type="tel" /> 85 <input type="url" /> 86 Les problèmes d implémentation 88 Exploiter les nouveaux attributs 88 Lier des valeurs à un élément grâce à data-* 89 Manipuler les données en JavaScript 90 Ajouter du sens avec les microdonnées 90 Un peu d histoire : RDFa et les microformats 92 Découvrir les attributs spécifiques 96 Quelle syntaxe adopter : HTML ou XHTML? 97 En résumé Chapitre 5 99 Concevoir les fondations 100 Gérer les différentes versions d Internet Explorer 100 Éviter l emploi de hacks CSS
TABLE DES MATIÈRES XIII 102 Éviter d avoir recours à une feuille de styles dédiée 102 Les problèmes de performance 102 Les problèmes de maintenance 103 S appuyer sur une classe CSS conditionnelle 105 Placer la classe à la racine de la page 106 Se limiter aux cas «utiles» 109 Préparer les inclusions CSS et JavaScript 109 Choisir la méthode la plus adaptée 109 Les instructions inline 110 Les instructions internes 111 Les instructions externes 112 Positionner les appels suivant leur nature 112 Les styles dans l en-tête de document head 114 Les scripts à la fin du contenu body 114 Prévoir le cas où JavaScript est désactivé 116 Ajouter les métadonnées dans l en-tête de document 116 La balise meta viewport 119 La balise meta description 119 En résumé Chapitre 6 121 Construire la structure 122 Organiser la page 122 Identifier les zones principales 123 Mettre en place le balisage 125 Faut-il préférer les classes aux identifiants? 126 Spécifier le rôle des éléments grâce à ARIA 126 À quoi sert ARIA? 127 Améliorer l accessibilité des interfaces riches 127 Doter les éléments de structure d une valeur sémantique 129 Ajouter les rôles au balisage en place 130 Mettre en place les liens d évitement 131 Valider la structure
XIV INTÉGRATION WEB : LES BONNES PRATIQUES Chapitre 7 133 Injecter le contenu 134 Faut-il utiliser un framework? 134 Les frameworks CSS 138 Les frameworks HTML 139 Mettre en place le balisage 139 Établir une hiérarchie de titres logique 140 Sélectionner les balises pour leur valeur sémantique 144 Éviter l emploi de <a href="#"> comme bouton d action 146 Le cas particulier de <br /> 148 Nommer les balises judicieusement 150 Éviter l ajout d éléments superflus 152 Utiliser des motifs déjà éprouvés 155 Valider le contenu Chapitre 8 157 Incorporer les images 158 Multiplicité des supports : les images adaptatives 159 L emploi de l élément noscript 162 Le kit «adaptative image» 163 L instruction max-width: 100%; 166 Choisir le bon format d image 167 Le format GIF 168 Gérer la transparence 169 Optimiser pour le Web 170 Le format PNG 170 PNG 8 174 PNG 24 175 Optimiser pour le Web 176 Le format JPEG 177 Optimiser pour le Web 180 Quel format choisir? 181 Renseigner correctement l alternative textuelle 182 Les liens et boutons images 185 Les représentations graphiques 187 Les images d illustration
TABLE DES MATIÈRES XV Partie 3 191 Habiller le contenu grâce aux CSS Chapitre 9 193 Réviser les bases 194 Les schémas de positionnement 194 La notion de flux 195 Positionnement flottant : la propriété float 195 Positionnement statique 195 Positionnement relatif 196 Positionnement absolu 197 Positionnement fixe 197 Quel positionnement choisir en priorité? 197 Erreur courante à éviter 198 La cascade CSS 198 L origine de la règle 198 La spécificité d une règle 199 La valeur!important 200 Les propriétés abrégées 201 Marges : margin et padding 202 Contours : outline 203 Bordures : border 203 Angles arrondis 205 Bordures en image 207 Listes : list-style 208 Polices de caractères : font 209 Arrière-plan : background 211 Arrière-plans multiples Chapitre 10 213 Définir une convention d écriture 214 Agencer les instructions 214 Éviter de regrouper plusieurs instructions sur une seule ligne 215 Aller à la ligne avant chaque instruction 217 Hiérarchiser les blocs de déclarations 217 Par ordre alphabétique
XVI INTÉGRATION WEB : LES BONNES PRATIQUES 218 Par ordre fonctionnel 220 Préciser le rôle des commentaires 220 Rédiger les commentaires au format CSSDoc 222 Les blocs d identification 223 Les blocs de documentation 224 Faire connaître la convention élaborée Chapitre 11 227 Organiser le code CSS 228 Préciser le contexte projet 228 Tenir compte de la nature du site 229 Choisir l approche «traditionnelle» pour les sites peu ou pas réactifs 232 Uniformiser les styles par défaut 233 Élaborer la charte typographique 234 Mettre en place la structure générale 235 Styler les composants internes 236 Ajouter les styles relatifs aux comportements JavaScript 236 Corriger l affichage sur les anciennes versions d Internet Explorer 236 Adapter l affichage grâce aux media queries 238 Appliquer le principe de l amélioration progressive pour un site adaptatif 240 Utiliser la version mobile comme base commune 241 Ajouter les styles destinés aux autres terminaux 241 Servir (si nécessaire) des images adaptées à la densité de pixels du terminal 241 Assurer la rétrocompatibilité sur les anciens navigateurs Chapitre 12 243 Prendre connaissance des facteurs d optimisation 244 Comprendre comment les règles CSS sont appliquées 244 Les règles CSS sont triées en fonction de leur type 245 Les sélecteurs sont lus de droite à gauche 247 Les sélecteurs courts sont les plus performants 248 Concevoir des règles efficaces 248 Limiter l emploi de règles universelles 249 Utiliser des sélecteurs courts et efficaces
TABLE DES MATIÈRES XVII 251 Éviter de redéfinir inutilement la valeur de certaines propriétés 252 Factoriser les instructions 255 Ne pas tomber dans l excès d optimisation 255 Diminuer le nombre de requêtes nécessaires à l affichage des images 256 Utiliser la technique des sprites 261 Employer les data URI en complément Chapitre 13 265 Élaborer les règles CSS 266 Se renseigner sur les propriétés autorisées 267 Employer les propriétés CSS3 à bon escient 267 Penser à spécifier tous les préfixes propriétaires 271 Fournir une alternative aux vieilles versions des navigateurs 274 Uniformiser les styles navigateurs 274 Réinitialiser les styles dans leur globalité 275 Appliquer des correctifs ciblés 276 Concevoir la charte typographique 276 Choisir une unité pour définir la taille de police et son interlignage 276 Éviter l utilisation du pixel 280 Préférer l emploi d unités relatives 285 Procéder avec méthode pour ajouter une police personnalisée 285 Vérifier les droits accordés par la licence 286 Contrôler le rendu de la fonte sur les différentes configurations 288 Décliner la fonte en plusieurs formats 294 Élaborer le bloc d instructions 301 Rendre visible la prise de focus 304 Le cas particulier des liens images 306 Organiser les blocs de structure et styler les composants 307 Ajouter les règles relatives aux comportements JavaScript 308 Les subtilités de l approche «mobile first» 308 Utiliser la version mobile comme point de départ 311 Ajouter les styles destinés aux autres terminaux 313 Masquer certains éléments de contenu aux terminaux mobiles 313 Définir des points d arrêt pour passer d une version à l autre 314 Servir (si nécessaire) des images adaptées à la densité de pixels du terminal
XVIII INTÉGRATION WEB : LES BONNES PRATIQUES 318 Assurer la rétrocompatibilité sur les anciens navigateurs 318 Les solutions JavaScript 319 La solution CSS pour Internet Explorer 320 Élaborer la feuille d impression 321 Appliquer les styles génériques 322 Masquer les éléments superflus 323 Linéariser le contenu 323 Ajouter quelques règles complémentaires Chapitre 14 327 Contrôler et déboguer 328 Contrôler le rendu 328 Prendre l affichage d un navigateur moderne comme référence 328 Surveiller le rendu des navigateurs obsolètes pendant le développement 329 Résoudre les problèmes détectés 330 Valider le code 331 Identifier l élément incriminé 332 Isoler la ou les instructions problématiques 333 Corriger le problème 333 Vérifier le rendu sur Internet Explorer par ordre de version décroissant 335 Tester les gabarits 335 Détecter certaines erreurs HTML grâce une feuille de débogage 337 Simuler l indisponibilité des ressources 337 Les images 337 JavaScript 338 Tester la navigation clavier 338 Agrandir la taille de caractères Partie 4 345 Préparer la livraison (ou la mise en ligne) Chapitre 15 347 Peaufiner les détails 348 Réaliser les dernières optimisations
TABLE DES MATIÈRES XIX 348 Les images 349 Le code CSS et JavaScript 349 Concaténer les différents fichiers 350 Minifier les fichiers obtenus 351 Proposer quelques règles de configuration serveur 352 Configurer les en-têtes HTTP 353 Indiquer que le codage de caractères utilisé est utf-8 354 Renseigner le type MIME de certains fichiers 355 Autoriser l utilisation de fontes hébergées sur un domaine tiers 356 Interdire le mode de compatibilité sur Internet Explorer 357 Optimiser les performances 357 Compresser les fichiers 358 Contrôler la date d expiration d une ressource mise en cache 360 Supprimer les ETags 361 Renforcer les paramètres de sécurité 361 Restreindre l accès aux fichiers sensibles 362 Interdire l exploration des répertoires n ayant pas d index 362 Éviter certains problèmes de contenu dupliqué 363 Personnaliser les pages d erreur 365 Annexes 367 Annexe A1 368 Annexe A2 369 Annexe B 378 Annexe C 380 Annexe D 384 Annexe E 389 Index