HTML5 et CSS3 Faites évoluer le design de vos sites web (2ième édition)

Transcription

1 Introduction A. La création de sites Web 20 B. Les langages 20 C. Le livre Pour les designers Web Le contenu 20 Chapitre 1 : L évolution de l HTML et des CSS A. Rapide historique de l Internet 24 B. L évolution de l HTML Les travaux du W3C Le HyperText Markup Language L évolution avec le XHTML Les dissidents du WHATWG L avènement du HTML Les documents HTML5 du W3C L évolution des recommandations Peut-on utiliser l HTML5? Interprétation de l HTML5 par les anciens navigateurs Ce livre et l évolution de l HTML5 40 C. L évolution des CSS L apparition des CSS L utilité des CSS Les versions des CSS L avènement des CSS L arrivée des CSS4 41 1/25

2 Chapitre 2 : La nouvelle syntaxe HTML5 A. La doctype La syntaxe en HTML 4 et XHTML La syntaxe en HTML5 44 B. Le document HTML La syntaxe en XHTML La syntaxe en HTML5 45 C. L encodage des caractères La syntaxe en HTML 4 et XHTML La syntaxe en HTML5 45 D. Les scripts 46 E. Les styles CSS 46 F. La syntaxe des éléments L objectif Les guillemets Les éléments avec la seule balise d ouverture Les éléments à balise de fermeture optionnelle La casse Les attributs booléens Les éléments HTML, HEAD et BODY La syntaxe à adopter 49 G. Les éléments obsolètes Qu est-ce un élément obsolète? Pour une meilleure accessibilité Les éléments inutilisés et confus 50 2/25

3 H. Les éléments redéfinis 50 I. Les attributs obsolètes 50 J. De nouveaux éléments L élément <hgroup> L élément <time> L élément <mark> L élément <meter> Les éléments <details> et <summary> L élément <wbr> L élément <bdi> L élément <progress> Les éléments liés aux langues asiatiques Les éléments <figure> et <figcaption> 55 K. Les modèles de contenu des éléments 56 L. L affichage des éléments En HTML En HTML5 57 Chapitre 3 : Les éléments de structure HTML5 A. Les éléments de structure en HTML Les boîtes <div> La «divite» Un contenu non sémantique 61 B. Les éléments de structure en HTML Les nouveaux éléments de structure L élément <header> 62 3/25

4 3. L élément <footer> L élément <nav> L élément <section> L élément <article> L élément <aside> L élément <main> Les boîtes <div> 64 C. L attribut sémantique role 65 D. Exemples de structure HTML Une structure simple Une structure plus élaborée La structure d un article 68 E. Les techniques de mise en page 68 Chapitre 4 : Des modèles de sites HTML5 A. Des modèles de pages en HTML5 70 B. Le modèle ArchiteXture La source L affichage du site La structure générale Le code de la structure La barre de navigation La bandeau d information La partie centrale Le pied de page 75 C. Le modèle DaFrontPage La source 76 4/25

5 2. L affichage du site La structure générale Le titre du site La barre de navigation L en-tête du site La partie centrale Le pied de page 82 D. Le modèle Learning Center La source L affichage du site La structure générale L en-tête La barre de navigation La suite de l en-tête Les articles mis en évidence La suite de la partie centrale Le pied de page 91 E. WordPress et les thèmes HTML Le thème twentythirteen L en-tête La liste des articles Le pied de page Les articles seuls 98 F. Joomla! et les templates HTML Le template Protostar L en-tête La navigation Le contenu central Le pied de page 105 Chapitre 5 : Évoluer vers les CSS3 5/25

6 A. L état des lieux Les modules en travaux Afficher les spécifications 109 B. Les préfixes des navigateurs Les spécifications et recommandations Les navigateurs et les CSS Les préfixeurs en ligne Net Tuts Prefixr prefix-my CSS CSSPrefixer Le cas Internet Explorer Un préfixeur JavaScript 116 C. L interprétation des CSS3 par les navigateurs Quelles propriétés utiliser? findmebyip - HTML5 & CSS3 Support When can I use Tester les sélecteurs CSS3 Please Browser Support Checklist CSS css3test 124 Chapitre 6 : Les nouveaux sélecteurs CSS3 A. Les sélecteurs CSS L objectif Les sélecteurs Les pseudo-classes Les pseudo-éléments Les groupes de sélecteurs 129 6/25

