Pearson Responsive Web Design Manuel utilisateur
PDF
Dokument
Table des matières À propos de l’auteur ............................................................................................................... III À propos des relecteurs . ........................................................................................................ V Préface ........................................................................................................................................ 1 1. Introduction à HTML5, CSS3 et au responsive web design ................................ 5 Les smartphones sont importants (au contraire d’IE) ................................................ 6 Un design réactif est-il toujours un bon choix ? ........................................................... 7 Définir le responsive web design . ................................................................................... 8 Pourquoi s’arrêter au responsive design ? ...................................................................... 8 Exemples de responsive web design ............................................................................... 9 Se procurer les outils pour tester les zones de visualisation ............................... 9 Sources d’inspiration en ligne ................................................................................. 16 HTML5 est formidable ..................................................................................................... 17 Gagner du temps et réduire le code avec HTML5 ............................................... 17 Nouvelles balises sémantiques en HTML5 ........................................................... 18 CSS3 et designs réactifs . .................................................................................................. 19 CSS3 ne casse rien ! . ................................................................................................. 19 CSS3 peut-il résoudre tous les problèmes de design ? ......................................... 20 Construire un bouton sans image . .................................................................................. 23 Quels sont les autres avantages de CSS3 ? . ........................................................... 23 HTML5 et CSS3 sont-ils opérationnels aujourd’hui ? ................................................ 25 Les designs réactifs ne sont pas magiques .................................................................... 26 Expliquer à nos clients que les sites n’ont pas le même aspect dans tous les navigateurs .................................................................................................. 27 Synthèse . ............................................................................................................................. 28 2. Media queries : gérer différentes zones de visualisation ...................................... 29 Les media queries sont utilisables aujourd’hui ............................................................. 29 Un design réactif a besoin de media queries ................................................................. 30 Syntaxe des media queries . ...................................................................................... 30 © 2013 Pearson France – Responsive Web Design – Ben Frain 2511-ResponsiveWebDesign.indb 7 15/01/13 11:42 VIII Responsive Web Design avec HTML5 et CSS3 Que testent les media queries ? ....................................................................................... 33 Utiliser les media queries pour modifier un design . ............................................ 34 Le meilleur moyen de charger des media queries ................................................ 34 Notre premier design réactif ............................................................................................ 34 Pas de panique, notre design est à largeur fixe . .................................................... 35 Designs réactifs – limiter l’impact des images . .................................................... 39 Le contenu est tronqué dans les plus petites zones de visualisation . ................ 40 Empêcher les navigateurs mobiles d’autoredimensionner les pages ......................... 42 Améliorer le design pour différentes largeurs de zones de visualisation . ............... 45 Priorité au contenu avec un design réactif . ................................................................... 46 Les media queries ne sont qu’une partie de la solution ............................................... 50 Une mise en page fluide est nécessaire . ................................................................. 51 Synthèse . ............................................................................................................................. 51 3. Adopter les mises en page fluides ................................................................................ 53 Les mises en page fixes ne sont pas à l’épreuve du temps .......................................... 54 Une mise en page proportionnelle est essentielle pour un design réactif . ............... 54 Transformer un design fixe en design proportionnel ................................................... 55 Une formule à retenir . ............................................................................................... 55 Définir un contexte pour les éléments proportionnels ......................................... 57 Il est essentiel de se rappeler le contexte ................................................................ 63 Utiliser des em et non des pixels pour la typo .............................................................. 65 Images fluides . .................................................................................................................. 67 Redimensionner les images en fonction de la zone de visualisation ................. 68 Des règles spécifiques pour des images spécifiques . ........................................... 70 Contrôler les images fluides ..................................................................................... 71 L’incroyable propriété versatile max-width . .......................................................... 72 Servir des images différentes pour différentes tailles d’écran ................................... 73 Mise en place de la solution Adaptive Images ...................................................... 74 Stocker les images d’arrière-plan ............................................................................ 76 Rencontre entre grilles fluides et media queries . ......................................................... 78 Systèmes de grilles CSS ................................................................................................... 78 Construire rapidement un site avec un système de grille .................................... 79 Synthèse . ............................................................................................................................. 84 © 2013 Pearson France – Responsive Web Design – Ben Frain 2511-ResponsiveWebDesign.indb 8 15/01/13 11:42 Table des matières IX 4. HTML5 pour les designs réactifs ................................................................................ 85 Les composants HTML5 utilisables dès maintenant .................................................. 86 La plupart des sites peuvent être écrits en HTML5 ............................................. 86 Polyfills, shims et Modernizr ................................................................................... 86 Écrire des pages en HTML5 . .......................................................................................... 87 HTML5 est économique ........................................................................................... 88 Une approche intelligente du balisage HTML5 .................................................... 89 Vive la puissante balise <a> ..................................................................................... 90 Fonctionnalités HTML obsolètes ............................................................................ 90 Nouveaux éléments sémantiques de HTML5 ............................................................... 91 L’élément <section> ................................................................................................... 91 L’élément <nav> ......................................................................................................... 92 L’élément <article> . ................................................................................................... 92 L’élément <aside> . ..................................................................................................... 92 L’élément <hgroup> ................................................................................................... 93 L’élément <header> . .................................................................................................. 94 L’élément <footer> ..................................................................................................... 95 L’élément <address> .................................................................................................. 95 Usage pratique des éléments de structure HTML5 . .................................................... 95 Que devient le contenu principal du site ? ............................................................. 101 Éléments HTML5 pour les textes ................................................................................... 101 L’élément <b> . ............................................................................................................ 102 L’élément <em> .......................................................................................................... 102 L’élément <i> .............................................................................................................. 102 Appliquer des balises sémantiques aux textes . ..................................................... 102 Rendre un site accessible avec WAI-ARIA . ................................................................. 104 Points de contrôles ARIA ......................................................................................... 104 Incorporer des médias en HTML5 ................................................................................. 107 Ajouter vidéo et audio à la manière HTML5 . .............................................................. 107 Fournir des fichiers source alternatifs .................................................................... 109 Solutions de repli pour les anciens navigateurs . ................................................... 110 Les balises audio et video fonctionnent presque à l’identique . .......................... 110 Vidéos réactives ................................................................................................................. 110 © 2013 Pearson France – Responsive Web Design – Ben Frain 2511-ResponsiveWebDesign.indb 9 15/01/13 11:42 X Responsive Web Design avec HTML5 et CSS3 Applications web hors connexion ................................................................................... 113 Les applications web hors connexion en quelques mots . .................................... 114 Faire fonctionner les pages web hors connexion .................................................. 114 Comprendre le fichier manifest ................................................................................ 115 Chargement automatique des pages dans le cache ............................................... 115 Commentaire à propos de cette version ................................................................. 116 Consulter le site hors connexion .............................................................................. 116 Dépanner les applications web hors connexion .................................................... 117 Synthèse . ............................................................................................................................. 117 5. CSS3 : sélecteurs, typographie et modes de couleurs ............................................ 119 Ce que CSS3 offre au développeur frontal .................................................................... 120 Gestion de CSS3 avec les versions 6 à 8 d’Internet Explorer ............................ 120 Utiliser CSS3 pour concevoir et développer des pages . ...................................... 120 Anatomie d’une règle CSS ............................................................................................... 121 Les préfixes des navigateurs et leur mode d’emploi . ................................................... 121 Astuces CSS3 utiles et rapides ........................................................................................ 123 Plusieurs colonnes avec CSS3 .................................................................................. 123 Retours à la ligne ........................................................................................................ 126 Nouveaux sélecteurs CSS3 mode d’emploi ................................................................... 128 Sélecteurs d’attributs CSS3 . ..................................................................................... 128 Sélecteurs d’attributs avec correspondance de chaîne ......................................... 128 Exemple pratique et concret ..................................................................................... 129 Les pseudo-classes de structure CSS3 ........................................................................... 130 Le sélecteur :last-child . ........................................................................................... 131 Les sélecteurs nth-child ........................................................................................... 134 Comprendre les règles nth ....................................................................................... 135 Le sélecteur de négation (:not) ................................................................................ 137 Modifications apportées aux pseudo-éléments ............................................................. 138 :first-line est-il pratique pour un design réactif ? . ................................................ 138 Typographie web personnalisée ...................................................................................... 140 La règle @font-face ................................................................................................... 140 Implémenter des polices web avec @font-face ..................................................... 141 © 2013 Pearson France – Responsive Web Design – Ben Frain 2511-ResponsiveWebDesign.indb 10 15/01/13 11:42 Table des matières XI SOS, mes titres @font-face sont flous ............................................................................ 144 Typo personnalisée @font-face et responsive design . ......................................... 146 Nouveaux formats de couleurs et transparence alpha ................................................. 147 Couleurs RVB ............................................................................................................ 147 Couleurs HSL ............................................................................................................ 148 Valeurs de repli pour les couleurs avec IE6, IE7 et IE8 . ................................... 149 Canal alpha . ............................................................................................................... 149 Synthèse . ............................................................................................................................. 151 6. Superbes effets esthétiques avec CSS3 ....................................................................... 153 Textes ombrés avec CSS3 ................................................................................................. 154 Couleurs autorisées : HEX, HSL ou RVB ............................................................. 154 Pixels, em ou rem ...................................................................................................... 155 Limiter la portée de text shadow . ................................................................................... 156 Ombres à gauche et en haut ..................................................................................... 157 Créer un effet relief avec text-shadow . ......................................................................... 158 Plusieurs ombres pour un texte . ..................................................................................... 158 Éléments ombrés ............................................................................................................... 159 Ombre interne ............................................................................................................ 160 Plusieurs ombres . ...................................................................................................... 161 Dégradés d’arrière-plan .................................................................................................... 162 Dégradés linéaires d’arrière-plan ........................................................................... 162 Dégradé radial d’arrière-plan .................................................................................. 165 Répéter un dégradé ........................................................................................................... 169 Motifs de dégradés d’arrière-plan .................................................................................. 171 Réflexions sur le couple design réactif et CSS3 . .......................................................... 173 Fusionner les propriétés CSS3 ......................................................................................... 174 Plusieurs images d’arrière-plan ....................................................................................... 178 Propriété background size ........................................................................................ 180 Propriété background position ............................................................................... 181 Propriété background raccourcie . ......................................................................... 181 Plus de fonctionnalités CSS3 ........................................................................................... 181 Les icônes ajustables sont parfaites pour un design réactif ........................................ 181 Synthèse . ............................................................................................................................. 182 © 2013 Pearson France – Responsive Web Design – Ben Frain 2511-ResponsiveWebDesign.indb 11 15/01/13 11:42 XII Responsive Web Design avec HTML5 et CSS3 7. Transitions, transformations et animations avec CSS3 ........................................ 185 Transitions CSS3 mode d’emploi .................................................................................... 186 Les propriétés d’une transition . ............................................................................... 187 Transitions amusantes pour un site réactif . ........................................................... 190 Transformations 2D . ........................................................................................................ 190 Que pouvons-nous transformer ? ............................................................................. 191 Aborder les transformations 3D ...................................................................................... 195 Disséquer l’effet 3D .................................................................................................. 198 Les transformations 3D ne sont pas encore prêtes .............................................. 201 Animation en CSS3 ........................................................................................................... 201 Fusionner transformations et animations CSS3 ................................................... 205 Synthèse . ............................................................................................................................. 207 8. À la conquête des formulaires avec HTML5 et CSS3 ........................................... 209 Les formulaires HTML5 .................................................................................................. 210 Comprendre les composants d’un formulaire HTML5 ...................................... 212 input type en HTML5 ...................................................................................................... 216 email ............................................................................................................................ 216 number ........................................................................................................................ 217 url ................................................................................................................................. 218 tel . ................................................................................................................................ 219 search .......................................................................................................................... 220 pattern ......................................................................................................................... 221 color . ........................................................................................................................... 222 Saisie de date et d’heure .................................................................................................. 222 date ............................................................................................................................... 222 month . ......................................................................................................................... 223 week ............................................................................................................................. 224 time .............................................................................................................................. 224 datetime et datetime-local ....................................................................................... 224 range . .......................................................................................................................... 226 Gérer les navigateurs incompatibles .............................................................................. 227 Styler un formulaire HTML5 avec CSS3 ..................................................................... 229 Les sélecteurs dédiés de pseudo-classes CSS3 ..................................................... 233 Synthèse . ............................................................................................................................. 235 © 2013 Pearson France – Responsive Web Design – Ben Frain 2511-ResponsiveWebDesign.indb 12 15/01/13 11:42 Table des matières XIII 9. Résoudre les défis liés à la compatibilité des sites réactifs avec tous les navigateurs ................................................................................................ 237 Amélioration progressive vs. dégradation élégante ..................................................... 242 La réalité ..................................................................................................................... 243 Doit-on traiter les anciennes versions d’Internet Explorer ? ...................................... 243 Statistiques (encore) .................................................................................................. 244 Choix personnels ........................................................................................................ 244 Modernizr est le couteau suisse du développeur web .................................................. 245 Régler les problèmes de style avec Modernizr ..................................................... 247 Gérer les éléments HTML5 pour les anciens IE ................................................. 250 Ajouter la gestion des attributs min/max d’une media query à Internet Explorer 6, 7 et 8 .................................................................................... 251 Chargement conditionnel avec Modernizr ............................................................. 253 Transformer les liens de navigation en menu déroulant (conditionnellement) ........ 255 Les écrans à haute résolution (le futur) .......................................................................... 258 Synthèse . ............................................................................................................................. 261 Index. ........................................................................................................................................... 263 © 2013 Pearson France – Responsive Web Design – Ben Frain 2511-ResponsiveWebDesign.indb 13 15/01/13 11:42 ">
/
Herunterladen
Nur eine freundliche Erinnerung. Sie können das Dokument direkt hier ansehen. Aber was am wichtigsten ist, unsere KI hat es bereits gelesen. Sie kann komplexe Dinge einfach erklären, Ihre Fragen in jeder Sprache beantworten und Ihnen helfen, auch in den längsten oder kompliziertesten Dokumenten schnell zu navigieren.
Öffentlicher Link aktualisiert
Der öffentliche Link zu Ihrem Chat wurde aktualisiert. Sie können Ihre Chat-Links nach der Registrierung hier einsehen und verwalten.
