Les bonnes pratiquesmultimedia.fnac.com/multimedia/editorial/pdf/9782212133707.pdf · les bases, de formaliser et de déterminer ce qui est de l’ordre du savoir minimal de l’intégrateur,

Corinne Schillinger

Intégration webLes bonnes pratiques

LE GUIDE DE SURVIE DE L’ INTÉGRATEUR !

DESIGN

Préface d’Élie Sloïm & Laurent Denis

© Groupe Eyrolles, 2012ISBN : 978-2-212-13370-7

PRÉFACERappelez-vous. Il y a quelques années, la plupart des webmasters (car on les appe-lait encore comme cela) utilisaient des logiciels comme Dreamweaver, Frontpage ou Hotmetal pour créer leur sites Internet. Ces logiciels WYSIWYG (What You See Is What You Get) permettaient de faire du code plus ou moins propre pour un navigateur ultra-majoritaire, en l’occurrence, Internet Explorer.

À cette époque, l’intégrateur n’existait pas et le webmaster n’avait pratiquement besoin d’aucune compétence spécifique ni d’aucune formation : il était en pleine invention de son métier, de ses outils et de ses technologies.

C’est alors que sont arrivées successivement les feuilles de styles et la séparation du fond et de la forme. Le processus de création de site web s’est alors découplé en deux phases successives : le design puis l’intégration. Ces deux activités ont longtemps été assumées par des personnes aux profils similaires, avant que chacun des deux métiers ne se constitue progressivement.

Intégrateur front-end est aujourd’hui un vrai métier et Corinne Schillinger nous le prouve à travers l’exposé détaillé de son utilisation des technologies, de ses méthodes, approches, processus, standards et pratiques. Il s’y dessine finalement un véritable écosystème, un ensemble de relations entre métiers du Web, où l’intégrateur joue un rôle clé.

L’intégrateur a une fonction pivot entre plusieurs compétences. On pense immédiate-ment au découpage et à l’intégration HTML-CSS, ainsi qu’au développement JavaScript côté client. En sus, on lui demande de maîtriser d’autres compétences beaucoup plus variées : la gestion de la compatibilité multinavigateur, la maîtrise des questions de performances, d’expérience utilisateur, la prise en compte d’ARIA en matière d’accessi-bilité, le choix de recourir ou non à HTML5, etc.

L’intégrateur doit jongler avec les exigences du référencement, de la performance, de l’ergonomie, de l’accessibilité, de la typographie, etc. Il doit en outre gérer la diversifica-tion des médias et des modes d’interaction : desktop, mobile, tablettes. Bientôt, il devra certainement assumer la généralisation du tactile.

En tant que « qualiticiens », nous ne pouvons que confirmer cet état de fait : lorsque nous travaillons sur les bonnes pratiques de la qualité web, bon nombre d’entre elles se concentrent sur la phase d’intégration.

INTÉGRATION WEB : LES BONNES PRATIQUESVI

L’intégrateur front-end doit donc savoir maîtriser un grand nombre de standards, de bonnes pratiques, de compétences, de méthodes, aussi bien du point de vue technique que managérial. Il était plus que temps de rassembler tous ces éléments dans un livre.

Jusqu’à présent, les ouvrages existants se concentraient principalement sur des sujets techniques, comme CSS, HTML, JavaScript. Là est la force de l’auteur : en plus de poser les bases, de formaliser et de déterminer ce qui est de l’ordre du savoir minimal de l’intégrateur, elle a su dépasser la technique pour aborder ces sujets sous l’angle métier.

La publication de livres comme celui de Corinne Schillinger est l’un des nombreux signes que le processus d’industrialisation est en marche. Alors, oui, la connaissance technique est fondamentale, mais, non, elle ne suffit pas. Des experts techniques, il en existe beaucoup, mais des personnes qui comprennent la philosophie qui sous-tend les techniques et la façon de les déployer sont beaucoup plus rares. C’est pourquoi il faut aller beaucoup plus loin.

Aujourd’hui, nous entrevoyons le moment où l’intégrateur va enfin devoir aller au-delà de la technique. Il est désormais celui qui doit accorder des violons souvent discordants, entre les exigences du design, du référencement, de la DSI... Il commence à en acquérir les moyens avec l’industrialisation du Web. Il est appelé à devenir de plus en plus un manager de solutions, appuyé sur une maîtrise rigoureuse des techniques et surtout des clés de décision.

D’une certaine manière, au même titre que les autres professionnels du projet web, l’intégrateur devient un véritable gestionnaire de risques. Les risques auxquels il doit faire face et qu’il sera de plus en plus amené à gérer sont particulièrement critiques pour les clients et les utilisateurs finaux.

Avec cette évolution, l’intégrateur se servira différemment de ses références techniques actuelles. Il aura rarement à produire du code : le cœur de son métier sera de choisir des solutions. Il n’est déjà plus un simple exécutant opérationnel : il lui revient de plus en plus souvent d’arbitrer sur le choix des formats, sur celui d’un framework JavaScript, voire d’un framework CSS, ou même sur la décision quant au CMS à utiliser.

Au terme de cette maturation du métier, sa compétence proprement technique pourra alors être réservée aux seuls cas où une certaine forme d’expertise sera requise pour des solutions sur mesure.

VII PRÉFACE

Gageons que si le mouvement d’industrialisation des métiers du Web se poursuit, il faut s’attendre à l’émergence de livres de référence sur chacun des principaux métiers du Web. Pour ce qui est du métier d’intégrateur, l’ouvrage que vous avez entre les mains sera à l’évidence l’un de ces livres de référence et, au minimum, un jalon important dans l’histoire de ce métier en évolution permanente.

Élie Sloïm (Président de Temesis, Directeur des projets Opquast et Openweb)

et Laurent Denis (Expert accessibilité)

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

TABLE DES MATIÈRES

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

XI TABLE DES MATIÈRES

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 PRATIQUESXII

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

XIII 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

XV TABLE DES MATIÈRES

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

XVII TABLE DES MATIÈRES

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

XIX TABLE DES MATIÈRES

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

AVANT-PROPOSAvant d’entrer dans le vif du sujet, permettez-moi de vous présenter cet ouvrage en quelques mots.

À qui s’adresse ce livre ?Ce livre s’adresse à tous les intégrateurs, professionnels ou amateurs, qui ont à cœur de réaliser une intégration qui soit aussi propre, accessible et performante que possible. Il se veut clair et exhaustif, sans toutefois reprendre les bases fondamentales des langages HTML et CSS. De ce fait, il risque d’être assez difficile d’accès aux débutants souhai-tant découvrir les joies du code, car il requiert une connaissance minimale de ces deux langages pour pouvoir être pleinement exploité.

Malgré tout, il cible un public relativement large puisqu’il est destiné à toutes les personnes qui ont envie de produire un code de qualité : les étudiants souhaitant appro-fondir leurs cours devraient y trouver leur compte tout autant que les professionnels aguerris désirant mettre leurs connaissances à jour.

Pourquoi ce livre ?La qualité globale d’un site repose bien souvent sur des points de détail qui ont un impact positif ou négatif sur son utilisabilité, son accessibilité et ses performances d’affi-chage. Et bien que les outils et techniques aient considérablement évolué ces dernières années, l’intégration est une discipline qui reste encore très artisanale : son résultat fluctue en fonction des connaissances de l’intégrateur.

Or, bien souvent, il ne manque pas grand-chose pour que la qualité de l’intégration soit considérablement améliorée : spécifier un changement de langue, prévoir l’indisponibi-lité d’une ressource ou tirer parti de l’héritage en sont quelques exemples.

Forte de ce constat, j’ai mûri l’idée de créer une sorte de recueil de bonnes pratiques de l’intégration web. Mais ce n’est qu’une fois le travail rédactionnel commencé que je me suis rendue compte de l’ampleur réelle de la tâche. Car même si certains usages sont considérés comme étant de bonnes pratiques, beaucoup restent à la discrétion du développeur : l’intégration n’est pas une science exacte, elle dépend d’une multitude de paramètres qui en font une discipline aussi complexe qu’intéressante.

2 INTÉGRATION WEB : LES BONNES PRATIQUES

L’écriture de ce livre aura donc été l’occasion d’une remise en cause de mes méthodes de travail. Le plus difficile aura été d’évaluer la pertinence réelle de ma méthode, car même si elle me convenait parfaitement, rien ne pouvait me laisser penser qu’il s’agisse de la « meilleure » façon de faire. Je me suis donc posée de nombreuses questions, ai discuté avec d’autres professionnels, et ai souvent changé d’avis devant la justesse des argu-ments avancés. Vous tenez entre vos mains le fruit de ces dix-huit mois de recherches, de questionnements, d’introspection et de discussions passionnantes avec des intégra-teurs de tous bords.

Durant ce laps de temps, la technique a évolué et des méthodes qui étaient autrefois conseillées sont aujourd’hui considérées comme de mauvaises pratiques : dix-huit mois dans un domaine où les techniques évoluent constamment, c’est beaucoup. Et s’il s’agit-là de la première version papier, sachez que certaines parties en sont au moins à leur troisième mise à jour : je n’ai eu de cesse de réactualiser le contenu pour assurer la véra-cité des informations qui y figurent.

C’est pourquoi j’espère sincèrement que ce livre répondra à vos attentes. S’il vous permet d’approfondir de nouvelles techniques, de vous mettre à niveau, de prendre connais-sance de certains effets de bord indésirables ou de découvrir une nouvelle méthodo-logie, j’aurai gagné mon pari.

Comment le livre est-il organisé ?Ce livre est organisé dans un ordre logique qui respecte les différentes étapes devant être effectuées pour mener à bien une intégration. Ces dernières sont réparties en quatre parties que sont la préparation en amont, la conception du contenu HTML, la mise en forme CSS et la préparation des livrables.

