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...
À 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. toolba...
Pourquoi personnaliser? 
Proposer Drupal comme CMS à un client est avantageux technologiquement. Mais 
l'interface "out-of...
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...
Thèmes « out of the box » 
• Pour 
• Déjà testé par la communauté 
• Rapide à installer 
• Optimisé pour les développeurs ...
Thèmes « out of the box » 
• Quelques thèmes populaires de la 
communauté 
• Seven (core) 
• Rubik: drupal.org/project/rub...
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é 
• C...
É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) 
...
Quoi inclure dans le menu (ou non) 
• Attention: Ne pas avoir trop de liens 
• Liens essentiels: 
• Tableau de bord 
• Con...
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 c...
Views d’information 1/2 
• Aggréger le contenu 
• Calculer l’information (SUM, AVG) 
• Personnaliser le formattage des fie...
Views d’information 2/2 
• Tableaux avec tri/filtrage de colonnes 
• Bien choisir champs tri/filtres 
• Quick links (créer...
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) 
•...
Module « Dashboard » de Drupal 
• Avantages 
• Drag & Drop 
• Inconvénients 
• Oblige à donner la permission de 
configure...
Conseil: Créez votre tableau de bord 
dans un module 
• Il sera réutilisable 
• Vous assurerez une continuité d’un site à ...
Explorer les possibilités et limites
Suggestions intéressantes pour bonifier 
votre interface admin (1/4) 
• Quick tips, tooltips 
• Système de notification 
•...
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 form...
EXTRA: L’avantage de « Rules » 
• Amélioration du comportement de Drupal 
• Redirection vers des pages plus appropriées 
a...
CONCLUSION 
Personnaliser l’interface d’administration de 
Drupal 
bonifie l’expérience de gestion 
du site web pour le cl...
Merci ! 
Des questions 
Contactez-nous : 
brad@symetris.ca 
info@symetris.ca 
Présentation PPT disponible sur Slideshare 
...
Prochain SlideShare
Chargement dans…5
×

Personnaliser l'interface administrateur de Drupal - DrupalCamp Montreal 2014

1 116 vues

Publié le

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.

Lors de cette conférence, nous vous partagerons nos expériences par rapport à la personnalisation de l'interface d'administration pour les éditeurs de site web, notamment:

- Développer un thème de l'interface administrateur sur mesure
- Concevoir des "dashboard" sur mesure pour le client (tableau de bord)
- Définir des views pour afficher des rapports d'information dans un format pratique
- Gérer les menus "éditeur" (versus le Drupal toolbar)
- Explorer les autres possibilités et les limites de ce qui peut être fait

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 116
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Introduction

    PARLER LENTEMENT

    ----- Notes de la réunion (12-10-12 18:43) -----
  • Parler de Symetris

    PARLER LENTEMENT


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

    1. 1. Personnaliser l’interface administrateur de Drupal Drupal Camp Montreal 2014 – Symetris.ca
    2. 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. 3. À propos de nous Brad Muncs Président @ Symetris Matthieu Gadrat Développeur Web @ Symetris
    4. 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. 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. 6. Développer un thème d’interface admin
    7. 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. 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. 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
    10. 10. Thème: Seven (core)
    11. 11. Thème: Rubik
    12. 12. Thème: Shiny (on aime bien nous)
    13. 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. 14. Éléments obligatoire d’un thème admin personnalisé 1. Action links 2. Local tasks 3. Messages 4. Région d’aide
    15. 15. 1a. Action links: Screenshot
    16. 16. 1b. Action links: Code
    17. 17. 2a. Local tasks: Screenshot
    18. 18. 2b. Local tasks: Code
    19. 19. 3a. Messages: Screenshot
    20. 20. 3b. Messages: Code
    21. 21. 4a. Région d’aide: Screenshot
    22. 22. 4b. Région d’aide: Code
    23. 23. À garder en tête • Hiérarchie de l’information • Ergonomie • Couleurs
    24. 24. Gérer les menus « éditeur » (vs le Drupal toolbar)
    25. 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. 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. 27. Emplacement du menu • Bien distinguer du reste du thème • Nous aimons bien le mettre en bas à gauche
    28. 28. Tableaux de bord sur mesure
    29. 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. 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. 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. 32. Opérations « batch » (Views Bulk Operations) • Changer des valeurs de champs • Changer des statuts
    33. 33. Comment tirer profit de: • Local tasks • Action links
    34. 34. Action links [ Utiliser le hook_menu() ] • Liens d’actions sur des pages reliées
    35. 35. Local tasks [ Utiliser le hook_menu() ] • Systèmes d’onglets
    36. 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. 37. Module « Dashboard » de Drupal • Avantages • Drag & Drop • Inconvénients • Oblige à donner la permission de configurer les blocs pour personnaliser son dashboard
    38. 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
    39. 39. Explorer les possibilités et limites
    40. 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. 41. Suggestions intéressantes pour bonifier votre interface admin (2/4) • Joyride initial (Comme Google Apps)
    42. 42. Suggestions intéressantes pour bonifier votre interface admin (3/4) • Icônes personnalisées (fonts)
    43. 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. 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. 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. 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)

    ×