HTML5 et CSS3 pour des sites Responsive Web Design

Transcription

1 Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur Web Les objectifs Mozilla Firefox Google Chrome Apple Safari Microsoft Internet Explorer 16 G. Télécharger les exemples 17 Chapitre 2 : Des solutions pour la compatibilité A. La disparité des navigateurs 21 B. Pour une meilleure compatibilité 21 C. Le rendu initial des navigateurs La problématique Le reset universel Le reset d'eric Meyer 22 1/12

2 4. Le reset d'html5 Doctor 22 D. Normalize.css Le projet Télécharger Normalize.css Installer Normalize.css 25 E. L'HTML5 et html5shiv.js L'objectif Le fichier d'exemple La librairie html5shiv.js 28 F. Les requêtes de média et respond.js L'objectif Le fichier d'exemple La librairie respond.js 31 G. Les solutions de rechange et Modernizr.js L'objectif Télécharger Modernizr Créer une page d'exemple Installer et lier le script Modernizr La mise en action de Modernizr Utiliser les classes de Modernizr Utiliser Modernizr avec du JavaScript 39 H. Les L'objectif Utiliser les Les opérateurs 44 Chapitre 3 : La mise en page classique 2/12

3 A. Les designers et les intégrateurs 47 B. Le modèle des boîtes 47 C. Les marges des éléments 48 D. L'affichage des éléments 48 E. L'affichage dans le flux courant 49 F. L'affichage en position absolue 50 G. L'affichage en position fixée 51 H. L'affichage en position relative 53 I. Utiliser l'affichage en position relative et absolue 53 J. L'affichage des boîtes flottantes Le positionnement flottant Placer des boîtes côte à côte Interdire le flottement Un exemple avec quatre boîtes Une mise en page simpliste Conclusion sur la mise en page en élément flottant 68 Chapitre 4 : La mise en page à l'aide des tableaux A. L'objectif 71 3/12

4 B. La propriété display 71 C. Une mise en page simple avec un tableau 73 D. La largeur d'affichage du tableau 74 E. Les éléments anonymes 74 F. D'autres éléments pour les tableaux Les paragraphes en cellule Les listes en tableau 76 G. L'affichage des lignes 77 H. Définir la largeur des cellules Les largeurs fixes Les largeurs en pourcentage 79 I. Une mise en page avec un tableau plus structuré 80 J. Les autres propriétés d'affichage La propriété table-layout La propriété border-collapse La propriété border-spacing La propriété empty-cells La propriété caption-side 89 K. L'alignement vertical 91 L. Conclusion 92 4/12

5 Chapitre 5 : Les grilles de mise en page A. L'objectif 95 B. La structure des grilles pour le Web 96 C. Les grilles fixes 97 D. La grille fixe 960gs La grille Les fichiers CSS La page d'exemple Les liaisons aux feuilles de style Les styles personnels Le conteneur de la mise en page Les blocs sur 12 colonnes Les blocs placés sur des colonnes dans la grille Interdire les blocs flottants adjacents Les blocs placés avec un décalage Les blocs centrés Le code complet de la page 108 E. La grille fixe notjustagrid Le framework La grille La page d'exemple Les fichiers CSS Les liaisons aux feuilles de style Les styles personnels Le conteneur de la mise en page Le système des classes Un bloc sur la largeur de la grille Trois blocs sur un tiers de la grille Deux blocs sur 3/5e et 2/5e de la grille 116 5/12

6 12. Un seul bloc sur les 2/3 de la grille Le code complet de la page 117 F. La grille fluide Gridiculous Les grilles fluides La grille Gridiculous La page d'exemple Télécharger la grille Installer la grille Des styles personnels Le conteneur Les lignes Trois blocs de même largeur Deux blocs de largeur différente Un bloc décalé Affichage de la grille fluide 127 Chapitre 6 : Les Media Queries A. L'objectif 131 B. Les origines 131 C. Utiliser les requêtes de média 131 D. La syntaxe des requêtes de média 132 E. Les fonctionnalités à tester 133 F. Où placer les requêtes de média 134 G. La taille des écrans des mobiles 135 6/12