7 B. Les nouveaux sélecteurs CSS3 129 C. Le sélecteur adjacent général 130 D. Le sélecteur d attribut L objectif Des liens vers une adresse mail Des liens de téléchargement 132 E. La pseudo-classe d ancre L objectif La mise en place L utilisation 134 F. Les pseudo-classes de structure L objectif La racine de la page Le dernier élément enfant Les éléments enfants Les derniers éléments enfants Les premiers et derniers éléments d un type donné Les premiers éléments d un type donné Les éléments seuls Les éléments seuls d un type donné Les éléments vides Tous les éléments sauf celui spécifié 146 Chapitre 7 : La mise en forme CSS3 des boîtes A. Les nouvelles propriétés CSS3 150 B. La largeur des boîtes 150 7/25

8 1. Avec les CSS Avec les CSS3 151 C. Le débordement du contenu 152 D. Les couleurs d arrière-plan Le module des couleurs Le mode TSL Le mode TSL transparent Le mode RVB transparent Un éditeur RGBA en ligne La transparence 157 E. L état des lieux des arrière-plans et des bordures 157 F. Les coins arrondis Les préfixes Des coins identiques Des coins arrondis différents Des ellipses dans les coins Les générateurs en ligne 161 G. Les bordures fantaisistes La syntaxe du W3C Un générateur en ligne 165 H. Les ombres portées L état des lieux Créer une ombre portée Différents exemples d ombres portées Appliquer plusieurs ombres portées Les générateurs en ligne 170 I. Les dégradés 172 8/25

9 1. L état des lieux Les dégradés pour Mozilla Firefox Les dégradés pour WebKit Les dégradés par le W3C Les générateurs en ligne 176 J. Les arrière-plans multiples L objectif Un exemple simple 179 K. Les autres propriétés d arrière-plan Les navigateurs L origine d une image Rogner une image La taille de l arrière-plan 185 L. Des générateurs CSS3 en ligne L objectif WestCIV CSS 3.0 Maker CSS3 Generator CSS3 Playground CSS3 Generator Layer Style 192 M. Exemple d un tableau aux coins arrondis L objectif La structure du tableau La mise en forme du tableau Les cellules du tableau Les cellules d en-tête L arrondi des cellules Le survol des lignes 198 9/25

10 N. Exemple d ombre sur la page 199 Chapitre 8 : L HTML5 et les CSS3 pour le texte A. Les éléments de texte obsolètes La spécification HTML Les éléments inutilisés et confus La mise en forme du texte 202 B. Les éléments de texte redéfinis La spécification HTML L élément <b> L élément <strong> L élément <i> L élément <em> L élément <small> L élément <cite> L élément <dl> L élément <ol> L élément <hr> L élément <a> 204 C. Des nouvelles mises en forme de texte Les colonnes La coupure des mots 209 D. Les polices de caractères L utilisation des polices Embarquer les polices La compatibilité des navigateurs La Le nom des polices /25

11 6. Les polices locales Indiquer plusieurs sources Les styles typographiques Un générateur de polices Les polices Web en ligne Convertir des polices Choisir des polices de caractères 219 E. La taille des polices Les différentes tailles Le problème de la cascade La nouvelle unité rem 222 F. L ombre portée sur le texte Les valeurs de la propriété Des outils en ligne Quelques exemples de design 226 G. La typographie avancée L état des lieux La graisse des caractères La largeur des caractères Ajuster la taille des caractères D autres propriétés 231 Chapitre 9 : L HTML5 et les CSS3 pour les formulaires A. L objectif 234 B. Les méthodes d envoi 234 C. L élément <form> /25

12 D. Les nouveaux champs L affichage des nouveaux champs Le champ pour les s Le champ pour les numéros de téléphone Le champ pour les URL Les champs pour les dates et les heures Le champ pour les valeurs numériques Les réglettes avec curseur Les champs de recherche Le champ de saisie suggérée Le choix d une couleur Les clés publiques 242 E. La validation des formulaires La validation côté client Désactiver la validation Rendre un champ obligatoire Les saisies autorisées 244 F. Les expressions régulières Des lettres autorisées Un intervalle de lettres autorisées Des lettres autres que La casse des lettres La condition ou Des mots autorisés Autoriser des chiffres Un nombre limité de caractères Les saisies multiples Les paramètres spéciaux 249 G. Aider l utilisateur dans le formulaire L aide à la saisie Activer un champ /25

