Technical article (Planet Drupal)

Voici en rafale quelques notions, modules et pratiques que j'aimerais partager suite à mon passage au DrupalCon Portland qui a eu lieu du 20 au 24 mai 2013. Cette année, ils ont mis un fort accent sur l'UX (expérience utilisateur) et le frontend. Beaucoup de keynotes étaient des experts en UX qui provenaient d'autres disciplines. Finalement, Drupal se met à la page!!

Karen McGrane

La présentation la plus intéressante, selon moi, était celle de Karen McGrane: "Thriving in a world of change: Future-friendly content with Drupal" https://portland2013.drupal.org/keynote/karen-mcgrane. Dans sa présentation, elle explique que la notion de "responsive" va prendre des proportions énormes dans le futur. Les formats d'écran et de présentation vont être si radicalement variées qu'il va falloir dès maintenant s'y adapter. On peut penser à des sites publicitaires sur les campus, des écrans touchscreen géants, des montres intelligentes, des télés, etc. Le contenu et la présentation visuelle devront s'adapter à tous ces formats, à partir d'une même source, un même "site" ou système de contenu.

Selon elle, la meilleure façon de bien se positionner pour ces nouvelles tendances est de bien organiser le contenu. Chaque contenu doit avoir des métadonnées, des catégories, etc. pour pouvoir mieux l'organiser. En fait, Drupal occupe une bonne position dans ce domaine : les types de contenu, les nombreux champs (titre, photo, champs texte, etc.), les tags et les taxonomies, par exemple, sont tous des métadonnées qui permettent d'organiser le contenu. Une meilleure organisation du contenu permet de rendre la présentation plus flexible, c'est ça le vrai responsive.

Son slogan : "KILL WYSIWYG!". Elle ne s'oppose pas à la barre d'outils avec quelques boutons, mais il faut absolument éviter de voir une "page" comme une version électronique d'une page imprimée. Il ne faut pas mettre des photos dans le texte par exemple et faire de la mise en page dans wysiwyg. Oui, répondent les développeurs, mais, c'est ce que les clients veulent, c'est ce qu'ils connaissent!! OK répond-elle, mais c'est notre rôle de leur apprendre, de leur faire comprendre comment fonctionne le web dorénavant ou alors, il doivent comprendre que leur site ne sera pas à la page. Les gens devront s'y faire à un moment ou à un autre.

Plusieurs présentations UX et frontend

J'ai assisté à plusieurs présentations portant sur l'interface utilisateur et l'expérience utilisateur. On ne répétera jamais assez l'importance de garder des espaces de discution et d'échange, autant avec le client qu'avec ses collègues, tout au long d'un projet.

1 - Communiquer:
Il faut réévaluer souvent, parler au téléphone, se rencontrer, aller au bureau du client, travailler en parallèle. C'est SUPER important! Oui, le fait d'appeler un client ou confronter un collègue, lorsqu'il y a des problèmes à régler, n'est pas toujours une partie de plaisir, mais cela vaut toujours la peine. Un courriel n'a rien à voir!

2 - Évaluer et organiser:
Parler et poser des questions permet de mieux aligner la vision des parties impliquées, leurs besoins et leurs attentes. On retient d'ailleurs que dans l'évaluation des projets, il faut planifier davantage d'heures de coordination.

Il existe plusieurs conseils, approches, techniques et outils :

-Écrire le projet avec le client.
-Conduire des interviews et des tests au besoin (Contextual user research, Card sorting http://en.wikipedia.org/wiki/Card_sorting). Il faut se mettre à la place des utilisateurs par toutes sortes de moyens.
-Poser des questions, poser des questions, écouter, poser des questions dans tous les sens. Ne pas prendre des besoins exprimés pour acquis.
-Penser aux besoins des utilisateurs et non pas à ce qu'ils veulent. Offrir ce qui leur convient en fonction des tests.
-S'adapter et changer d'idée.
-Faire
-La création d'"espaces UX" (UX spaces) https://portland2013.drupal.org/session/ux-spaces-new-approach-site-buil...
Avec un diagramme simple, on tente de lier
- le contenu (les entités, types de contenu, taxonomie, etc.) : un parc par exemple.
- les intéractions (comportements): en tant que , je veux pour que . Ce sont les cho
- et les utilisateurs : les différents types ou groupes d'utilisateurs d'un parc par exemple.
pour ensuite bien choisir et configurer les outils et modules Drupal dont le projet a besoin.

Des modules incontournables

Picture : http://drupal.org/project/picture
permet d'associer des formats d'images (image format) à un format d'image parent ou à un groupe en fonction des breakpoints. C'est le module de prédilection pour les images responsives dans Drupal 8.

Breakpoints : http://drupal.org/project/breakpoints
permet de déterminer des tailles prédéfinies d'écran à partir desquelles les éléments vont changer de forme ou de comportement. Ce module est un outil de base pour plusieurs modules responsives.

Twig : https://drupal.org/project/twig
Twig est un nouvel engin de création de templates pour Drupal 8. Une nouvelle syntaxe qui ressemble beaucoup au php, une architecture plus simple, moins de templates, plus facile à exporter et modifier.

Des modules ou sites sympas

Simplytestme : Le site de test pour Drupal 8, qui installe un site de test pour 30 minutes : http://www.simplytest.me/
Can I Use : pour connaître les fonctionnalités supportées dans les différents fureteurs web. http://caniuse.com/
Display Suite : Une façon de mettre en forme le contenu de façon visuelle. http://drupal.org/project/ds
Modernizr : pour effectuer des tests de CSS3 et HTML5 sur les différents fureteurs. Rappelons-nous qu'il y a de plus en plus de modèles et de versions et de dire que l'on supporte Firefox ou Safari est une fausseté. http://drupal.org/projects/modernizr
Image caption filter pour gérer les légendes.
Chosen : pour rendre les listes de choix plus attrayantes. http://drupal.org/project/chosen

Merci et bon Drupal à tous,

Lydie Servanin
Koumbit.org

• Français