123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <ul>
- <li>Qu’est-ce qu’un thème ?
- <ul>
- <li>Thèmes, templates, moteurs et hooks : Twig, Nyan</li>
- <li>Place des framework CSS</li>
- <li>Autres composants : CSS, JS, images, styles d’image, breakpoints…</li>
- <li>Prétraitements</li>
- <li>Thèmes de front et de back</li>
- <li>Régions et blocs</li>
- <li>De la maquette au thème</li>
- </ul>
- </li>
- <li>Le modèle d’héritage et les thèmes
- <ul>
- <li>Thème de base et sous-thèmes
- <ul>
- <li>Les thèmes D8 Core : Stark, Stable, Classy, Seven, Bartik</li>
- <li>Les thèmes de base contrib : Bootstrap, Zurb Foundation, Omega</li>
- </ul>
- </li>
- <li>Héritage des assets
- <ul>
- <li>libraries</li>
- <li>libraries-extend</li>
- <li>libraries-override</li>
- </ul>
- </li>
- <li>Héritage de templates</li>
- <li>Héritage CSS
- <ul>
- <li>Cascade CSS</li>
- <li>SMACSS 1: concepts</li>
- <li>SMACSS 2: architecture CSS</li>
- </ul>
- </li>
- <li>Héritage et compilateurs CSS</li>
- </ul>
- </li>
- <li>Le contenu d’un thème
- <ul>
- <li>Thème minimal</li>
- <li>Exercice: thème nu</li>
- <li>Ajout d'un framework CSS: Bootstrap</li>
- <li>Exercice: observer Bootstrap</li>
- <li>configuration: styles d’image</li>
- <li>la hiérarchie des templates</li>
- <li>dossiers</li>
- <li>ajouter du CSS – libraries</li>
- <li>ajouter du JS – libraries</li>
- <li>Exercice : créer un thème affichant un texte fixe</li>
- </ul>
- </li>
- <li>Twig 1 : mécanismes de base
- <ul>
- <li>Le format Twig</li>
- <li>Variables</li>
- <li>Littéraux, interpolation de chaînes</li>
- <li>Expressions</li>
- <li>Fonctions et arguments (nommés)</li>
- <li>Opérateurs mathématiques, logiques, binaires, et comparateurs</li>
- <li>Structures de contrôle</li>
- <li>Commentaires</li>
- <li><em>Exercice : afficher le nom de l’utilisateur connecté</em></li>
- </ul>
- </li>
- <li>
- <ul>
- <li>Twig 2 : intégration Twig/D8</li>
- <li>Développer avec Twig :
- <ul>
- <li>development.services.yml</li>
- <li>debug mode</li>
- <li>Caching vs refresh</li>
- </ul>
- </li>
- <li>Filtres Twig D8
- <ul>
- <li>traduction</li>
- <li>localisation</li>
- <li>échappement</li>
- <li>traitement des tableaux d’affichage</li>
- </ul>
- </li>
- <li>Fonctions Twig D8 : URLs de contenu, assets, bibliothèques</li>
- <li>Ajout de code JS</li>
- <li>Show/hide() pour la hiérarchie des tableaux d’affichage</li>
- <li><em>Exercice long: construire un thème utilisable</em></li>
- </ul>
- </li>
- <li>-- Fin de la première journée --</li>
- <li>Twig 3 : mécanisme évolués
- <ul>
- <li>Contrôle de l’espacement</li>
- <li>Liens entre templates : include</li>
- <li>Aparté : block/extends, use, embed</li>
- <li>Sécurité : échappement</li>
- <li>Macros</li>
- <li><em>Quiz</em></li>
- </ul>
- </li>
- <li>Création du markup et styling
- <ul>
- <li>HTML5 et D8 : éléments sémantiques</li>
- <li>Accessibilité et web sémantique : RDF, rôles ARIA</li>
- <li>Accessibilité : annonces ARIA</li>
- <li>Accessibilité : gérer le clavier avec le tabbing manager, devel_ally</li>
- <li>CSS : gestion i18n LTR/RTL</li>
- <li>Conventions de nommage BEM, SMACSS et D8</li>
- <li>Compilation CSS : LESS, SASS, Stylus</li>
- <li>Impact de l’agrégation Drupal sur les styles</li>
- <li><em>Quiz</em></li>
- </ul>
- </li>
- <li>Conception de thèmes responsive
- <ul>
- <li>Media queries</li>
- <li>Déboguage des queries avec les outils de développement Chrome</li>
- <li>D8 : breakpoints, groupes de breakpoints et multiplicateurs</li>
- <li>Intégration aux modules spécifiques</li>
- <li><em>Exercice : thémer une vue Views responsive sur 2 formats</em></li>
- </ul>
- </li>
- <li>Theming D8 Avancé
- <ul>
- <li>Theming Javascript : Drupal.theme()</li>
- <li>Définir des réglages pour son thème</li>
- <li>Définir un moteur de thème : exemple Nyan cat</li>
- <li>Définir de nouvelles fonctionnalités Twig: filtres, tags, fonctions, tests</li>
- <li>Exercice : définir un paramètre pour son thème</li>
- </ul>
- </li>
- <li><em>Exercice final long : thème responsive basé sur Bootstrap</em></li>
- </ul>
- </body>
- </html>
|