13 3. Le remplissage automatique Redimensionner un champ 251 H. Des pseudo-classes pour les formulaires Les objectifs des pseudo-classes Le formulaire et les styles L utilisation Une autre pseudo-classe Les champs requis et optionnels La mise en forme du :focus 257 I. La validation des saisies Objectif Le formulaire La mise en forme du formulaire Les champs non valides Les messages d erreur Les champs valides Les valeurs hors limites 263 J. Un premier exemple simple de formulaire L objectif La structure du formulaire Les styles généraux Le fond de la page Le formulaire Les étiquettes Les champs de saisie Le champ multiligne Le focus sur les champs Le bouton d envoi 270 K. Un deuxième exemple très sobre de formulaire L objectif La structure initiale du formulaire /25

14 3. L ombre portée du formulaire L effet de pointillés Le titre du formulaire Les filets décoratifs Les champs de saisie Le bouton de connexion L utilisation du bouton Les autres liens Le rendu final 279 L. Un exemple interactif de formulaire L objectif La structure initiale du formulaire Les options supplémentaires Le bouton d envoi Le message de confirmation Les styles généraux La mise en forme du formulaire Les étiquettes Les champs de saisie La liste déroulante Le bouton d envoi La gestion des options L affichage initial Afficher les options Masquer les options Le message de confirmation 289 M. Un dernier exemple élaboré de formulaire L objectif La structure du formulaire Les objets HTML Le code complet du formulaire L affichage brut La mise en forme générale /25

15 7. La mise en forme du formulaire La mise en forme des différentes parties La mise en forme des items de liste La mise en forme des étiquettes Les champs de type <input> Le bouton d envoi du formulaire 302 N. Créer des boutons avec des symboles L objectif Le formulaire Créer la classe des boutons Le pseudo-élément ::before Le contenu du pseudo-élément ::before Appliquer les classes L affichage du formulaire D autres exemples similaires 306 O. Les générateurs de boutons en ligne L objectif CSS3 Button CSS3 Button Generator CSS Drive Button Generator CSS3 Button Creator 310 Chapitre 10 : Les transformations CSS3 A. L état des lieux et l objectif 312 B. La transformation La propriété Le point de référence 313 C. Le déplacement /25

16 1. Sur les deux axes Sur un seul axe 315 D. La mise à l échelle La mise à l échelle proportionnelle La mise à l échelle non proportionnelle La mise à l échelle dans une seule direction 316 E. La rotation 316 F. La déformation La déformation sur les deux axes La déformation sur un seul axe 318 G. Appliquer toutes les transformations 319 H. Les générateurs en ligne CSS 3.0 Maker CSS3 Generator WestCIV 320 I. Exemple d un menu L objectif La structure du menu La mise en forme L affichage 322 J. Exemple d une galerie de Polaroid L objectif La structure de la galerie La mise en forme de la galerie La mise en forme des photos La transformation L affichage /25

17 K. Exemple de relief sur une image L objectif La photo Les ombres sous la photo 327 Chapitre 11 : Les transitions CSS3 A. L état des lieux et l objectif 332 B. Mettre en place les transitions Les transitions Les propriétés CSS 332 C. Effectuer une transition de déplacement L objectif Le code nécessaire Les propriétés de la transition Le rendu 335 D. Les autres propriétés des transitions La cinétique Le démarrage de la transition La syntaxe courte Les transitions multiples 338 E. Les générateurs en ligne CSS3 Generator CSS 3.0 Maker Créer vos courbes de Bézier 342 F. Exemple d un menu interactif L objectif /25

