SlideShare une entreprise Scribd logo
1  sur  46
Personnaliser l’interface 
administrateur de Drupal 
Drupal Camp Montreal 2014 – Symetris.ca
Libérez votre potentiel web 
avec Symetris 
*** 
• Fondé en 2004 – déjà 10 ans! 
• 12 spécialistes web 
• Développement de sites web qui vont 
au-delà du marketing 
• Maîtrise des plateformes CMS open-source 
• Optimisation mobile
À propos de nous 
Brad Muncs 
Président @ Symetris 
Matthieu Gadrat 
Développeur Web @ Symetris
Ordre du jour 
• Pourquoi personnaliser? 
• Développer un thème d'interface admin 
• Gérer les menus "éditeur" (vs. toolbar) 
• Concevoir des tableaux de bord 
• Explorer les possibilités et les limites
Pourquoi personnaliser? 
Proposer Drupal comme CMS à un client est avantageux technologiquement. Mais 
l'interface "out-of-the-box" du backend administrateur a été conçue par et pour des 
développeurs, et n'est pas nécessairement aussi intuitive qu'on pourrait le souhaiter 
pour les clients moins technophiles. De plus, si Drupal est utilisé dans le cadre d'une 
application plus complexe comme un intranet, la nécessité d'adapter les 
fonctionnalités des administateurs est essentielle.
Développer un thème 
d’interface admin
Qu’est-ce qu’un thème admin? 
• Différence entre thème admin et non-admin 
• Particularités d’un thème admin 
• Différence entre les thèmes admin pour 
développeur et pour client
Thèmes « out of the box » 
• Pour 
• Déjà testé par la communauté 
• Rapide à installer 
• Optimisé pour les développeurs 
• Contre 
• Manque toujours qqch 
• Pas optimisé pour les éditeurs de site
Thèmes « out of the box » 
• Quelques thèmes populaires de la 
communauté 
• Seven (core) 
• Rubik: drupal.org/project/rubik 
• Shiny: drupal.org/project/shiny
Thème: Seven (core)
Thème: Rubik
Thème: Shiny (on aime bien nous)
Gérer son site via le même thème 
• Pour 
• Interface similaire qui assure la continuité 
• Clarifie ce qui est édité 
• Contre 
• Thème admin conçu pour gestion 
• Obligé de créer des menus extra
Éléments obligatoire d’un thème admin 
personnalisé 
1. Action links 
2. Local tasks 
3. Messages 
4. Région d’aide
1a. Action links: Screenshot
1b. Action links: Code
2a. Local tasks: Screenshot
2b. Local tasks: Code
3a. Messages: Screenshot
3b. Messages: Code
4a. Région d’aide: Screenshot
4b. Région d’aide: Code
À garder en tête 
• Hiérarchie de l’information 
• Ergonomie 
• Couleurs
Gérer les menus « éditeur » 
(vs le Drupal toolbar)
Avantages de ne pas utiliser la toolbar 
pour le client 
• Permissions des menus selon l’API de Drupal 
(visible ou pas) 
• API gère directement 
• Retirer permissions non-utilisées 
• Less is more (moins de confusion)
Quoi inclure dans le menu (ou non) 
• Attention: Ne pas avoir trop de liens 
• Liens essentiels: 
• Tableau de bord 
• Contenu 
• Personnes 
• Rapports 
• Page de configuration (settings)
Emplacement du menu 
• Bien distinguer du reste du thème 
• Nous aimons bien le mettre en bas à gauche
Tableaux de bord sur mesure
Plan initial (avant de coder) 
• Faire un wireframe 
• N’afficher que l’information cruciale 
• Arrimer aux objectifs du client 
• Définir les views pour afficher des rapports 
d’information dans un format pratique
Views d’information 1/2 
• Aggréger le contenu 
• Calculer l’information (SUM, AVG) 
• Personnaliser le formattage des fields 
(couleurs d’indicateurs de valeurs) 
• Créer des Graphiques (c beau!)
Views d’information 2/2 
• Tableaux avec tri/filtrage de colonnes 
• Bien choisir champs tri/filtres 
• Quick links (créer, éditer, supprimer) 
• Bonne pagination de l’info 
• Admin views 
• pages Contenu 
• Pages Personnes
Opérations « batch » 
(Views Bulk Operations) 
• Changer des valeurs de champs 
• Changer des statuts
Comment tirer profit de: 
• Local tasks 
• Action links
Action links 
[ Utiliser le hook_menu() ] 
• Liens d’actions sur des pages reliées
Local tasks 
[ Utiliser le hook_menu() ] 
• Systèmes d’onglets
Autres idées cool 
• Créer des sous-pages rapports (drill-down 
d’information) 
• Intégrer data externe (ex: analytics) 
• Lien vers guide d’utilisation et contact
Module « Dashboard » de Drupal 
• Avantages 
• Drag & Drop 
• Inconvénients 
• Oblige à donner la permission de 
configurer les blocs pour personnaliser 
son dashboard
Conseil: Créez votre tableau de bord 
dans un module 
• Il sera réutilisable 
• Vous assurerez une continuité d’un site à 
l’autre que vous créez
Explorer les possibilités et limites
Suggestions intéressantes pour bonifier 
votre interface admin (1/4) 
• Quick tips, tooltips 
• Système de notification 
• Activer les révisions 
• Choisir un WYSIWYG simple 
(retirer les boutons non-utilisés)
Suggestions intéressantes pour bonifier 
votre interface admin (2/4) 
• Joyride initial (Comme Google Apps)
Suggestions intéressantes pour bonifier 
votre interface admin (3/4) 
• Icônes personnalisées (fonts)
Suggestions intéressantes pour bonifier 
votre interface admin (4/4) 
• Client side validation 
• Valider en AJAX les formulaires 
• Moins de load time 
• Field groups 
• Permet de grouper les champs 
• Gestion plus facile et efficace
EXTRA: L’avantage de « Rules » 
• Amélioration du comportement de Drupal 
• Redirection vers des pages plus appropriées 
après un événement 
• Ex: après la création d’un node, rediriger 
vers la page « node list » 
• Notifications courriel
CONCLUSION 
Personnaliser l’interface d’administration de 
Drupal 
bonifie l’expérience de gestion 
du site web pour le client. 
Mettre à jour son site web devient un plaisir 
plutôt qu’un corvée.
Merci ! 
Des questions 
Contactez-nous : 
brad@symetris.ca 
info@symetris.ca 
Présentation PPT disponible sur Slideshare 
Partagez vos opinions ou modules préférés sur 
Twitter @symetris (ou FB)