Vous aurez certainement remarqué qu’aucune partie n’est dédiée à JavaScript. Pourtant, il y aurait de quoi faire : un livre entier pourrait même être consacré à ses bonnes pratiques de développement. Mais je n’estime pas avoir les compétences suffisantes pour pouvoir l’aborder avec le degré d’expertise que je souhaiterais. C’est pourquoi je préfère laisser cette tâche à un développeur JavaScript qui saura le faire bien mieux que moi.

Pour autant, cela ne signifie pas que la question de son utilisation ne soit pas abordée : son emploi impose de nombreuses contraintes qui sont évoquées tout au long de ce livre. Car même si l’intégrateur ne développe pas lui-même les fonctions, il se doit de

3 AVANT-PROPOS

maîtriser les bases du langage et de pouvoir concevoir certaines interactions à l’aide (ou non) d’un framework.

La méthode présentée ici n’a pas vocation à devenir universelle : je doute d’ailleurs qu’aucune méthode ne fasse jamais cette unanimité. Elle tend plutôt à être aussi exhaus-tive que possible et aborde toutes les étapes qui peuvent affecter la qualité finale de l’intégration. C’est pourquoi ce livre débute avec l’organisation de l’espace de travail et se termine avec la préparation des livrables. Tout au long de son développement, vous retrouverez ces notions d’accessibilité, de sémantique, de lisibilité, de maintenabilité et de performance qui composent ce tout qu’est la qualité web.


REMERCIEMENTSSi je m’écoutais, je remercierais la terre entière pour la chance qui m’a été donnée de concrétiser cette opportunité. Je commencerais d’ailleurs par ma maman, sans qui rien de tout ça n’eut été possible. Mais s’agissant d’un livre professionnel, je crains malheu-reusement que cela ne soit guère adapté... Je vais donc me restreindre aux personnes qui ont donné de leur temps et n’ont pas hésité à partager leur expertise pour que ce livre puisse voir le jour. Si cet ouvrage vous plaît, c’est aussi à toutes ces personnes que vous le devez : sans leurs remarques constructives, leurs encouragements et leur dispo-nibilité, vous n’auriez certainement pas ce livre entre les mains.

Occasionnels ou au long court, les relecteurs ont eu la lourde de tâche de vérifier l’exac-titude de mes assertions. Ils ont relevé les erreurs, approximations et incohérences qui avaient échappé à ma vigilance, et m’ont conseillé de nombreux ajouts très pertinents. C’est pourquoi je tiens à remercier chaleureusement :

• Anthony Ricaud, Laurent Denis, Loïc Mathaud et Sébastien Delorme, pour avoir gen-timent accepté de se prêter au jeu ;

• Vincent Valentin, qui a trouvé un peu de temps entre deux biberons pour me relire et répondre à mes interrogations diverses et variées ;

• Jérémie Patonnier, pour avoir passé de longues heures, tard le soir, à relire plusieurs chapitres et pour m’avoir fait de nombreux retours toujours très judicieux, bien qu’un peu « bruts de décoffrage » parfois ;

• Et enfin, Marie Alhomme qui a accepté de relire ce livre dans son intégralité. Je la re-mercie du fond du cœur pour tout le temps qu’elle y a consacré et les longs moments passés à discuter détails techniques, méthodologie et bonnes pratiques.

Dans un registre différent, je tiens également à remercier :

• Noëlie Amiot pour ses éclairages sur certains points techniques ;• Élie Sloïm et Laurent Denis qui m’ont fait l’honneur de rédiger à quatre mains la préface

de cet ouvrage ;• Virginie Caplet, une graphiste de talent, qui a accepté — pour mon plus grand bonheur —

de réaliser les magnifiques illustrations qui introduisent les parties principales de ce livre ;• les éditions Eyrolles pour m’avoir fait confiance, et plus particulièrement Karine Joly qui

a fait preuve d’une patience sans borne, acceptant sans mot dire mes retards de livrai-son et n’ayant de cesse de m’encourager jusqu’à la dernière minute ; Sophie Hincelin et

5 REMERCIEMENTS

Géraldine Noiret qui ont repris le projet juste avant sa finalisation et se sont démenées pour le boucler dans les temps ;

• Et surtout Yannick — mon homme — qui m’a incitée à me lancer dans cette aventure, soutenue de la première ligne jusqu’à la dernière relecture, rassurée quand j’étais en pleine phase de doute, et supportée même lorsque des nuits bien trop courtes me rendaient absolument exécrable. Si j’ai réussi à mener ce projet à son terme, c’est surtout grâce à lui.

Une arborescence logique et facilement compréhensible, une règle de nommage appliquée à l’ensemble des composants ou encore la présence d’une fiche de suivi à la racine du projet participent pleine-ment à la qualité globale du site et contribuent à simplifier son évolu-tion future. Ainsi, même s’il n’existe aucune règle absolue à suivre, ni aucune organisation qui soit parfaite, il est important de réfléchir à la façon dont le projet va être organisé, avant de rédiger la moindre instruction.

Dans ce chapitre

• Arborescence : créer un dossier par projet

• Uniformité : adopter une convention de nommage

• Qualité : mettre en place une checklist détaillée

1Organiser son espace de travail

10 PARTIE 1 – B IEN PRÉPARER SON PROJET

ARBORESCENCE : CRÉER UN DOSSIER PAR PROJET

Avoir tous les éléments à portée de mainLa première chose à faire avant de démarrer une nouvelle intégration est de préparer l’espace de travail. L’idéal est de rassembler tous les éléments relatifs à un projet dans un même dossier ou répertoire. Il suffit simplement d’organiser à l’intérieur de celui-ci une arborescence claire dans laquelle viendront se placer les documents. En centrali-sant ainsi toutes les données, vous ne perdrez pas de temps à chercher des éléments manquants ou à vérifier que vous vous référez à la dernière version des spécifications. De même, un collègue arrivant sur le projet en cours de route aura une vue exhaustive du projet et de son avancée.

Bien sûr, chaque intégrateur a sa façon de faire et son propre système d’organisation. L’essentiel étant qu’il s’y retrouve et qu’une personne tierce ne soit pas perdue dans l’arborescence. Voici par exemple une classification en trois dossiers, qui permet de répartir simplement tous les éléments du projet.

• Le dossier sources accueille les documents utiles à l’intégration. Il peut s’agir du code à reprendre, des maquettes à intégrer ou encore des textes à publier. Suivant le nombre d’éléments (et surtout de maquettes), il peut être utile d’avoir recours à des sous-dossiers.

• Le dossier spec recueille l’ensemble des spécifications fonctionnelles du projet. Y prennent place le cahier des charges, le zoning, l’arborescence ou encore les demandes d’évolution.

• Enfin, le dossier www est réservé à l’intégration proprement dite. Il constitue la racine du site web et contient l’ensemble des éléments qui vont être livrés ou mis en ligne, au contraire des sources et des spécifications qui ne seront pas poussées en production.

Certains préfèrent, pour plus de clarté, rassembler l’ensemble des ressources en ligne. Indispensable pour les gros projets (longs de plusieurs mois, sur lesquels interviennent plusieurs personnes en parallèle), cette organisation présente le défaut de nécessiter une connexion Internet lorsque vous travaillez. Ce qui n’est pas toujours le cas si vous êtes en situation de mobilité ou si vous faites les frais d’une coupure temporaire.

Glossaire Les composants d’un projet

Chaque nouvelle intégration amène son lot d’éléments à analyser. Détaillant le projet dans son ensemble ou traitant de points particuliers, les spécifications sont généralement composées de plusieurs documents : présentations, textes, images, graphiques...

Le cahier des charges (ou brief) est sans conteste l’élément le plus important de toutes les spéci-fications : il sert de fil conducteur au projet et fait référence en toute situation. Il décrit entre autres les objectifs à atteindre, la forme du livrable, les critères d’évaluation, les contraintes à respecter, le délai de réalisation et, bien sûr, le résultat attendu.

11 1 – ORGANISER SON ESPACE DE TRAVAIL

L’arborescence (ou architecture) se concentre uniquement sur l’organisation du site. Généralement représentée sous la forme d’un arbre inversé, elle permet de visualiser rapide-ment l’agencement des pages et les interactions qui les lient les unes aux autres.

Le zoning schématise l’organisation générale d’une page en identifiant les différentes zones à l’aide de blocs (voir l’annexe A1). Il permet d’illustrer le fonctionnement global et de dégager les zones de contenu principales. Chaque zoning s’attachant à un seul type de page (page d’accueil, page de contenu…), il est fréquent d’en avoir plusieurs pour un même site.

Établi à partir du zoning, le wireframe (ou maquette fil de fer) met en avant le contenu. Les zones précédemment identifiées sont remplies et leur contenu est organisé de la manière la plus fonctionnelle et ergonomique possible (voir l’annexe A2).

Partant de l’agencement validé dans le wireframe, le graphiste imagine et réalise un univers propre à la marque qui véhicule ses valeurs et son identité. Il s’agit de la maquette graphique.

Organiser les répertoires en fonction du type de fichiersUne fois que l’arborescence est en place et que les éléments sont répertoriés, il convient de préparer le dossier d’intégration (www dans notre exemple).

Il arrive que l’organisation générale soit fournie par le client. C’est souvent le cas lorsqu’il s’agit d’une refonte et qu’il n’est pas envisageable de modifier le système de dossiers utilisé. En l’absence de consignes particulières, il est important de regrouper les fichiers suivant leur type et leur fonction.

