|
|
@@ -0,0 +1,147 @@
|
|
|
+<!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>
|