Contenu connexe

Tendances

Industrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsIndustrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsGuillaume Meyer
 
WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?Aurélien Denis
 
Drink 'n' Drupal Lille nov. 2013
Drink 'n' Drupal Lille nov. 2013Drink 'n' Drupal Lille nov. 2013
Drink 'n' Drupal Lille nov. 2013Romain Jarraud
 
Comment contribuer à Drupal
Comment contribuer à DrupalComment contribuer à Drupal
Comment contribuer à DrupalArtusamak
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continueStéphane HULARD
 
Nuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJSNuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJSNuxeo
 
Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationBenoit Tostain
 
Présentation de Kirby CMS
Présentation de Kirby CMSPrésentation de Kirby CMS
Présentation de Kirby CMSGilles Vauvarin
 
Azendoo - Agile Tour Bordeaux 2013
Azendoo - Agile Tour Bordeaux 2013Azendoo - Agile Tour Bordeaux 2013
Azendoo - Agile Tour Bordeaux 2013Christophe Gagin
 
Armportal presentation
Armportal presentationArmportal presentation
Armportal presentationLocPellicano
 
7 Session Aerow - New experience and SharePoint Framework
7   Session Aerow - New experience and SharePoint Framework7   Session Aerow - New experience and SharePoint Framework
7 Session Aerow - New experience and SharePoint FrameworkaOS Community
 
Des processus et des outils pour aider les individus et favoriser leurs inter...
Des processus et des outils pour aider les individus et favoriser leurs inter...Des processus et des outils pour aider les individus et favoriser leurs inter...
Des processus et des outils pour aider les individus et favoriser leurs inter...ATBdx
 
[Webinaire] Présentation de la création de workflow avec la Plateforme Nuxeo
[Webinaire] Présentation de la création de workflow avec la Plateforme Nuxeo[Webinaire] Présentation de la création de workflow avec la Plateforme Nuxeo
[Webinaire] Présentation de la création de workflow avec la Plateforme NuxeoNuxeo
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2Microsoft
 
Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?Jean-François Viguier
 