Bien que certains usages se soient mis en place, il n’existe aucune règle stricte concer-nant le nommage des éléments. Ainsi, il est fréquent de rencontrer plusieurs approches différentes : l’emploi de noms très courts (i pour les images, s pour les scripts, etc.), de noms complets (images, scripts, etc.) ou encore de noms abrégés (img, js, etc.). Au final, les noms utilisés importent relativement peu, du moment qu’ils sont courts et explicites. C’est pourquoi la tendance générale consiste à privilégier les appellations raccourcies et à utiliser l’extension de fichier comme nom de dossier : css, js, swf ou encore flv. Cette façon de faire est un bon compromis entre les performances et la lisi-bilité des noms abrégés.

Cas particulier : les images

Au cours d’une intégration, trois types d’images sont à distinguer : les images de contenu, les images décoratives et les images temporaires ou contribuables.

Les images de contenu

Porteuses de sens, elles font partie intégrante du code HTML : c’est le cas d’un logo ou d’une icône de menu. Généralement, elles sont enregistrées dans un dossier img à la racine du dossier d’intégration. Bien sûr, ce dernier peut contenir l’un ou l’autre sous-


dossier (comme icone ou picto), pour regrouper certaines images en fonction de leurs similitudes.

Les images décoratives

Utilisées pour la mise en forme du document, elles sont appelées depuis le code CSS. Certains les enregistrent dans un dossier img à la racine de css. Une autre manière de faire consiste à les placer dans un dossier theme directement dans www. Ainsi, il suffit d’ajouter un sous-dossier pour chaque nouveau thème ou déclinaison saisonnière (comme les fêtes de Noël ou la période des soldes).

Bonne pratique Utiliser les classes et identifiants comme noms d’images

Nommer les images avec les noms de classes et d’identifiants qu’elles habillent permet d’établir un lien entre le code et les images. La gestion des ressources en est ainsi facilitée, puisque chaque élément peut aisément être relié à la structure HTML et aux styles CSS.

#footer { background: url("../theme/footer.jpg") repeat-x 0 100%; }

Les images temporaires (ou contribuables)

Issues de la maquette, elles sont généralement employées par le graphiste pour illustrer l’une ou l’autre mise en situation. Il peut par exemple s’agir d’un avatar, d’une illustra-tion d’article, ou encore de la capture d’une vidéo. Faciles à identifier, elles doivent être stockées dans un dossier distinct qui ne sera pas mis en production. Dans notre arbores-cence, le dossier tmp se trouve à la racine de www. Nous y plaçons l’ensemble des éléments temporaires (images, sons, vidéos...) utilisés au cours de l’intégration.

Conseil Employer des images factices

Dummy Image (Dynamic Dummy Image Generator) est un générateur d’images factices. Générées suivant les paramètres passés dans l’URL, les images peuvent être utilisées pour remplacer les fichiers temporaires. Ainsi, il n’est plus nécessaire d’exporter des éléments qui ne seront pas utilisés en production. Cela permet surtout d’attirer l’attention du client sur ses futures contri-butions (les dimensions du visuel étant incluses dans l’image).

http://dummyimage.com

Conseil Créer un « dossier projet » type

Une fois que vous avez opté pour une arborescence qui vous convient et avec laquelle vous vous sentez à l’aise, enregistrez-la soigneusement, car il est fort probable que vous la réutilisiez sur l’ensemble de vos intégrations ultérieures. Ne perdez donc pas de temps à repartir de zéro à chaque fois : dupliquez plutôt cette arborescence au démarrage de chaque nouveau projet.


Fig. 1-1 : Exemple d’arborescence réutilisable à chaque nouveau projet

Adopter une convention de nommageL’une des erreurs les plus fréquentes en intégration est sans nul doute l’erreur d’inat-tention. Qui n’a jamais passé de longues minutes à essayer de déboguer un élément au comportement étrange, avant de se rendre compte qu’une erreur s’était glissée dans l’appel du sélecteur ?

L’absence de convention de nommage standardisée force les intégrateurs à inventer la leur. Malheureusement, rares sont ceux qui se fixent un ensemble de règles à suivre et qui les appliquent d’un bout à l’autre du projet. Bien souvent, chacun établit ses règles de manière plus ou moins arbitraire sans réelle réflexion : les singuliers sont mélangés aux pluriels, l’anglais au français, les traits d’union côtoient les tirets bas et les majus-cules sont utilisées sans raison apparente.

Un bon moyen pour diminuer le risque d’erreurs est de mettre en place une nomen-clature stricte que l’on applique à tous les composants du projet : dossiers, fichiers et sélecteurs. Cela évite les allers-retours inutiles pour vérifier si le nom de fichier est en anglais ou en français, ou pour savoir exactement à quels endroits placer les tirets de séparation. Il est possible que certains y trouvent peu d’intérêt et considèrent qu’une bonne logique personnelle suffit amplement. Mais c’est sans compter les personnes qui reprendront le projet une fois l’intégration terminée : il y a fort à parier qu’un déve-


loppeur ait à dynamiser le tout ou qu’une tierce personne soit en charge de la mainte-nance. En les prenant en considération, vous leur rendrez un fier service !

Bonne pratique Demander conseil au développeur

Suivant le système de gestion de contenus utilisé, il est fort probable qu’un certain nombre de classes, d’identifiants et d’usages soient prédéfinis. Demandez au développeur de vous les donner et prenez-en connaissance avant de figer vos règles de nommage. Vous lui éviterez ainsi une surcharge de travail et il vous en sera reconnaissant.

Exemples de règles de nommage

Une nomenclature n’a pas besoin d’être très verbeuse. Il s’agit de faire simple et compré-hensible. Une liste d’affirmations accompagnées d’exemples telle que celle présentée ci-après est donc largement suffisante.

• Employer des noms anglais pour tous les éléments, car la v2 sera multilingue : .alert au lieu de .alerte.

• Indiquer tous les noms au singulier : .slide au lieu de .slides.• Utiliser uniquement le trait d’union - : .open-popin au lieu de .open_popin.• Donner des noms pertinents aux éléments : #event au lieu de #block-block-1.• Utiliser les classes et identifiants comme noms d’images : body.jpg au lieu de fond.jpg.• Privilégier les intitulés courts : #slideshow-control au lieu de #playpause_slideshow_slider_block-3.

• Différencier le premier élément d’une liste plutôt que le dernier, car c’est plus facile à programmer que l’inverse.

À préférer<ul> <li class="first">Premier item</li> <li>Deuxième item</li> <li>Troisième item</li></ul>

À éviter<ul> <li>Premier item</li> <li>Deuxième item</li> <li class="last">Troisième item</li></ul>

• Classes et identifiants à employer : – #breadcrumb pour le fil d’Ariane ; – #search pour le formulaire de recherche générique ; – .submit pour les éléments de soumission de formulaire ; – .visually-hidden pour les éléments visibles aux seules technologies d’assistance.


Où placer la convention de nommage ?

Une fois la convention de nommage établie, placez-la à la racine du dossier projet afin que chaque intervenant puisse en prendre connaissance et se l’approprier. En la rendant ainsi accessible, vous augmenter vos chances d’avoir un projet uniforme de bout en bout, et ce, quel que ce soit le nombre de personnes prenant part au projet.

QUALITÉ : METTRE EN PLACE UNE CHECKLIST DÉTAILLÉELa checklist permet de vérifier méthodiquement certains points récurrents à prendre en compte lors de l’intégration. Bien qu’elle ne puisse pas garantir la qualité d’un site à 100 %, elle y contribue fortement. Le rendu navigateur, l’accessibilité, la conformité et la performance y trouvent naturellement leur place, mais vous pouvez bien sûr y ajouter d’autres paramètres spécifiques au projet, comme le détail des fonctionnalités à implémenter.

La liste proposée ici est le résultat d’un recoupement de trois listes distinctes : les bonnes pratiques en intégration d’Opquast (voir la section « Les bonnes pratiques Opquast » dans le chapitre suivant), « la checklist ultime pour le lancement d’un site web » de Dan Zambonini (Box UK) et « la checklist d’accessibilité que je m’étais juré de ne pas rédiger » d’Aaron Cannon (North Temple).

ressourCes Les checklists

Opquast Checklists : http://bp.inté.net/1-11

Box UK (Dan Zambonini) : http://bp.inté.net/1-22

North Temple (Aaron Cannon) : http://bp.inté.net/1-33

Véritable référence, la checklist Opquast dédiée à l’intégration regroupe 57 bonnes pratiques âprement débattues et triées sur le volet. C’est donc sans surprise que vous en retrouverez la grande majorité dans la liste ci-après. Scindée en trois parties, elle répond à plusieurs objectifs : servir d’index aux gabarits déjà intégrés, permettre l’évaluation individuelle de chaque page et, enfin, permettre l’évaluation transversale d’un ensemble de points communs aux différents gabarits. Suivant le contexte, ce fichier peut avan-tageusement être remplacé par un outil en ligne (comme Opquast Reporting) qui se charge de vérifier automatiquement un ensemble de points qui ne nécessitent pas d’être validés manuellement.

1. https://checklists.opquast.com2. http://www.boxuk.com/blog/the-ultimate-website-launch-checklist3. http://northtemple.com/1608

http://bp.xn--int-dma.net/1-1




Index des maquettesToutes les pages à intégrer sont listées et associées à un numéro, afin qu’elles soient identifiables rapidement. Les URL sont par la suite progressivement ajoutées, permet-tant au fichier de servir d’index aux maquettes.

Fig. 1-2 : La checklist sert d’index aux maquettes et renseigne sur l’état d’avancement du projet.