18 2. La mise en forme du menu Les transitions L affichage 344 G. Exemple d un diaporama interactif L objectif La structure du diaporama Les transformations Les transitions L affichage 348 H. Exemple de menu à tiroirs L objectif La structure du menu La mise en forme du menu La mise en forme des tiroirs L affichage initial Les transitions L affichage Des menus «flashy» 355 I. Exemple d accordéon L objectif La structure de l accordéon La mise en forme de l accordéon La mise en forme des zones d affichage de l accordéon L affichage 357 Chapitre 12 : Les animations CSS3 A. L état des lieux et l objectif 360 B. La construction d une animation /25

19 C. Un simple déplacement L objectif La structure L animation L affichage 364 D. Une rotation et une transparence L objectif La structure L animation L affichage 366 E. Un formulaire qui clignote L objectif La structure du formulaire La mise en forme L animation L affichage 368 F. Une fenêtre modale L objectif Le bouton La fenêtre modale Le bouton de fermeture Masquer le corps de la page L animation à l ouverture Déclencher l animation d ouverture Appliquer le masque L animation de fermeture Déclencher l animation de fermeture Le code complet L affichage de la page /25

20 Chapitre 13 : Le multimédia : audio et vidéo A. L état des lieux 382 B. Insérer de l audio L élément audio Les contrôles audio L apparence du lecteur audio Les attributs pour l audio Les formats audio Créez vos contrôles Les anciens navigateurs 386 C. Insérer de la vidéo L élément video Les attributs pour la vidéo L apparence du lecteur vidéo Les formats vidéo Convertir les vidéos 389 Chapitre 14 : Le canevas de dessin A. La création bitmap en JavaScript 392 B. Les techniques proposées 392 C. Dessiner un rectangle Le canevas Le rectangle Le code complet et l affichage Ajouter une couleur de remplissage Ajouter une ombre portée /25

21 D. Dessiner un cercle 396 E. Dessiner des tracés 397 F. Dessiner des contours 397 G. Ajouter du texte 398 H. Ajouter un dégradé 399 I. Les transformations 400 J. La manipulation des objets 400 Chapitre 15 : Le design Web adaptatif A. L état des lieux et l objectif 402 B. Les requêtes de média L objectif Avec l HTML 4 et les CSS Les critères des requêtes de média CSS La syntaxe des requêtes de média Les valeurs minimales et maximales Les opérateurs logiques Des requêtes pour différents supports 406 C. La taille des écrans La problématique actuelle La taille du viewport Les zooms à l écran /25

22 4. Tester l affichage sur des écrans 412 D. Les grilles fluides Les techniques Un exemple simple Un exemple d un site simple Réaliser un design adaptatif simple Des grilles adaptatives 429 E. Des images adaptatives Le débordement des images Imposer une largeur maximale 430 F. Créer du design adaptatif Les deux stratégies Concevoir un site adaptatif D autres exemples de design adaptatif 435 G. Le site Food Sense Les affichages La structure principale Le viewport L affichage pour les grands écrans L affichage pour les tablettes L affichage pour les smartphones 446 Chapitre 16 : Un design HTML5/CSS3 : The Cat Template A. La source 452 B. La structure HTML Les deux parties Le conteneur principal /25

23 3. L en-tête Le diaporama Le message Les quatre articles L article seul Le pied de page 458 C. La mise en forme CSS L objectif Le diaporama Les photos des articles Le survol des photos des articles Les boutons Read more 461 Chapitre 17 : Un design HTML5/CSS3 : FlipThru A. La source 464 B. La structure HTML La boîte principale La barre de navigation L en-tête La zone centrale Le pied de page 467 C. La mise en forme CSS Le conteneur principal Les images des articles 468 D. L accordéon Le fonctionnement La structure Le fond de l accordéon /25

24 4. La liste <ul> Les titres <h3> Les articles Les images des articles Les survols L apparition des articles 475 Chapitre 18 : Un design HTML5/CSS3 : dconstruct A. La source 478 B. La structure HTML La structure principale L en-tête Les orateurs Les sponsors Le pied de page 481 C. La mise en forme CSS Les polices incorporées Les ombres portées sur les textes Les ombres portées sur les conteneurs 485 D. Les effets de survol sur les orateurs Le fonctionnement La structure Les styles initiaux Le survol du lien 488 E. Le design adaptatif L affichage modifié La barre de navigation principale Le titre et le slogan /25

25 4. Les images des orateurs 493 Index /25