6 Session Aerow - New experience and SharePoint framework
6   Session Aerow - New experience and SharePoint framework6   Session Aerow - New experience and SharePoint framework
6 Session Aerow - New experience and SharePoint frameworkaOS Community
 

Tendances (20)

Joomlapero 04-02-2013
Joomlapero 04-02-2013Joomlapero 04-02-2013
Joomlapero 04-02-2013
 
Industrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsIndustrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.js
 
WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?WordPress & WooCommerce, une révolution ?
WordPress & WooCommerce, une révolution ?
 
Drink 'n' Drupal Lille nov. 2013
Drink 'n' Drupal Lille nov. 2013Drink 'n' Drupal Lille nov. 2013
Drink 'n' Drupal Lille nov. 2013
 
Comment contribuer à Drupal
Comment contribuer à DrupalComment contribuer à Drupal
Comment contribuer à Drupal
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
Nuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJSNuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJS
 
Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formation
 
Computraining
ComputrainingComputraining
Computraining
 
Présentation de Kirby CMS
Présentation de Kirby CMSPrésentation de Kirby CMS
Présentation de Kirby CMS
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
 
Azendoo - Agile Tour Bordeaux 2013
Azendoo - Agile Tour Bordeaux 2013Azendoo - Agile Tour Bordeaux 2013
Azendoo - Agile Tour Bordeaux 2013
 
Armportal presentation
Armportal presentationArmportal presentation
Armportal presentation
 
7 Session Aerow - New experience and SharePoint Framework
7   Session Aerow - New experience and SharePoint Framework7   Session Aerow - New experience and SharePoint Framework
7 Session Aerow - New experience and SharePoint Framework
 
Des processus et des outils pour aider les individus et favoriser leurs inter...
Des processus et des outils pour aider les individus et favoriser leurs inter...Des processus et des outils pour aider les individus et favoriser leurs inter...
Des processus et des outils pour aider les individus et favoriser leurs inter...
 
jQuery mobile vs Twitter bootstrap
jQuery mobile vs Twitter bootstrapjQuery mobile vs Twitter bootstrap
jQuery mobile vs Twitter bootstrap
 
[Webinaire] Présentation de la création de workflow avec la Plateforme Nuxeo
[Webinaire] Présentation de la création de workflow avec la Plateforme Nuxeo[Webinaire] Présentation de la création de workflow avec la Plateforme Nuxeo
[Webinaire] Présentation de la création de workflow avec la Plateforme Nuxeo
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
 
Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?Faut-il passer à Prestashop version 1.7 ?
Faut-il passer à Prestashop version 1.7 ?
 
6 Session Aerow - New experience and SharePoint framework
6   Session Aerow - New experience and SharePoint framework6   Session Aerow - New experience and SharePoint framework
6 Session Aerow - New experience and SharePoint framework
 

Similaire à Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014

Comment choisir son cms
Comment choisir son cmsComment choisir son cms
Comment choisir son cmsStrasWeb
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...Samuel Lévesque
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFBoubker ABERWAG
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet DrupalAdyax
 
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Grics   2017 - construisez votre intranet avec microsoft office 365 sans codeGrics   2017 - construisez votre intranet avec microsoft office 365 sans code
Grics 2017 - construisez votre intranet avec microsoft office 365 sans codeSamuel Lévesque
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasLaurent Moccozet
 
Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...Microsoft
 
Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012
Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012
Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012Chipway
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalLINAGORA
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Alexandre Marie
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressStéphane Plante
 
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiagoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiLionel Pointet
 
aOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint FrameworkaOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint FrameworkJean NETRY-VALERE
 
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...Microsoft Technet France
 
aOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint FrameworkaOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint FrameworkJean NETRY-VALERE
 
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...Benoit Jester
 

Similaire à Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014 (20)

Comment choisir son cms
Comment choisir son cmsComment choisir son cms
Comment choisir son cms
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
 
Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
Grics   2017 - construisez votre intranet avec microsoft office 365 sans codeGrics   2017 - construisez votre intranet avec microsoft office 365 sans code
Grics 2017 - construisez votre intranet avec microsoft office 365 sans code
 
