Découvrir Drupal Les meilleurs thèmes et modules Drupal (présenta5on démo) Tour d horizon des principales fonc5onnalités de Drupal au travers de la présenta5on de quelques- uns de ses principaux modules et du thème Omega Romain Jarraud Consultant, Trained People Dorian Marchand Co- funder & CEO, Kernel 42 1
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 2
I - Introduction Drupal en Bref 21 773 modules 1 720 thèmes 626 Distribu5ons 25 733 Développeurs + 1 M de sites en produc5on + de 10 ans d existence Actuellement en version 7.22 Version 8 prévue pour 2014 3
I - Introduction Ce qu il faut savoir Drupal, un CMS (Content Management System) mais surtout un CMF (Content Management Framework) Un ou5l de développement pour les développeurs avec un back- office simple et personnalisable pour l u5lisateur final 4
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 5
II Zoom sur le module «Field» du core de Drupal Gérez la structuration de vos données Field permet de construire ses propres «Bundle» (types de contenus) Créer vos gabarits de contenu Ajouter et paramétrer des champs Paramétrer l affichage des champs 6
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 7
III Gérez l affichage Quelques modules Views, un puissant Query Builder Construisez vos pages sans écrire une ligne de code Panels, créez et configurez vos Layout, au clic Context, gérez des affichages contextuels Edit, éditez vos contenus sans passer par le formulaire d édi5on 8
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 9
IV L e-commerce en Drupal Le module Drupal Commerce Drupal Commerce, est une suite de modules et d API permehant de construire rapidement une e- bou5que complète à par5r de Drupal Panier, taxes, livraisons, stocks, aperçus, catégories de produits, commandes, etc. Et une distribu5on Commerce Kickstart, est une solu5on e- commerce complète clé en main, basée sur Drupal et Drupal Commerce By 10
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 11
V Groupes, communautés, encapsulation Le module Groups, Communities and Co. (G.C.C.) G.C.C. est une suite de modules et d API permehant de construire rapidement, à par5r de Drupal, des solu5ons impliquant des probléma5que de regroupement et d organisa5on de données, d u5lisateurs et de fonc5onnalités Intranet, RSE, plateformes collabora5ves, ou5ls de ges5on mé5er & de projets, GED Créer et gérer des groupes Gérer les membres et les inscrip5ons Gérer les rôles et les permissions Contextualiser les groupes Menus, thèmes, blocs Gérer les contenus et les audiences de publica5on API de développement By 12
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 13
VI internationalisation Le module i18n i18n étend les fonc5onnalités mul5lingue du core de Drupal Traduc5on des termes de taxonomie Ges5on mul5lingue des variables Ges5on mul5lingue des blocs Affichage contextuel Ges5on mul5lingue des URL Ges5on mul5lingue des menus Sélec5on de la langue du site 14
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 15
VII Quelques modules pour les développeurs Des outils pour le développement Drush, administrer Drupal en ligne de commandes Devel, un précieux ou5l de debug Administra5on menu, affiche un menu d administra5on plus ergonomique 16
Sommaire I. Introduction II.Zoom sur le module «field» du core de Drupal III.Gérer l affichage IV.L e-commerce en Drupal V.Groupes, communautés, encapsulation VI.Internationalisation VII.Quelques modules pour les développeurs VIII.Thème et mobile : Omega IX.Questions 17
Contenu et présentation Contenu de qualité Présenta5on de qualité La présenta5on est ce qui nous touche en premier, avant le contenu lui- même Le fond et la forme doivent être séparés; les fonc5onnalités du site sont indépendantes de la charte graphique 18
Les thèmes avec Drupal Drupal main5ent la sépara5on fonc5onnalités/présenta5on : les modules sont développés indépendemment de l affichage Une charte graphique est un thème Il existe des centaines de thèmes pour Drupal. Certains sont des thèmes «prêts à l emploi» alors que d autres sont des thèmes de base sur lesquels on développe afin de personnaliser la charte graphique. Lorsque l on réalise le thème de son site, on ne part donc pas de zéro et on bénéficie du travail de la communauté. 19
Les attentes Responsive Design : le thème s adapte en fonc5on de la taille de la fenêtre de l u5lisateur. HTML5 : langage permehant de mieux décrire le contenu des pages aux moteurs de recherche et d intégrer des anima5ons. Mobile First : le support mobile est le point de départ, puis on enrichit la présenta5on suivant l espace disponible de l écran. Temps de développement raisonnable : créer un thème moderne fonc5onnellement est coûteux en temps, on u5lise donc un thème de base proposant les fonc5onnalités souhaitées. 20
Responsive design 21
Responsive design 22
Responsive design 23
Thèmes pour Drupal Omega : très forte adop5on Zen : le plus u5lisé Adap5ve Theme : fonc5onnalités avancées mais souffre d une grande complexité Bootstrap : basé sur le framework Twiher Bootstrap Et bien d autres... 24
Omega Omega intègre de base tous les ou5ls modernes Responsive Design HTML 5 Système de grille Grid960 fluid Mobile first Interface u5lisateur avancée 25
Système de grille Découpage de l espace en colonnes 12, 16 ou 24 Chaque zone du site occupe une largeur mul5ple de colonne La largeur d une colonne est propor5onnelle à la largeur totale disponible. La grille est dite Fluide. 26
Sections, zones et régions Sec$on Sec5ons : groupement de zones Zone Zones : groupement de régions Régions : affichent les contenus Région 27
Sections Section entête Section contenu Section pied de page 28
Section contenu - zones Zone préface Zone contenu Zone postscript 29
Zone contenu - Régions Région préface 1 Région préface 2 Région préface 3 Région première barre latérale Sec5on Région contenu Région seconde barre latérale Région postscript 1 Région postscript 1 Région postscript 1 Région postscript 1 30
L interface d Omega Configurer le posi5onnement des régions Définir des points de rupture entre les différentes présenta5ons : Mobile (défaut) pour les smartphones Etroit > 740px pour les tablehes (portrait) et les smartphones (paysage) Normal > 980px pour les PC/MAC de bureau Large > 1220px pour les écrans larges Afficher la grille et les régions Ac5ver/désac5ver les styles 31
Démonstration 32
Variations sur le même thème Les pages sont rarement iden5ques sur l ensemble d un site Les styles sont les mêmes, mais la structure des pages varie Cela implique d avoir différents gabarits correspondants à des sec5ons du site Omega permet de créer ces gabarits dans l interface de Drupal 33
Démonstration 34
Gestion des médias Les médias doivent aussi s'adapter aux différents appareils : images, video, slideshows... D autres éléments doivent également être pris en charge : menus, tableaux... Les plugins jquery (ou autres) peuvent être intégrés aisément : fitvids, flexslider... 35
Démonstration 36
Et ensuite? Omega est en constant développement; les évolu5ons s orientent vers : L améliora5on de l interface de configura5on des zones et régions : aperçu direct et drag&drop L u5lisa5on possible d autres systèmes de grille L ajout de bibliothèques javascript permehant de rendre compa5ble les anciens navigateurs avec les technologies actuelles. 37
MERCI 38
Des questions? Retrouvez- nous sur le point démo de Drupal Dorian Marchand Co- funder & CEO, Kernel 42 Romain Jarraud Consultant, Trained People d.marchand@kernel42.com 06 48 29 31 69 Romain.jarraud@trainedpeople.com 06 11 75 24 88 39