Personnaliser l’interface administrateur de Drupal

Drupal Camp Montreal 2014 – Symetris.ca

Libérez votre potentiel webavec 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 MuncsPrésident @ Symetris

Matthieu GadratDé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.cainfo@symetris.ca

Présentation PPT disponible sur Slideshare

Partagez vos opinions ou modules préférés sur Twitter @symetris (ou FB)