Proposition site Algo
Proposition site AlgoProposition site Algo
Proposition site Algo
 
Usine à site
Usine à siteUsine à site
Usine à site
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
 
Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...Restitution des données environnement Microsoft & data visualization : panel ...
Restitution des données environnement Microsoft & data visualization : panel ...
 
Drupal 8
Drupal 8Drupal 8
Drupal 8
 
Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012
Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012
Bonnes pratiques-drupal-dans-cahier-des-charges conference-dc-lyon-2012
 
Histoires de CMS
Histoires de CMSHistoires de CMS
Histoires de CMS
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPress
 
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploiagoraCMS - WordPress, thèmes et plugins : mode d'emploi
agoraCMS - WordPress, thèmes et plugins : mode d'emploi
 
aOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint FrameworkaOS Genève - Session - New Experience & SharePoint Framework
aOS Genève - Session - New Experience & SharePoint Framework
 
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
Retour d'expérience Bouygues Telecom : Analyse BI à l'aide d'une appliance SQ...
 
aOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint FrameworkaOS Toulouse - Session - New Experience & SharePoint Framework
aOS Toulouse - Session - New Experience & SharePoint Framework
 
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
SharePoint Days Casablanca - Retours d'expériences et meilleures pratiques po...
 

Plus de Symetris

Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...
Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...
Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...Symetris
 
Écrire de la documentation persistante pour un projet Drupal
Écrire de la documentation persistante pour un projet DrupalÉcrire de la documentation persistante pour un projet Drupal
Écrire de la documentation persistante pour un projet DrupalSymetris
 
How to maintain, evolve and maximize the return on your Drupal website invest...
How to maintain, evolve and maximize the return on your Drupal website invest...How to maintain, evolve and maximize the return on your Drupal website invest...
How to maintain, evolve and maximize the return on your Drupal website invest...Symetris
 
Should you upgrade your Drupal 7 website or migrate to Drupal 8?
Should you upgrade  your Drupal 7 website or  migrate to Drupal 8? Should you upgrade  your Drupal 7 website or  migrate to Drupal 8?
Should you upgrade your Drupal 7 website or migrate to Drupal 8? Symetris
 
Different approaches for different scopes: How to tackle a medium-sized Dr...
Different approaches for different scopes: How to tackle a medium-sized Dr...Different approaches for different scopes: How to tackle a medium-sized Dr...
Different approaches for different scopes: How to tackle a medium-sized Dr...Symetris
 
Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...
Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...
Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...Symetris
 
Symetris ambiance
Symetris ambianceSymetris ambiance
Symetris ambianceSymetris
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectSymetris
 
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détailsPrésentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détailsSymetris
 
Mieux Filtrer ses listes WordPress avec Ajax et WP_Query
Mieux Filtrer ses listes WordPress avec Ajax et WP_QueryMieux Filtrer ses listes WordPress avec Ajax et WP_Query
Mieux Filtrer ses listes WordPress avec Ajax et WP_QuerySymetris
 
Générer plus de revenus par le web: Pouvez-vous faire mieux ?
Générer plus de revenus par le web: Pouvez-vous faire mieux ?Générer plus de revenus par le web: Pouvez-vous faire mieux ?
Générer plus de revenus par le web: Pouvez-vous faire mieux ?Symetris
 

Plus de Symetris (11)

Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...
Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...
Hyperpersonnalisation des sites web et écosystèmes numériques - Les best prac...
 
Écrire de la documentation persistante pour un projet Drupal
Écrire de la documentation persistante pour un projet DrupalÉcrire de la documentation persistante pour un projet Drupal
Écrire de la documentation persistante pour un projet Drupal
 
How to maintain, evolve and maximize the return on your Drupal website invest...
How to maintain, evolve and maximize the return on your Drupal website invest...How to maintain, evolve and maximize the return on your Drupal website invest...
How to maintain, evolve and maximize the return on your Drupal website invest...
 
Should you upgrade your Drupal 7 website or migrate to Drupal 8?
Should you upgrade  your Drupal 7 website or  migrate to Drupal 8? Should you upgrade  your Drupal 7 website or  migrate to Drupal 8?
Should you upgrade your Drupal 7 website or migrate to Drupal 8?
 
