plan.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <ul>
  9. <li>Qu’est-ce qu’un thème ?
  10. <ul>
  11. <li>Thèmes, templates, moteurs et hooks : Twig, Nyan</li>
  12. <li>Place des framework CSS</li>
  13. <li>Autres composants : CSS, JS, images, styles d’image, breakpoints…</li>
  14. <li>Prétraitements</li>
  15. <li>Thèmes de front et de back</li>
  16. <li>Régions et blocs</li>
  17. <li>De la maquette au thème</li>
  18. </ul>
  19. </li>
  20. <li>Le modèle d’héritage et les thèmes
  21. <ul>
  22. <li>Thème de base et sous-thèmes
  23. <ul>
  24. <li>Les thèmes D8 Core : Stark, Stable, Classy, Seven, Bartik</li>
  25. <li>Les thèmes de base contrib : Bootstrap, Zurb Foundation, Omega</li>
  26. </ul>
  27. </li>
  28. <li>Héritage des assets
  29. <ul>
  30. <li>libraries</li>
  31. <li>libraries-extend</li>
  32. <li>libraries-override</li>
  33. </ul>
  34. </li>
  35. <li>Héritage de templates</li>
  36. <li>Héritage CSS
  37. <ul>
  38. <li>Cascade CSS</li>
  39. <li>SMACSS 1: concepts</li>
  40. <li>SMACSS 2: architecture CSS</li>
  41. </ul>
  42. </li>
  43. <li>Héritage et compilateurs CSS</li>
  44. </ul>
  45. </li>
  46. <li>Le contenu d’un thème
  47. <ul>
  48. <li>Thème minimal</li>
  49. <li>Exercice: thème nu</li>
  50. <li>Ajout d'un framework CSS: Bootstrap</li>
  51. <li>Exercice: observer Bootstrap</li>
  52. <li>configuration: styles d’image</li>
  53. <li>la hiérarchie des templates</li>
  54. <li>dossiers</li>
  55. <li>ajouter du CSS – libraries</li>
  56. <li>ajouter du JS – libraries</li>
  57. <li>Exercice : créer un thème affichant un texte fixe</li>
  58. </ul>
  59. </li>
  60. <li>Twig 1 : mécanismes de base
  61. <ul>
  62. <li>Le format Twig</li>
  63. <li>Variables</li>
  64. <li>Littéraux, interpolation de chaînes</li>
  65. <li>Expressions</li>
  66. <li>Fonctions et arguments (nommés)</li>
  67. <li>Opérateurs mathématiques, logiques, binaires, et comparateurs</li>
  68. <li>Structures de contrôle</li>
  69. <li>Commentaires</li>
  70. <li><em>Exercice : afficher le nom de l’utilisateur connecté</em></li>
  71. </ul>
  72. </li>
  73. <li>
  74. <ul>
  75. <li>Twig 2 : intégration Twig/D8</li>
  76. <li>Développer avec Twig :
  77. <ul>
  78. <li>development.services.yml</li>
  79. <li>debug mode</li>
  80. <li>Caching vs refresh</li>
  81. </ul>
  82. </li>
  83. <li>Filtres Twig D8
  84. <ul>
  85. <li>traduction</li>
  86. <li>localisation</li>
  87. <li>échappement</li>
  88. <li>traitement des tableaux d’affichage</li>
  89. </ul>
  90. </li>
  91. <li>Fonctions Twig D8 : URLs de contenu, assets, bibliothèques</li>
  92. <li>Ajout de code JS</li>
  93. <li>Show/hide() pour la hiérarchie des tableaux d’affichage</li>
  94. <li><em>Exercice long: construire un thème utilisable</em></li>
  95. </ul>
  96. </li>
  97. <li>-- Fin de la première journée --</li>
  98. <li>Twig 3 : mécanisme évolués
  99. <ul>
  100. <li>Contrôle de l’espacement</li>
  101. <li>Liens entre templates : include</li>
  102. <li>Aparté : block/extends, use, embed</li>
  103. <li>Sécurité : échappement</li>
  104. <li>Macros</li>
  105. <li><em>Quiz</em></li>
  106. </ul>
  107. </li>
  108. <li>Création du markup et styling
  109. <ul>
  110. <li>HTML5 et D8 : éléments sémantiques</li>
  111. <li>Accessibilité et web sémantique : RDF, rôles ARIA</li>
  112. <li>Accessibilité : annonces ARIA</li>
  113. <li>Accessibilité : gérer le clavier avec le tabbing manager, devel_ally</li>
  114. <li>CSS : gestion i18n LTR/RTL</li>
  115. <li>Conventions de nommage BEM, SMACSS et D8</li>
  116. <li>Compilation CSS : LESS, SASS, Stylus</li>
  117. <li>Impact de l’agrégation Drupal sur les styles</li>
  118. <li><em>Quiz</em></li>
  119. </ul>
  120. </li>
  121. <li>Conception de thèmes responsive
  122. <ul>
  123. <li>Media queries</li>
  124. <li>Déboguage des queries avec les outils de développement Chrome</li>
  125. <li>D8 : breakpoints, groupes de breakpoints et multiplicateurs</li>
  126. <li>Intégration aux modules spécifiques</li>
  127. <li><em>Exercice : thémer une vue Views responsive sur 2 formats</em></li>
  128. </ul>
  129. </li>
  130. <li>Theming D8 Avancé
  131. <ul>
  132. <li>Theming Javascript : Drupal.theme()</li>
  133. <li>Définir des réglages pour son thème</li>
  134. <li>Définir un moteur de thème : exemple Nyan cat</li>
  135. <li>Définir de nouvelles fonctionnalités Twig: filtres, tags, fonctions, tests</li>
  136. <li>Exercice : définir un paramètre pour son thème</li>
  137. </ul>
  138. </li>
  139. <li><em>Exercice final long : thème responsive basé sur Bootstrap</em></li>
  140. </ul>
  141. </body>
  142. </html>