7 H. La notion de viewport 137 I. Un exemple très simple La maquette Le code HTML et CSS 142 J. Une grille responsive La grille Télécharger et installer la grille Créer une page simple sur 12 colonnes Les liaisons aux styles et aux scripts La structure de la mise en page Les règles CSS 152 K. Exemples de sites avec des requêtes de média 154 Chapitre 7 : La mise en page responsive A. Le design responsive 159 B. Les grilles responsives 159 C. La grille responsive Simple Grid Utiliser Simple Grid Télécharger et installer Simple Grid Les lignes La maquette La première ligne La deuxième ligne La troisième ligne Utiliser la grille fluide et responsive Le code complet 168 7/12

8 D. La grille responsive Columnal Utiliser Columnal Télécharger et installer Columnal La maquette Le conteneur et les lignes La première ligne La deuxième ligne La troisième ligne et le décalage La quatrième ligne et les blocs imbriqués Utiliser la grille fluide et responsive Le code complet de la mise en page Les images responsives Le code complet de la mise en page avec l'image responsive 185 E. L'utilisation des images 185 F. Les images fluides L'objectif La mise en page fixe La mise en page fluide La largeur fluide des autres éléments Les largeurs des images fluides Afficher et redimensionner la page Le code complet de la page 194 G. Le script Response.js Utiliser le JavaScript Télécharger les JavaScript Les liaisons aux JavaScript Préparer les images Le code de la page Le fonctionnement du script Optimiser les légendes Le code complet de la page 201 8/12

9 H. Le script picturefill.js Utiliser le JavaScript Télécharger le JavaScript Les liaisons aux JavaScript Préparer les images Le code de la page L'affichage de l'image responsive Le code pour des écrans haute définition (Retina) Le code complet de la page 206 I. Le script responsive-images.js Utiliser le JavaScript Télécharger la démonstration Le code de la page Utiliser la page 209 J. Les propositions d'avenir Les groupes de travail : RICG et W3C Les groupes de travail : Apple et W3C 212 K. La typographie responsive L'objectif Les unités utilisées L'unité em et la cascade L'unité rem et la cascade La typographie responsive et l'unité rem La typographie responsive et les polices de caractère Les unités liées au viewport 218 L. Les tableaux responsives L'objectif La solution Zurb La solution de Goeff Yuen 224 9/12

10 4. La solution de Chris Coyier D'autres solutions 231 Chapitre 8 : Les frameworks CSS A. Utiliser les frameworks CSS 239 B. Des frameworks CSS 239 C. Le framework UIkit Utiliser UIkit Télécharger le framework Télécharger jquery Installer le framework Créer une grille fluide Utiliser la grille fluide Utiliser la grille responsive d'uikit Créer une barre de navigation Créer un tableau mis en forme 256 D. Le framework Kube Utiliser Kube Télécharger le framework Installer le framework Créer une grille fluide et responsive Utiliser la grille fluide et responsive Insérer un formulaire Insérer des boutons 270 E. Le framework Pure Utiliser Pure Télécharger le framework Lier le framework /12

11 4. Utiliser la grille fluide responsive Insérer un tableau Insérer une barre de menu avec un menu déroulant 278 Chapitre 9 : Le futur de la mise en page A. Les objectifs 285 B. Le multicolonnage Le principe d'utilisation Mise en place des colonnes Mise en place des gouttières Mise en place des sauts de colonnes Répartition sur plusieurs colonnes Un générateur de multi-colonnes Les colonnes et le design responsive 291 C. Les boîtes flexibles Placer les éléments de mise en page Le module des boîtes flexibles Les boîtes flexibles L'orientation et le sens des boîtes Le débordement des boîtes L'orientation des boîtes L'alignement horizontal des boîtes L'alignement vertical des boîtes Les exceptions dans l'alignement vertical Les exceptions dans l'alignement horizontal Les propriétés de flexibilité La propriété flex-grow Les propriétés flex-shrink et flex-basis Des constructeurs en ligne Un exemple de mise en page flexible /12

12 D. Les autres modules du W3C L'habillage Les grilles Le modèle de page La mise en page Les régions 322 Index /12