Different approaches for different scopes: How to tackle a medium-sized Dr...
Different approaches for different scopes: How to tackle a medium-sized Dr...Different approaches for different scopes: How to tackle a medium-sized Dr...
Different approaches for different scopes: How to tackle a medium-sized Dr...
 
Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...
Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...
Trop gros pour des mercenaires, trop petit pour une armée: Comment s'attaquer...
 
Symetris ambiance
Symetris ambianceSymetris ambiance
Symetris ambiance
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project
 
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détailsPrésentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
Présentation Symetris - Drupalcamp Montreal 2013 le diable est dans les détails
 
Mieux Filtrer ses listes WordPress avec Ajax et WP_Query
Mieux Filtrer ses listes WordPress avec Ajax et WP_QueryMieux Filtrer ses listes WordPress avec Ajax et WP_Query
Mieux Filtrer ses listes WordPress avec Ajax et WP_Query
 
Générer plus de revenus par le web: Pouvez-vous faire mieux ?
Générer plus de revenus par le web: Pouvez-vous faire mieux ?Générer plus de revenus par le web: Pouvez-vous faire mieux ?
Générer plus de revenus par le web: Pouvez-vous faire mieux ?
 

Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014

  • 1. Personnaliser l’interface administrateur de Drupal Drupal Camp Montreal 2014 – Symetris.ca
  • 2. Libérez votre potentiel web avec Symetris *** • Fondé en 2004 – déjà 10 ans! • 12 spécialistes web • Développement de sites web qui vont au-delà du marketing • Maîtrise des plateformes CMS open-source • Optimisation mobile
  • 3. À propos de nous Brad Muncs Président @ Symetris Matthieu Gadrat Développeur Web @ Symetris
  • 4. Ordre du jour • Pourquoi personnaliser? • Développer un thème d'interface admin • Gérer les menus "éditeur" (vs. toolbar) • Concevoir des tableaux de bord • Explorer les possibilités et les limites
  • 5. Pourquoi personnaliser? Proposer Drupal comme CMS à un client est avantageux technologiquement. Mais l'interface "out-of-the-box" du backend administrateur a été conçue par et pour des développeurs, et n'est pas nécessairement aussi intuitive qu'on pourrait le souhaiter pour les clients moins technophiles. De plus, si Drupal est utilisé dans le cadre d'une application plus complexe comme un intranet, la nécessité d'adapter les fonctionnalités des administateurs est essentielle.
  • 6. Développer un thème d’interface admin
  • 7. Qu’est-ce qu’un thème admin? • Différence entre thème admin et non-admin • Particularités d’un thème admin • Différence entre les thèmes admin pour développeur et pour client
  • 8. Thèmes « out of the box » • Pour • Déjà testé par la communauté • Rapide à installer • Optimisé pour les développeurs • Contre • Manque toujours qqch • Pas optimisé pour les éditeurs de site
  • 9. Thèmes « out of the box » • Quelques thèmes populaires de la communauté • Seven (core) • Rubik: drupal.org/project/rubik • Shiny: drupal.org/project/shiny
  • 12. Thème: Shiny (on aime bien nous)
  • 13. Gérer son site via le même thème • Pour • Interface similaire qui assure la continuité • Clarifie ce qui est édité • Contre • Thème admin conçu pour gestion • Obligé de créer des menus extra
  • 14. Éléments obligatoire d’un thème admin personnalisé 1. Action links 2. Local tasks 3. Messages 4. Région d’aide
  • 15. 1a. Action links: Screenshot
  • 17. 2a. Local tasks: Screenshot
  • 21. 4a. Région d’aide: Screenshot
  • 23. À garder en tête • Hiérarchie de l’information • Ergonomie • Couleurs
  • 24. Gérer les menus « éditeur » (vs le Drupal toolbar)
  • 25. Avantages de ne pas utiliser la toolbar pour le client • Permissions des menus selon l’API de Drupal (visible ou pas) • API gère directement • Retirer permissions non-utilisées • Less is more (moins de confusion)
  • 26. Quoi inclure dans le menu (ou non) • Attention: Ne pas avoir trop de liens • Liens essentiels: • Tableau de bord • Contenu • Personnes • Rapports • Page de configuration (settings)
  • 27. Emplacement du menu • Bien distinguer du reste du thème • Nous aimons bien le mettre en bas à gauche
  • 28. Tableaux de bord sur mesure
  • 29. Plan initial (avant de coder) • Faire un wireframe • N’afficher que l’information cruciale • Arrimer aux objectifs du client • Définir les views pour afficher des rapports d’information dans un format pratique
  • 30. Views d’information 1/2 • Aggréger le contenu • Calculer l’information (SUM, AVG) • Personnaliser le formattage des fields (couleurs d’indicateurs de valeurs) • Créer des Graphiques (c beau!)
  • 31. Views d’information 2/2 • Tableaux avec tri/filtrage de colonnes • Bien choisir champs tri/filtres • Quick links (créer, éditer, supprimer) • Bonne pagination de l’info • Admin views • pages Contenu • Pages Personnes
  • 32. Opérations « batch » (Views Bulk Operations) • Changer des valeurs de champs • Changer des statuts
  • 33. Comment tirer profit de: • Local tasks • Action links
  • 34. Action links [ Utiliser le hook_menu() ] • Liens d’actions sur des pages reliées
  • 35. Local tasks [ Utiliser le hook_menu() ] • Systèmes d’onglets
  • 36. Autres idées cool • Créer des sous-pages rapports (drill-down d’information) • Intégrer data externe (ex: analytics) • Lien vers guide d’utilisation et contact
  • 37. Module « Dashboard » de Drupal • Avantages • Drag & Drop • Inconvénients • Oblige à donner la permission de configurer les blocs pour personnaliser son dashboard
  • 38. Conseil: Créez votre tableau de bord dans un module • Il sera réutilisable • Vous assurerez une continuité d’un site à l’autre que vous créez
  • 40. Suggestions intéressantes pour bonifier votre interface admin (1/4) • Quick tips, tooltips • Système de notification • Activer les révisions • Choisir un WYSIWYG simple (retirer les boutons non-utilisés)
  • 41. Suggestions intéressantes pour bonifier votre interface admin (2/4) • Joyride initial (Comme Google Apps)
  • 42. Suggestions intéressantes pour bonifier votre interface admin (3/4) • Icônes personnalisées (fonts)
  • 43. Suggestions intéressantes pour bonifier votre interface admin (4/4) • Client side validation • Valider en AJAX les formulaires • Moins de load time • Field groups • Permet de grouper les champs • Gestion plus facile et efficace
  • 44. EXTRA: L’avantage de « Rules » • Amélioration du comportement de Drupal • Redirection vers des pages plus appropriées après un événement • Ex: après la création d’un node, rediriger vers la page « node list » • Notifications courriel
  • 45. CONCLUSION Personnaliser l’interface d’administration de Drupal bonifie l’expérience de gestion du site web pour le client. Mettre à jour son site web devient un plaisir plutôt qu’un corvée.
  • 46. Merci ! Des questions Contactez-nous : brad@symetris.ca info@symetris.ca Présentation PPT disponible sur Slideshare Partagez vos opinions ou modules préférés sur Twitter @symetris (ou FB)

