Formation Drupal 8 & 9 Développeur Front-End

Drupal est l’un des trois CMS (Système de Gestion de Contenu) les plus utilisés dans le monde pour créer et animer des sites Internet. En France, de nombreux sites de grande audience l’utilisent, notamment des sites de médias exigeant une maintenance facile. Ecrit en PHP, ce logiciel Open Source bénéficie d’une importante communauté de développeurs garante d’une meilleure sécurité. Il est apprécié pour sa modularité et son évolutivité.

Cette formation a pour but de maitriser la couche de theming de Drupal 8 & 9 : gestion des assets (CSS et JS) et des templates (avec le moteur de thème TWIG), fonction de preprocess, Responsive Design (breakpoint), surcharge du HTML / CSS de modules contribués et intégration d’un plugin externe.

Objectif opérationnel

Connaître le fonctionnement du développement front sous Drupal 8 & 9 afin de pouvoir piloter un projet de refonte graphique et comprendre les particularités d’un thème pour Drupal 8 & 9 afin d’être en mesure d’anticiper les temps de développement.

Objectifs pédagogiques

Concrètement, à l’issue de ce cours Drupal 8 & 9 Développeur Front-End, le participant sera capable de :

• Comprendre le système de “theming” (habillage) de Drupal.
• Apprendre à contrôler à 100% le HTML/CSS généré par Drupal.
• Etre capable d’intégrer n’importe quelle charte graphique sous forme de thème Drupal.
• Créer son propre thème.
• Changer l’apparence d’un module sans toucher au code de ce module.

Public :

Cette formation s’adresse aux web designers souhaitant créer des thèmes Drupal 8 & 9, ou concevoir des chartes graphiques qui tiennent compte de la “philosophie Drupal” pour qu’elles soient plus faciles à intégrer ensuite. Ce stage cible également les développeurs ou intégrateurs amenés à travailler sur la partie thème d’un projet Drupal.

Prérequis :

Pour profiter pleinement de ce cours, il est indispensable de connaître le langage HTML et les feuilles de style CSS. Des notions de PHP et de Responsive Design sont aussi nécessaires mais pas indispensables.

Introduction

Présentation rapide de Drupal et de son jargon (node, taxonomie…).
Présentation et installation des outils de développement (WAMP, Editeur PHP, Firefox).
Téléchargement et installation de Drupal 8.
Les outils du webdesigner : Firebug, TWIG debug.

Thème, les fondamentaux

Principe de base.
Les fichiers d’un thème.
Les différents éléments natifs de Drupal.
Thème de base et héritage.

Système de templating TWIG

Gestion des templates.
Introduction à Twig.
Twig Debug.
Surcharge de templates.
Ajouter des suggestions de template custom.

Gestion des assets

Système de bibliothèques.
Dépendances et bibliothèques natives.
Architecture SMACSS : approche Web Component.
Différents types de chargement d’une bibliothèque : code PHP, depuis un fichier de template.

Module Layout Discovery

Intérêts de l’approche des layouts.
Définir des layouts depuis un thème.
Utilisation avec Display Suite.

Configuration

Système de configuration de Drupal 8 & 9.
Embarquer une configuration dans un thème.
Dépendance entre configuration.

Javascript

Gestion du Javascript sous Drupal 8 & 9: jQuery, Drupal.behaviors et DrupalSettings.
Les bibliothèques disponibles de base.
Ajouter un script custom.

Responsive Design avec Drupal 8

Par défaut le thème de Drupal 8 & 9 prend en compte le Responsive Design.

Implémentation des points de rupture.
Gestion des images en responsive design.
Gestion des menus.

Tout au long de la formation nous développerons un thème permettant ainsi de mettre en pratique tous les points essentiels à la maitrise du theming avec Drupal 8 & 9.