Évaluation individuelle des pagesOn regroupe ici l’ensemble des vérifications à faire de manière individuelle pour chaque page. Il s’agit sans conteste de la partie la plus importante de la checklist. En pratique, il s’agit d’indiquer pour chaque ligne si la vérification est un succès (OK), un échec (NOK) ou si elle n’est pas applicable dans le cadre du projet (N/A).

Les points à contrôler pour chaque page étant nombreux et variés, ils ont été regroupés par thématique. Cette partie de l’évaluation vous amènera donc à vérifier la conformité de vos pages et leur rendu sur les navigateurs visés, la qualité du code HTML, la struc-ture et l’harmonisation du contenu, son accessibilité, l’optimisation pour le référence-ment et bien sûr le caractère fonctionnel du site.

Le contenu d’un site ne se limite pas exclusivement aux textes et aux liens : de nombreux autres éléments viennent y prendre place, à commencer par les images. Cependant, avant de pouvoir les intégrer au contenu sans autre forme de procès, il convient de les préparer : il faut définir les différentes tailles d’images nécessaires, choisir le format adéquat et optimiser le résultat obtenu. Ce n’est qu’une fois ces étapes réalisées, qu’il est alors possible de les intégrer au code HTML et de renseigner leur alternative textuelle.

Dans ce chapitre

• Méthodologie : comment gérer le cas des images adaptatives ?

• Format : s’appuyer sur les caractéristiques de l’image pour faire le bon choix

• Performance : techniques d’optimisation d’images

• Accessibilité : renseigner l’alternative textuelle

8Incorporer les images

158 PARTIE 2 – ÉLABORER UN SOCLE HTML SOLIDE

MULTIPLICITÉ DES SUPPORTS : LES IMAGES ADAPTATIVESLes smartphones et autres tablettes munies d’un accès à Internet ne cessant de se multi-plier, l’adaptation des sites à ces supports devient un véritable enjeu. Or, la multitude de résolutions proposées par ces terminaux confronte les développeurs web à de nouvelles problématiques, à commencer par la taille des images intégrées via les balises HTML <img> ou <object>.

Glossaire Images adaptatives

Le terme anglais responsive (que l’on pourrait traduire en français par « adaptatif » ou « réactif ») est utilisé pour qualifier un élément qui s’adapte à la résolution du périphérique de sortie. Une image est dite « adaptative » ou « réactive » quand elle s’adapte à l’environnement dans lequel elle est affichée.

S’il est relativement simple de servir différentes versions d’une même image par l’inter-médiaire des media queries en CSS (voir le chapitre 11), il en va autrement pour celles qui sont embarquées dans le code HTML. En effet, pour ces dernières, il n’existe aucune règle, propriété ou instruction permettant d’obtenir un résultat équivalent. C’est pour-quoi, faute de pouvoir afficher une variante plutôt qu’une autre en fonction de l’envi-ronnement utilisateur, il est nécessaire d’avoir recours à des techniques permettant de pallier ce problème. Certains scripts affichent, par exemple, une image temporaire, le temps que la résolution soit détectée et que la bonne version soit appelée. D’autres méthodes s’appuient sur le fichier .htaccess pour réécrire l’URL de l’image à la volée.

Glossaire Fichier .htaccess

Un fichier .htaccess est un fichier de configuration pour le serveur Apache. Il sert à appliquer une ou plusieurs règles au répertoire qui le contient et à l’ensemble des sous-répertoires qui n’ont pas leur propre fichier de configuration.

Diverses et variées, ces techniques ne présentent pas toutes les mêmes avantages. Aussi, afin de pouvoir les départager, il convient d’imposer certaines contraintes. La plus restrictive de toutes est certainement de s’interdire toute méthode qui a recours au téléchargement parallèle des deux versions de l’image, pour des questions de perfor-mance. Un certain nombre de solutions sont dès lors écartées, comme celle qui consiste à modifier dynamiquement la source de l’image, puisque la mise à jour de l’URL n’est effectuée qu’une fois la page – et donc l’image initiale – chargée.

Malheureusement, il n’existe pas encore de technique universelle qui s’adapte à toutes les situations et qui ne présente aucun inconvénient : en effet, la quasi-totalité d’entre elles s’appuient sur la taille de l’écran pour identifier la version de l’image devant être chargée. Or, il ne s’agit pas du seul paramètre à prendre en compte : idéalement, il

159 8 – INCORPORER LES IMAGES

faudrait aussi s’intéresser à la bande passante, afin de croiser les caractéristiques du terminal et le débit de la connexion. En situation de mobilité, il n’est pas forcément souhaitable de charger l’ensemble des images en grande taille et en haute définition sous prétexte que l’on navigue sur un écran 15 pouces.

À l’heure actuelle, aucune méthode fiable et facilement utilisable ne permet la prise en compte de ce paramètre. En attendant, il faut donc avoir recours à des techniques qui, si elles ne sont pas parfaites, ont l’avantage d’exister.

Après avoir lu bon nombre d’articles sur le sujet et discuté avec d’autres intégrateurs confrontés à cette problématique, j’ai choisi de retenir deux techniques qui me semblent suffisamment souples pour s’adapter à la majorité des projets : l’emploi de l’élément noscript et celui du kit « adaptative images ». Il m’est également apparu important de faire le point sur une méthode très répandue, qui consiste à redimensionner les images en fonction du contexte d’affichage grâce à l’instruction max-width: 100%;.

pour en savoir plus Les images adaptatives

Responsive IMGs : véritable référence, ces trois articles font le point sur les images adapta-tives : les problèmes qu’elles posent, les contournements existants et les solutions futures envisageables.

http://bp.inté.net/8-11



L’emploi de l ’élément noscriptNécessitant la modification du code HTML et le recours à une fonction JavaScript, la méthode s’appuyant sur la balise <noscript> est très simple d’utilisation et relative-ment intuitive. Pour la mettre en pratique, il suffit de placer l’image concernée dans un élément noscript auquel on va attacher trois attributs data-* (voir le chapitre 4), destinés à indiquer l’URL des deux variantes de l’image et l’alternative textuelle qui doit y être renseignée.

Mise en place de la balise <noscript><noscript data-large='logo.png' data-small='logo-small.png' data-alt='Enseigne'> <img src='logo-small.png' alt='Enseigne' /></noscript>

1. http://www.cloudfour.com/responsive-imgs/2. http://www.cloudfour.com/responsive-imgs-part-2/3. http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/




http://www.cloudfour.com/responsive-imgs/

http://www.cloudfour.com/responsive-imgs-part-2/

http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/


La réaction des navigateurs face à cette portion de code dépend de l’activation de JavaScript sur le poste client. Soit il est désactivé et le navigateur affiche l’image contenue dans l’élé-ment noscript, soit il est activé et le navigateur ignore l’image placée entre les deux balises.

Afin d’afficher la version appropriée, il est donc nécessaire d’utiliser une fonction JavaScript dédiée à cet effet. Écrite en jQuery, cette dernière nécessite la présence du framework pour être fonctionnelle. Suivant le contexte projet et les choix techniques réalisés, il peut s’avérer nécessaire de l’adapter à un autre framework.

