Drupal 7 Designer

Pour vous inscrire, cliquez ici

Public concerné et pré-requis

  • Web designers souhaitant créer des thèmes Drupal, ou concevoir des chartes graphiques qui tiennent compte de la “philosophie Drupal” pour qu’ils soient plus faciles à intégrer ensuite.
  • Développeurs ou intégrateurs amenés à travailler sur la partie thème d’un projet Drupal.

Pré requis

  • Connaître HTML et CSS (indispensable).
  • Avoir des notions de PHP (conseillé).

Objectifs de la formation

  • Comprendre le système de “theming” (habillage) de Drupal.
  • Apprendre à contrôler à 100% le HTML/CSS généré par Drupal.
  • Être 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.

Programme de la formation

IMPORTANT. La version installée et utilisée tout au long de la formation est Drupal 7, mais les différences entre Drupal 6 et 7 seront signalées — oralement, et dans le support de cours — à chaque fois que ça sera opportun. De plus, un document expliquant comment migrer de Drupal 6 à 7 sera remis aux participants pendant la formation.

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 7.
  • Les outils du webdesigner : Firebug, ColorZilla, module “Theme developer”.

Quatre grandes techniques CSS indispensables

Avant de se demander “Comment réaliser telle mise en forme avec Drupal ?”, il s’agit de se demander “Comment réaliser telle mise en forme en HTML/CSS ?”. C’est en maîtrisant bien les fondamentaux qu’il devient facile de les intégrer dans Drupal.

  • Les menus horizontaux sous forme de liste UL LI.
  • Les mises en page sans tableaux (double colonne, triple colonne…).
  • Remplacer du texte par une image.
  • Les boîtes à bords arrondis.

Comment Drupal fabrique le HTML/CSS envoyé au navigateur ?

  • Via des templates.
  • Via des fonctions de thèmes.
  • Via des modules.
  • Analyse du HTML/CSS généré par Drupal (imbrication des balises, nommage des classes et des ID…)
  • Comment intercepter chacune des options ci-dessus pour proposer sa propre version.

Personnaliser le HTML/CSS généré par Drupal (exercices)

Au fil de la formation, nous appliquerons les concepts évoqués en reproduisant (souvent partiellement) les chartes graphiques des sites suivants (dont certains ont été réalisés avec Drupal).