Notes de l'éditeur

  1. Introduction PARLER LENTEMENT ----- Notes de la réunion (12-10-12 18:43) -----
  2. Parler de Symetris PARLER LENTEMENT ----- Notes de la réunion (12-10-12 18:43) -----
  3. Parler des conférenciers ----- Notes de la réunion (12-10-12 18:43) -----
  4. Ordre du jour + garder vos questions pour la fin   Note: Profil de la salle ----- Notes de la réunion (12-10-12 18:43) -----
  5. We’re experiencing more and more projects that are « takeovers » of existing projects vs. creating new from scratch.
  6. Thème admin par défaut, tout le monde connaît
  7. Features cool: boutons en haut, système de colonnes
  8. Ressemble à Seven, mais beaucoup plus clean Formulaire et texte plus gros, facilite la gestion
  9. À utiliser pour l’ajout de contenu ou d’entité en général Mettre ce lien en évidence est idéal
  10. Permet d’afficher le système d’onglet de Drupal Idéal pour la gestion des modes (voir, modifier, révision, traduire)
  11. Permet d’afficher les messages d’erreur, d’avertissement et de statut Prévoir des styles personnalisés est agréable
  12. Utile pour avoir une région mise en évidence pour le bloc d’aide Peut avoir un style personnalisé et accrocheur