Mise en place de la fonction jQuery$(document).ready(function() { $('noscript[data-large][data-small]').each(function() { var src = screen.width >= 640 ? $(this).data('large') : $(this).data('small'); $('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($(this)); });});

Dans la pratique, cette fonction analyse chaque balise <noscript> munie des attributs data-large et data-small. Pour chacune d’elles, la fonction va insérer une nouvelle balise <img> munie de l’attribut alt adéquat après l’élément noscript. Si la largeur de l’écran est supérieure ou égale à 640 pixels, alors le chemin de l’image (src) sera celui de la grande version, renseigné dans l’attribut data-large. À l’inverse, si elle est inférieure à 640 pixels, l’attribut src prendra alors comme valeur l’URL de la version réduite, rensei-gnée dans data-small.

Simple à comprendre et à mettre en place, cette méthode présente quelques avantages non négligeables.

• Elle est facilement modifiable et permet de contrôler finement le contexte d’affichage. En effet, rien ne vous oblige à conserver cette valeur de 640 px : il est tout à fait pos-sible de l’adapter à vos propres besoins. De même, vous pouvez choisir d’afficher la grande version de l’image plutôt que la petite lorsque JavaScript n’est pas activé.

• Elle n’affecte que la couche navigateur et ne nécessite pas d’avoir accès au serveur ou de mettre en place des scripts compliqués.

• Enfin, chaque image est dotée d’une URL qui lui est propre et qui lui permet d’être mise en cache comme n’importe quel autre composant.

Bien sûr, cette technique présente également quelques inconvénients qu’il faut prendre en considération.

• Volontairement simpliste, elle n’emploie aucun cookie pour enregistrer la résolution de l’écran une fois que cette dernière est identifiée. De fait, la fonction est relancée à chaque nouveau chargement, ce qui inclut le rafraîchissement d’une page.

• Le code source doit être modifié pour fournir les informations utiles à la fonction. En dehors des quelques redondances que cela entraîne (et qui s’apparentent à l’ajout


de div ou de span parfois nécessaire à la mise en forme CSS), on peut déplorer que la technique d’optimisation soit gérée dans le code HTML.

• En l’état, cette solution ne prend pas en compte la densité de pixels du terminal. Pour afficher différentes variantes d’une même image en fonction de cette caractéristique particulière (voir le chapitre 11), il convient de modifier l’extrait ci-dessus en s’ap-puyant sur la propriété devicePixelRatio.

• Enfin, cette technique entraîne une dépendance au JavaScript : – Si le langage n’est pas activé, l’image affichée est celle présente à l’intérieur de l’élément noscript. C’est pourquoi certains préfèrent y placer la plus grande des deux versions et lui appliquer l’instruction max-width: 100%;.

– Si le langage est activé mais que la fonction n’est pas appliquée (pour cause de fichier non trouvé, par exemple), aucune des deux versions de l’image n’est affichée.

pour en savoir plus La méthode « noscript »

Pour connaître l’origine de cette méthode, rendez-vous à l’adresse suivante :


Conseil Spécifier les dimensions de l’image pour éviter un effet de reflow

Comme nous l’avons vu précédemment, le navigateur ignore l’image présente dans l’élément noscript lorsque JavaScript est activé. De fait, l’image est absente de l’arbre DOM jusqu’à ce que la fonction soit exécutée, ce qui provoque alors un reflow (rafraîchissement forcé). Afin d’éviter cet effet disgracieux, il suffit de préciser les dimensions de l’image dans le code CSS.

Imaginons que l’image de notre exemple soit contenue dans un lien qui a pour identifiant logo. Il suffit de renseigner les propriétés height et width à #logo pour que ce dernier occupe alors la hauteur et la largeur de l’image, évitant ainsi une modification de l’affichage lors du charge-ment de cette dernière.

@media only screen and (max-width: 640px) {

#logo {

height: 25px;

width: 100px;

}

}

@media only screen and (min-width: 641px) {

#logo {

height: 50px;

width: 200px;

}

}

4. http://www.monoliitti.com/images/


http://www.monoliitti.com/images/


Ainsi, sur des largeurs d’écran inférieures à 641 px, le lien occupera 25 px de haut et 100 px de large, tandis que sur les largeurs supérieures, il en occupera 50 par 200. Bien sûr, il faudra préalablement avoir pris soin de doter l’élément #logo d’un mode de rendu qui permette aux propriétés height et width d’être prises en compte.

Le kit « adaptative image »Contrairement à la méthode précédente qui est exécutée par le navigateur, cette solu-tion-ci est destinée à être exécutée côté serveur. Le kit proposé est composé de trois éléments, à savoir une ligne de JavaScript, un fichier PHP et un fichier .htaccess.

Concrètement, le fonctionnement de cette technique est relativement simple : la ligne de JavaScript identifie la résolution d’écran et la stocke dans un cookie. Le fichier .htac-cess identifie les requêtes qui portent sur des images et demande au serveur d’exécuter le fichier PHP. Ce dernier se charge alors de créer une version miniature de l’image (correspondant à la résolution contenue dans le cookie) et la stocke dans un répertoire dédié sur le serveur.

Glossaire Cookies

Un cookie est un fichier texte qui est stocké sur le disque dur du poste client par un serveur web. Il y enregistre certaines informations qui pourront lui être utiles ultérieurement. Il peut, par exemple, s’agir d’identifiants ou de préférences utilisateur, le but étant d’éviter à ce dernier d’avoir à se reconnecter ou à réenregistrer ses préférences d’une visite à l’autre.

À l’instar de la méthode précédente, cette solution présente de nombreux avantages.

• Les différentes versions de l’image sont générées côté serveur. Il n’est donc pas né-cessaire de s’en préoccuper puisqu’elles sont conçues à la volée et automatiquement mises en cache. Ainsi, chaque nouvelle occurrence est générée une seule fois et servie à tous les utilisateurs dont la résolution est similaire. De plus, les terminaux ne sont pas pénalisés par des traitements lourds et coûteux, puisqu’ils sont effectués côté ser-veur.

• Le fichier PHP permet de définir les résolutions à prendre en considération. Ainsi, il est possible de personnaliser le kit pour qu’il corresponde aux besoins du projet et tienne compte, par exemple, de la densité de pixels des terminaux.

• Enfin, le code HTML n’a pas besoin d’être modifié pour que le kit soit fonctionnel.

Très arrangeante de prime abord, cette solution n’est pourtant pas exempte d’inconvénients.

• En l’état, elle ne fonctionne qu’avec PHP, Apache, les droits nécessaires sur un dossier, la réécriture d’URL et une bibliothèque graphique pour PHP – ce qui la rend plus com-pliquée à mettre en place qu’une méthode qui s’exécute côté client.


• La résolution de l’utilisateur est enregistrée et conservée dans un cookie. Si pour une raison ou pour une autre, le cookie n’est pas accessible, une détection de l’agent utili-sateur est effectuée pour tenter d’envoyer la variante de l’image qui semble être la plus appropriée – le problème étant que la détection de l’agent utilisateur est une méthode qui est loin d’être fiable.

• Enfin, cette technique peut poser de très sérieux problèmes de performances sur les sites qui utilisent des CDN (Content Delivery Network) ou qui sont consultés par l’inter-médiaire d’un proxy. Pour ces derniers, la mise en cache des images est interdite, ce qui contrebalance négativement les efforts d’optimisation réalisés par ailleurs.

pour en savoir plus Adaptative Images

Pour approfondir cette solution et télécharger tous les fichiers nécessaires à sa mise en place, je vous invite à consulter le site dédié à cet effet :


Bonne pratique Éviter la détection de l’agent utilisateur

La détection de l’agent utilisateur se fait grâce à l’analyse de l’en-tête User-Agent, qui contient de nombreuses informations relatives à la configuration du terminal. Envoyé au serveur lorsqu’un internaute visite une page web, cet en-tête est examiné et certaines informations spécifiques (telles que l’identité du navigateur utilisé et son numéro de version) en sont extraites. Suivant la nature des informations récoltées, des modifications sont généralement apportées à la page ou une redirection vers une URL tierce est alors effectuée.

Pour contrer ces pratiques, un certain nombre de navigateurs ont commencé à se faire passer pour ce qu’ils n’étaient pas, en modifiant les informations contenues dans l’en-tête – ce qui explique pourquoi toute tentative de détection est pour le moins aléatoire.

L’instruction max-width: 100%;Contrairement aux méthodes précédentes qui ont pour objectif de servir la version de l’image la plus pertinente en regard du contexte dans lequel elle se trouve, la solution utilisant la propriété max-width se contente simplement d’adapter l’image en fonction de la place disponible. Très simple à mettre en œuvre, cette technique est certainement l’une des plus répandues, car elle permet d’obtenir un affichage correct à moindre coût, et ce, indépendamment de la résolution du terminal.

L’instruction max-width: 100%; sert à restreindre la largeur maximale de l’image à la largeur de son conteneur. Aussi, lorsque ce dernier est redimensionné pour s’adapter aux faibles résolutions, la largeur de l’image s’adapte automatiquement à la largeur du bloc qui la contient.

5. http://adaptive-images.com


http://adaptive-images.com


Fig. 8-1 : Grâce à l’instruction max-width: 100%; l’image s’adapte automatiquement à la largeur de son conteneur. (Photo réalisée par Thanh Nguyen : http://twitter.com/@thanh)

Cependant, contrairement à ce que l’on pourrait croire, l’instruction max-width: 100%; seule ne suffit pas. Pour que l’image soit correctement redimensionnée et que les proportions soient conservées, il convient de la coupler à d’autres instructions :

• height: auto; permet de s’assurer que les proportions de l’image sont conservées ; cette instruction prend le pas sur l’attribut height du code HTML ;

• width: auto; corrige un bogue spécifique à IE 8 et rend l’instruction max-width: 100%; fonctionnelle sur cette version du navigateur ;

• enfin, box-sizing: border-box; modifie la façon dont la largeur de l’image est calculée. Les marges internes et les bordures sont incluses dans la largeur totale de l’élément, ce qui évite aux images qui en sont dotées de sortir du conteneur. À noter que cette propriété est compatible dès IE 8 et sur tous les navigateurs modernes.

Restreindre la taille de l’image à celle de son conteneurimg { height: auto; width: auto; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

(Source : http://bp.inté.net/8-66)

6. http://blog.goetter.fr/post/13447625254/un-reset-responsive-pour-les-images



Parfaitement adaptée aux images d’illustration, cette technique peut se révéler problé-matique pour les images de contenu qui véhiculent un message et dont le sens peut être perdu si cette dernière est redimensionnée. C’est par exemple le cas des images annotées ou des schémas qui peuvent devenir illisibles lorsqu’ils sont visionnés sur un terminal mobile.

Bien qu’il soit déjà relativement gênant, cet inconvénient n’est pourtant pas le seul. Le problème majeur de cette solution réside dans son principe de fonctionnement, puisqu’il consiste à servir une seule et même image à tous les terminaux. De fait, les portables et les tablettes sont obligés de charger et de redimensionner des images de grande taille qui ne leur sont pas destinées. Cela ralentit donc le chargement des éléments sur les terminaux qui accèdent à Internet via un réseau de téléphonie mobile. C’est pourquoi cette méthode doit être utilisée avec parcimonie et en parfaite connaissance de cause, après avoir fait la balance entre avantages et inconvénients. De même, pour minimiser les effets de bords, il est impératif de veiller à bien optimiser les images, surtout si elles sont destinées à être chargées et redimensionnées par les terminaux mobiles.

À noter Quelle technique utiliser ?

Loin d’être exhaustive, la liste ci-dessus ne rassemble pas l’ensemble des techniques existantes pour servir une image qui soit adaptée au contexte d’affichage. De nombreuses autres solutions apparaissent régulièrement et c’est pourquoi il convient de se tenir informé sur les nouvelles propositions qui ne cessent d’être imaginées.

En effet, il n’existe encore aucune solution parfaite qui permette de répondre à tous les cas de figure. Chaque technique comporte des avantages et des inconvénients qu’il faut prendre en compte, afin de retenir celle qui s’avère la plus appropriée, le choix d’une solution plutôt qu’une autre ne pouvant être fait qu’après avoir vérifié l’adéquation entre les contraintes liées au projet et celles liées à l’utilisation de cette technique.

Pour être au courant des propositions et des solutions techniques imaginées, je vous recom-mande de suivre les discussions du groupe de travail du W3C et du WHATWG7 consacrées au sujet :



7. Web Hypertext Application Technology Working Group, entité séparée du W3C (même si nombre de ses membres y participent), créée en 2004 par Opera, Apple et Mozilla. Ce groupe de travail se limite aux technologies qu’il estime implémentables dans les navigateurs web actuels et sa liste de diffusion est ouverte à tous.

8. http://www.w3.org/community/respimg/9. http://www.w3.org/community/respimg/2012/05/11/respimg-proposal/



http://www.w3.org/community/respimg/


CHOISIR LE BON FORMAT D’IMAGETraité de façon automatique sur la base de simples critères visuels, l’enregistrement des images est parfois considéré comme une étape obligatoire qu’il convient d’expédier rapidement, une optimisation après coup (grâce à des outils tels que Smush.it) étant jugée suffisante pour obtenir des résultats probants.

Pourtant, l’optimisation à l’enregistrement et l’optimisation ultérieure sont deux choses bien distinctes. La première permet d’influer sur la qualité de l’image et donc sur son poids, tandis que la seconde intervient principalement sur les métadonnées superflues embarquées. De fait, ces deux actions doivent être effectuées de concert et en aucun cas se substituer l’une à l’autre. Ce chapitre est consacré à l’optimisation initiale et s’intéresse à la façon de réduire le poids des images grâce aux options proposées par les principaux logiciels de création graphique. L’optimisation ultérieure est, pour sa part, abordée dans le chapitre 15.

Il n’est pas rare que le poids total des images utilisées sur une page soit largement supérieur à l’ensemble de ses données HTML, CSS et JavaScript. De fait, pour améliorer les perfor-mances, il est nécessaire d’optimiser les images avant tout chose, le gain obtenu grâce à la réduction et à la compression des fichiers texte étant comparativement assez faible par rapport à celui résultant de l’optimisation des images.

Fig. 8-2 : Le poids des images utilisées représente plus de 60 % du poids total de la page. (Étude réalisée en juillet 2012 sur plus d’un million de sites. Source : http://httparchive.org)

Pour cette raison, il est important d’enregistrer les images dans un format qui soit adapté aux caractéristiques de chacune. Car bien qu’il existe de nombreux formats d’images, rares sont ceux qui sont adaptés au média web. En effet, à l’heure actuelle seuls trois d’entre eux s’avèrent réellement utilisables. Il s’agit du GIF, du PNG et du JPEG.


Fig. 8-3 : Les formats GIF, PNG et JPEG représentent 99 % des formats d’images les plus utilisés. (Étude réalisée en juillet 2012 sur plus d’un million de sites. Source : http://httparchive.org)

À noter Le format SVG

Correctement interprété par une majorité de navigateurs, le SVG (Scalable Vector Graphics) est un format d’image vectoriel qui commence à faire parler de lui : ses applications nombreuses et variées s’annoncent très prometteuses. Malheureusement, il est encore difficilement utilisable en production, puisque non compatible avec IE 6, IE 7 et IE 8. Les versions inférieures à IE 9 nécessitent en effet l’emploi de bibliothèques JavaScript (telles que SVGWeb et RaphaelJS) pour pouvoir afficher et interagir correctement avec les éléments SVG. Dépendant de la présence du langage sur le poste client, ce format ne sera donc pas abordé ici.

Pour en savoir plus sur les atouts et les possibilités offerts par ce format, consultez les ressources suivantes :




Le format GIFDéveloppé à la fin des années 1980, le GIF (Graphics Interchange Format) est un format d’image qui est surtout connu pour une caractéristique bien particulière : il est le seul à permettre l’enregistrement d’animations – les fameux GIF animés – auxquels il doit très certainement d’avoir survécu jusqu’à maintenant. Délaissé au profit du PNG, il présente pourtant certaines caractéristiques appréciables comme la prise en compte de la trans-

10. http://letrainde13h37.fr/5/svg-ami-du-responsive-webdesign/11. http://jeremie.patonnier.net/tag/SVG12. http://svground.fr




http://jeremie.patonnier.net/tag/SVG


parence binaire ou la possibilité d’entrelacer les images. Ajouté à cela un algorithme de compression non destructif et l’on obtient un aperçu relativement complet des possibi-lités offertes par ce format.

Glossaire Entrelacement

La fonction d’entrelacement permet d’afficher l’image de manière progressive, donnant ainsi le sentiment à l’internaute que son chargement est plus rapide. Floue aux premières secondes d’affichage, cette dernière devient de plus en plus nette au fur et à mesure qu’elle est chargée par le navigateur. Largement utilisé à l’époque où les débits se comptaient en kilo-octets, l’en-trelacement est de plus en plus rarement appliqué aux images, du fait de la généralisation des connexions à haut débit.

Bien sûr, il n’est pas dénué d’inconvénients pour autant : incapable d’enregistrer plus de 256 couleurs, il se révèle particulièrement inadapté pour les éléments comptant de nombreuses nuances, tels que les photos. À l’inverse, il est vraiment efficace pour les images en aplat ou ne contenant qu’un nombre limité de couleurs, telles que les icônes.

Gérer la transparence

Comme évoqué précédemment, le format GIF gère la transparence, mais uniquement lorsque cette dernière est totale : le rendu d’une transparence partielle (telle qu’un élément à 50 % d’opacité) est impossible à obtenir. C’est pourquoi le rendu d’un élément sur fond transparent est rarement satisfaisant, à cause du crénelage inévitable qui appa-raît autour du composant (fig. 8-4).

© Je

rem

y Ro

ux

Fig. 8-4 : Pour enregistrer la transparence graduelle, le format utilise une couleur d’arrière-plan qui permet de rendre la zone opaque.

Fort heureusement, ce problème peut facilement être réglé à l’enregistrement. Pour cela, il suffit de définir une couleur d’arrière-plan qui se rapproche de la couleur de fond sur laquelle sera placée l’image. La couleur du crénelage est alors adaptée en conséquence, ce qui a pour effet de le rendre invisible une fois l’image intégrée à la page (fig. 8-5).

ANNEXES

Le zoning schématise l’organisation générale d’une page en identifiant les différentes zones à l’aide de blocs. Il permet d’illustrer le fonctionnement global et de dégager les zones de contenu principales.

Annexe A1

Annexe B Établi à partir du zoning, le wireframe (ou maquette fil de fer) met en avant le contenu. Les zones précédemment identifiées sont remplies et leur contenu est organisé de la manière la plus fonctionnelle et ergonomique possible.

Annexe A2

La feuille de styles présentée ci-après est une version personnalisée du fichier normalize.css conçu par Nicolas Gallagher et Jonathan Neal. Elle est agrémentée de notes et de références complémentaires, et nettoyée des instructions relatives aux balises de structures HTML5, car je trouve encore prématuré de les utiliser à l’heure actuelle. Dans cette version, les hacks navigateurs ont été remplacés par des correctifs s’appuyant sur les classes conditionnelles définies dans le gabarit HTML.

Le fichier est consultable et téléchargeable à l’adresse suivante : https://github.com/inseo/bpi-normalize

Contenu du fichier « normalize »/** Uniformisation des styles navigateurs * @lastmodified 2012-08-03 * * Version personnalisée de normalize.css * @see http://necolas.github.com/normalize.css * * Les valeurs prises en références sont celles recommandées par le WHATWG * @see http://www.iecss.com/whatwg.css */

/** --- = @section BASE --- */

/** Rend le zoom texte fonctionnel lorsque la police est définie en 'em' sur <body>. * @bugfix * @affected IE 6, IE 7 * @see http://fvsch.com/code/bugs/ie-em-bug/ */html { font-size: 100%;}

/** Supprime les marges externes. */body { margin: 0;}

/** --- = @section TITRES --- */

/** Applique les marges externes et tailles de caractères recommandées. * @css-for IE 6, IE 7 */h1 {

Annexe B


margin: 0.67em 0; font-size: 2em;}

h2 { margin: 0.83em 0; font-size: 1.5em;}

h3 { margin: 1em 0; font-size: 1.17em;}

h4 { margin: 1.33em 0; font-size: 1em;}



/** --- = @section LISTES --- */

/** Applique les marges recommandées. * @css-for IE 6, IE 7 */dl,ol, ul { margin: 1em 0;}

ol, ul { padding: 0 0 0 40px;}

dd { margin: 0 0 0 40px;}

/** --- = @section TABLEAUX --- */

371 ANNEXE B

/** Supprime l’espace entre les cellules et fusionne les bordures. */table { border-spacing: 0; border-collapse: collapse;}

/** --- = @section FORMULAIRES --- */

/** Applique les marges externes recommandées. * @css-for IE 6, IE 7 */form { margin: 0;}

/** 1. Applique les marges recommandées. @css-for IE 6, IE 7 * 2. Uniformise la bordure. */fieldset { margin: 0 2px; /** 1 */ border: 1px solid gray; /** 2 */ padding: 0.35em 0.625em 0.75em; /** 1 */}

/** 1. Rétablit l’héritage de la propriété 'color'. * @bugfix * @affected Internet Explorer * 2. Uniformise les marges internes. * 3. Permet au texte de revenir à la ligne du texte. * @bugfix * @affected FF 3.6 * @see http://stackoverflow.com/questions/6133571/how-can-i-make-legend-text-wrap * @note IE 6 et IE 7 nécessitent une solution de contournement alternative. */legend { border: 0; /** 1 */ padding: 0; /** 2 */ white-space: normal; /** 3 */}

/** Supprime les marges externes. * Uniformise l’alignement vertical. * Rétablit l’héritage de la taille de police. * Uniformise la famille de police utilisée. */button,input, select, textarea { margin: 0; vertical-align: baseline; font-size: 100%; font-family: sans-serif;}


/** Uniformise la hauteur des champs texte. * @see http://www.456bereastreet.com/archive/201108/line-height_in_input_fields/ */input[type="text"] { border: 1px solid dimgray; padding: 2px; height: 1.2em; font-size: 1em line-height: 1.2;}

/** 1. Modifie l’apparence du curseur sur certains éléments de formulaire. * @note Ne fonctionne pas sur IE 6 * 2. Permet de rendre les labels fonctionnels. * @bugfix * @affected iOS * @see http://twitter.com/sorccu/status/211364032098213888 */label,button, input[type="button"],input[type="checkbox"], input[type="radio"],input[type="reset"], input[type="submit"] { cursor: pointer;}

/** Rétablit le curseur par défaut.* @note Ne fonctionne pas sur IE 6, IE 7 et IE 8 */button[disabled], input[disabled] { cursor: default;}

/** Supprime les marges internes incompressibles. * @css-for Firefox * @see http://www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}

/** Normalise le modèle de boîte et supprime les marges internes. * @css-for IE 8, IE 9 */input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0;}

/** 1. Uniformise l’alignement vertical. * 2. Masque la barre de défilement présente par défaut. * @css-for Internet Explorer

373 ANNEXE B

* 3. Autorise le redimensionnement vertical du champ * @note Ne fonctionne pas sur Internet Explorer. */textarea { vertical-align: top; /** 1 */ overflow: auto; /** 2 */ resize: vertical; /** 3 */}

/** --- = @section AUTRES COMPOSANTS --- */

/** Applique les marges recommandées. * @css-for IE 6, IE 7 */blockquote { margin: 1em 40px;}

/** Applique les marges recommandées. * @css-for IE 6, IE 7 */p,pre { margin: 1em 0;}

/** Améliore la lisibilité de l’élément. */pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word;}

/** Uniformise l’aspect du texte. */code, pre,kbd, samp { font-family: monospace, serif; font-size: 1em;}

/** Uniformise le contour. * @css-for Chrome, Safari */a:focus { outline: thin dotted;}

/** Améliore la lisibilité au survol et à la prise de focus. * @see people.opera.com/patrickl/experiments/keyboard/test */a:active, a:hover {


outline: 0;}

/** Ajoute la bordure recommandée. * @css-for Internet Explorer, Chrome, Safari */abbr[title] { border-bottom: 1px dotted;}

/** Applique la graisse recommandée. * @css-for Firefox */b, strong { font-weight: bold;}

/** Uniformise la taille de l’élément. */small { font-size: 75%;}

/** Empêche les éléments 'sub' et 'sup' d’affecter l’interlignage du parent. * @see gist.github.com/413930 */sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0;}

sup { top: -0.5em;}

sub { bottom: -0.25em;}

/** Supprime les guillemets automatiques. * @css-for IE 6, IE 7 */q { quotes: none;}

/** Supprime les guillemets automatiques. * @css-for Chrome, Safari * @see http://www.paulchaplin.com/blog/css-reset-and-quirky-quotes */q:before, q:after { content: ''; content: none;

375 ANNEXE B

}

/** 1. Supprime la bordure des images se trouvant dans un lien. * @css-for Internet Explorer, FF3.6 * 2. Supprime l’espace indésirable apparaissant sous les images. * @see http://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html */img { border: 0; /** 1 */ vertical-align: middle; /** 2 */}

/** Supprime l’ombre portée du texte lors de sa sélection. * @see h5bp.com/ * @note Les couleurs de texte et d’arrière-plan doivent être redéfinies pour que l’instruction soit appliquée.*/::selection { text-shadow: none; color: black; background-color: lightblue;}

/** Supprime l’ombre portée du texte lors de sa sélection. * @css-for Firefox */::-moz-selection { text-shadow: none; color: black; background-color: lightblue;}

/** --- = @section IE --- */

/** Corrige le problème de marge externe gauche incompressible. * @bugfix * @affected IE 6, IE 7 * @see http://jamesfrank.info/2011/06/18/fieldset-legends-ie7/ */.ie6 legend, .ie7 legend { margin-left: -7px;}

/** Uniformise l’alignement vertical. * @css-for IE 6, IE 7 */.ie6 button, .ie6 input, .ie6 select, .ie6 textarea,.ie7 button, .ie7 input, .ie7 select, .ie7 textarea { vertical-align: middle;}


/** Supprime la marge interne incompressible. * bugfix * @affected IE 7 * @see http://www.brownbatterystudios.com/sixthings/2006/02/14/ * @note Ne fonctionne pas sur IE 6 */.ie7 button,.ie7 input[type="button"], .ie7 input[type="reset"], .ie7 input[type="submit"] { overflow: visible;}

.ie7 table button,

.ie7 table input[type="button"], .ie7 table input[type="reset"], .ie7 table input[type="submit"] { overflow: auto;}

/** Supprime la marge interne des éléments. * @bugfix * @affected IE 7 * @note Ne fonctionne pas sur IE 6 */.ie7 input[type="checkbox"], .ie7 input[type="radio"] { height: 13px; width: 13px;}

/** Remplace la police 'monospace' par 'courrier new' dont le rendu est meilleur. * @bugfix * @affected IE 6 * @see en.wikipedia.org/wiki/User:Davidgothberg/Test59 */.ie6 code, .ie6 pre,.ie6 kbd, .ie6 samp { font-family: "courier new", monospace;}

/** Améliore la qualité des images redimensionnées. * @css-for IE 7 * @see http://code.flickr.com/blog/2008/11/12/ * @note Ne fonctionne pas sur IE 6 */.ie7 img { -ms-interpolation-mode: bicubic;}

/** --- = @section MOBILES --- */

/** Empêche le redimensionnement du texte au changement d’orientation du terminal. * 1. @bugfix * @affected iOS * @see http://filamentgroup.com/examples/iosScaleBug/ * @note Cette instruction préserve la fonction de zoom utilisateur */html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /** 1 */}

377 ANNEXE B

/** 1. Évite que l’instruction 2 ne casse les contrôles natifs des éléments 'audio' et 'video'. * @bugfix * @affected WebKit in Android 4.0.* * 2. Autorise la personnalisation des éléments. * @bugfix * @affected iOS */button,html input[type="button"], /** 1 */input[type="reset"], input[type="submit"] { -webkit-appearance: button; /** 2 */}

Dans cet exemple, un point d’arrêt est défini à 768 px : il permet de déclencher certaines fonctions lorsque la largeur du navigateur passe en dessous (enter) ou au-dessus (exit) de cette limite.

Au-dessus de 768 px, le carrousel est activé : une classe activated est ajoutée, des flèches de navigation précédent/suivant sont générées et insérées et le plug-in Cycle est appliqué.

En dessous, il est désactivé : la classe activated est enlevée, les flèches de navigation sont retirées, l’instance du Cycle est détruite et tous les événements qui y sont liés sont supprimés.

Exemple d’utilisation du script breakpoint.js/** @author: Marie Alhomme (PouipouiDesign) */

/** ACTIVER LE CARROUSEL (SUR LES NAVIGATEURS PLUS LARGES QUE 768PX) */function activateSlideshow(elt) { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM MAIS PAS DÉJÀ ACTIVÉ */ if ( jQuery(elt+'.activated').size() < 1 ) { /* AJOUT D’UNE CLASS MARQUANT L’ACTIVATION, INSERTION DES FLÈCHES DE CONTRÔLE ET LANCEMENT DU CARROUSEL */ jQuery(elt).addClass('activated').before('<span id="'+elt+'Prev" /><span id="'+elt+'Next" />').cycle(); }}

// DÉSACTIVER LE CARROUSEL (SUR LES NAVIGATEURS MOINS LARGES QUE 768PX)function deactivateSlideshow(elt) { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM ET ACTIVÉ */ if ( jQuery(elt+'.activated').size() > 0 ) { /* RETRAIT DE LA CLASS MARQUANT L’ACTIVATION ET DESTRUCTION DU CARROUSEL */ jQuery(elt).removeClass('activated').cycle('destroy'); /* RETRAIT DES FLÈCHES DE CONTRÔLE */ jQuery(elt+'Prev, '+elt+'Next').remove(); }}

// FONCTIONS À DÉCLENCHER QUAND LA LARGEUR DU NAVIGATEUR PASSE AU-DESSUS DE 768PX$(window).bind('exitBreakpoint768',function() { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM */ if ( jQuery('#slideshow').size() > 0 ) { deactivateSlideshow('#slideshow'); }});

// FONCTIONS À DÉCLENCHER QUAND LA LARGEUR DU NAVIGATEUR PASSE EN DESSOUS DE 768PX

Annexe C

379 ANNEXE C

$(window).bind('enterBreakpoint768',function() { /** SI L’ÉLÉMENT CORRESPONDANT EST PRÉSENT DANS LE DOM */ if ( jQuery('#slideshow').size() > 0 ) { activateSlideshow('#slideshow'); }});

// MISE EN PLACE DES BREAKPOINTS$(window).setBreakpoints({ // TABLEAU DE LARGEURS EN PIXELS OÙ LES BREAKPOINTS DOIVENT ÊTRE DÉCLENCHÉS breakpoints: [ 768 ] });

Annexe D Le fichier présenté ici regroupe les styles d’impression visant à améliorer la lisibilité de la version imprimée. Il est scindé en deux parties : d’un côté, les styles génériques réutilisables tels quels et, de l’autre, certains styles spécifiques (commentés par défaut) pouvant être librement adaptés.

Le fichier est consultable et téléchargeable à l’adresse suivante : https://github.com/inseo/bpi-print

Contenu du fichier « print »/** --- = @section STYLES GÉNÉRIQUES --- */

/** Réinitialiser la couleur du texte pour accélérer l’impression. * @see http://www.sanbeiji.com/archives/953 * Supprimer les ombres portées et les couleurs d’arrière-plan. */* { color: black !important; box-shadow: none !important; text-shadow: none !important; -ms-filter: none !important; filter: none !important; background-color: transparent !important;}

/** Supprimer les éventuelles marges et largeur de <body>. * Initialiser la taille de police en points. */body { margin: 0 !important; padding: 0 !important; width: auto !important; font-size: 12pt;}

/** Éviter que les titres ne soient suivis par un changement de page. * @note Fonctionne uniquement sur Opera et IE 8+. * @see http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#cite_ref-75 */h1, h2, h3, h4, h5, h6 { page-break-after: avoid;}

/** Éviter que ces éléments ne soient scindés par un changement de page. * @note Fonctionne uniquement sur Opera et IE 8+. */h1, h2, h3, h4, h5, h6,blockquote,

381 ANNEXE D

code, pre,tr,img { page-break-inside: avoid;}

/** Spécifier le nombre minimal de lignes pouvant être isolés en bas ou en haut d’une page. * @note Ne fonctionne pas sur Firefox. */p { orphans: 3; /** bas de page */ widows: 3; /** haut de page */}

/** Forcer la répétition des en-têtes de tableaux lorsqu’ils sont répartis sur plusieurs page. */thead { display: table-header-group;}

/** Souligner les liens. */a:link { text-decoration: underline;}

/** Afficher l’URL des liens. */a[href]:after { content: " (" attr(href) ")";}

/** Masquer l’URL des ancres nommées. */a[href^="#"]:after { content: "";}

/** Renseigner la signification des abréviations. */abbr[title]:after { content: " (" attr(title) ")";}

/** Restreindre la largeur de l’image à celle de son conteneur */img { max-width: 100% !important;}


/** --- = @section STYLES PARTICULIERS --- */

/** Supprimer certains éléments inutiles sur la version papier. *//** #skip-nav, #search, #nav, .social, #top,#footer { display: none;}*/

/** Réinitialiser les marges et la largeur du conteneur principal. *//**#container { margin: 0 !important; padding: 0 !important; width: auto !important;}*/

/** Linéariser certains éléments de contenu. *//** .classe-a-remplacer, #identifiant-a-remplacer { float: none;}

.classe-a-remplacer, #identifiant-a-remplacer { position: static;}*/

/** Remplacer un arrière-plan par une bordure. *//**.classe-a-remplacer, #identifiant-a-remplacer { border: 1px solid MediumPurple; color: MediumPurple; background-color: transparent;}*/

/** Remplacer une image par sa description détaillée. *//**.classe-a-remplacer img, #identifiant-a-remplacer img { display: none;}

.classe-a-remplacer .visually-hidden,

.classe-a-remplacer .visually-hidden caption,#identifiant-a-remplacer .visually-hidden,

383 ANNEXE D

#identifiant-a-remplacer .visually-hidden caption { position: static; clip: auto;} */

Le fichier .htaccess présenté ci-après regroupe certaines instructions visant à éviter les problèmes dus à l’utilisation d’un mauvais jeu de caractères, à améliorer les perfor-mances d’affichage, à minimiser certaines risques de sécurité, et à améliorer l’expérience utilisateur.

Le fichier est consultable et téléchargeable à l’adresse suivante : https://github.com/inseo/bpi-htaccess

Contenu du fichier .htaccess# --- MODE DE COMPATIBILITÉ IE ---# Interdire le mode de compatibilité sur IE# Activer Google Chrome Frame s’il est installé<IfModule mod_headers.c> Header set X-UA-Compatible "IE=Edge,chrome=1"

<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|vcf)$" > Header unset X-UA-Compatible </FilesMatch></IfModule>

# --- FONTES PERSONNALISÉES --- # Autoriser un domaine tiers (ou un sous-domaine) à accéder# aux fichier EOT, WOFF, TTF, TTC, OTF et SVG# => "http://domaine-autorise.fr" à modifier<IfModule mod_headers.c> <FilesMatch "\.(eot|woff|ttf|ttc|otf|svg)$"> Header set Access-Control-Allow-Origin "http://domaine-autorise.fr" </FilesMatch></IfModule>

# --- TYPE MIME ---# Associer un type MIME à certaines extensions

# JavaScript / JSON# (écrase les types MIME text/javascript erronés)AddType application/javascript js jsonpAddType application/json json

# AudioAddType audio/ogg oga oggAddType audio/mp4 m4a f4a f4b

Annexe E

385 ANNEXE E

# VidéoAddType video/ogg ogvAddType video/mp4 mp4 m4v f4v f4pAddType video/webm webmAddType video/x-flv flv

# SVGAddType image/svg+xml svg svgzAddEncoding gzip svgz

# FontesAddType application/vnd.ms-fontobject eotAddType application/x-font-ttf ttf ttcAddType font/opentype otfAddType application/x-font-woff woff

# Formats diversAddType image/x-icon icoAddType image/webp webpAddType text/cache-manifest appcache manifestAddType text/x-component htcAddType application/xml rss atom xml rdfAddType application/x-web-app-manifest+json webappAddType text/x-vcard vcf

# --- COMPRESSION GZIP ---<IfModule mod_deflate.c>

# 1. Identifier les en-têtes modifiés et forcer la prise en charge de la compression # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/ <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule>

# 2. Compresser tous les fichiers dont le type MIME correspond à l’un de ceux # qui sont listés <IfModule mod_filter.c> AddOutputFilterByType DEFLATE application/atom+xml \ application/javascript \ application/json \ application/rss+xml \ application/vnd.ms-fontobject \ application/x-font-ttf \ application/xhtml+xml \ application/xml \ font/opentype \ image/svg+xml \ image/x-icon \


text/css \ text/html \ text/plain \ text/x-component \ text/xml </IfModule>

</IfModule>

# --- EXPIRATION DES DONNÉES ---<IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month"

# Cache manifeste ExpiresByType text/cache-manifest "access plus 0 second"

# Document HTML ExpiresByType text/html "access plus 0 second"

# Données ExpiresByType text/xml "access plus 0 second" ExpiresByType application/xml "access plus 0 second" ExpiresByType application/json "access plus 0 second"

# Flux de syndication ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (ne pas être renommée) ExpiresByType image/x-icon "access plus 1 week"

# Images, audio et vidéo ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month"

# Composants HTC ExpiresByType text/x-component "access plus 1 month"

# Fontes ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

387 ANNEXE E

# CSS et JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year"</IfModule>

# --- ETAG ---# Si le module mod_headers est disponible, l’en-tête Etag est supprimé<IfModule mod_headers.c> Header unset ETag</IfModule>

# S’il ne l’est pas, l’instruction FileETag None est appliquée# (cette instruction n’est pas suffisante pour tous les serveurs)FileETag None

# --- RÉÉCRITURE D’URL ---<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On</IfModule>

# Remplacer les URL préfixées par leur équivalent non préfixé# www.domaine.fr => domaine.fr<IfModule mod_rewrite.c> RewriteCond %{HTTPS} !=on RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]</IfModule>

# --- PAGE D’ERREUR PERSONNALISÉE ---# la page 404.html est placée à la racine du serveurErrorDocument 404 /404.html

# --- CODAGE UTF-8 ---# Indiquer que utf-8 doit être utilisé comme jeu de caractères par défaut# (appliqué par défaut aux fichiers de type text/plain et text/html)AddDefaultCharset utf-8

# Force l’encodage utf-8 sur les fichiers CSS, JavaScript, JSON, RSS, Atom et XMLAddCharset utf-8 .css .js .json .rss .atom .xml

# --- SÉCURITÉ ---# Interdire l’accès aux dossiers et aux fichiers cachés<IfModule mod_rewrite.c>

Index388 INTÉGRATION WEB : LES BONNES PRATIQUES

RewriteCond %{SCRIPT_FILENAME} -d [OR] RewriteCond %{SCRIPT_FILENAME} -f RewriteRule "(^|/)\." - [F]</IfModule>

# Interdire l’accès aux fichiers sensibles<FilesMatch "(\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$"> Order allow,deny Deny from all Satisfy All</FilesMatch>

# Empêcher l’exploration des répertoires n’ayant pas d’index<IfModule mod_autoindex.c> Options -Indexes</IfModule>


Tableau 1-1 : Checklist d’évaluation individuelle des pages (version détaillée : https://github.com/inseo/bpi-checklist)

CONFORMITÉ ET RENDU NAVIGATEUR

1 2 3

Validation HTML

Firefox

Chrome

Safari

Opera

Internet Explorer 9

Internet Explorer 8

Internet Explorer 7

Internet Explorer 6

iPhone

iPad

Android

Blackberry

Opera Mobile

HTML

1 2 3

Le code source débute par un doctype dont la syntaxe est conforme aux recommandations du W3C.

Une métadonnée définit le jeu de caractères de la page.

Le jeu de caractères utilisé est UTF-8.

Le code source ne contient ni éléments ni attributs de présentation.

La capitalisation à des fins décorative est effectuée en CSS.

Les mots ne comportent ni espaces ni balisage interne (<span>L</span>ettrine).

Les styles en ligne sont utilisés de manière appropriée.

Documents

Les bonnes pratiquesmultimedia.fnac.com/multimedia/editorial/pdf/9782212133707.pdf · les bases, de formaliser et de déterminer ce qui est de l’ordre du savoir minimal de l’intégrateur,