Integrer une charte graphique dans Drupal 11 demande de maitriser son systeme de theming, fonde sur le moteur Twig et un mecanisme de bibliotheques CSS/JS specifique. Cette formation vous apprend a creer un theme personnalise, surcharger les templates sans modifier le code des modules, et gerer les assets avec l’architecture SMACSS. Vous aborderez egalement le responsive design avec les breakpoints Drupal pour des sites adaptes a tous les ecrans.
Public visé
Développeurs, intégrateurs, webdesigners.
Prérequis
Avoir suivi cette formation, ou en maîtriser les thèmes abordés :
Objectifs pédagogiques
À l’issue de cette formation, vous serez capable de :
- Décrire le système de theming (habillage) de Drupal
- Contrôler le HTML/CSS généré par Drupal
- Intégrer n’importe quelle charte graphique en thème Drupal
- Créer un thème personnalisé
- Modifier l’apparence d’un module sans altérer son code
Programme
Introduction
- Présentation rapide de Drupal et de son jargon (noeud, taxonomie…)
- Présentation et installation des outils de développement (WAMP, éditeur PHP, Firefox)
- Téléchargement et installation de Drupal
- 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
- Introduction à Twig
- Twig Debug
Jour 2
Système de templating Twig - Suite
- Gestion des templates
- 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
- Différents types de chargement d’une bibliothèque
Module Layout Plug-in
- Intérêts de l’approche des layouts
- Définir des layouts depuis un thème
- Utilisation avec Page Manager et Display Suite
Configuration
- Système de configuration de Drupal
- Embarquer une configuration dans un thème
- Dépendance entre configuration
JavaScript
- Gestion du JavaScript et Drupal
- Bibliothèques de base
- Ajouter un script custom
Responsive Design avec Drupal (par défaut, le thème de Drupal prend en compte le Responsive Design)
- Implémentation des points de rupture
- Gestion des images en Responsive Design
- Gestion des menus
Travaux pratiques
- Prise en main des fondamentaux de la création d’un thème avec Drupal
- Utilisation du moteur de templating Twig dans Drupal
- Utilisation des assets dans Drupal
- Utilisation du module Layout Plug-in
- Configuration d’un thème dans Drupal
- Utilisation du JavaScript dans Drupal
- Création d’un site Responsive Design avec Drupal
Modalités d’évaluation des acquis
En cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.
Voir aussi
Vous serez peut-être intéressés par les formations suivantes :
Formation DEV-DRUPAL-210 — Drupal 11 - Développeurs Front-End. Domaine : Développement. Niveau : Intermédiaire. Durée : 2 jours (14 heures). Mots-clés : drupal, php, développement, avancé, cms, web, frontend, twig, responsive. Cylian Formation, Dijon.