OSInet
/
dr821


			
							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>