Journal de Dev #02 - Contao Portfolio
Pour ce second retour d’expérience sur le développement de modules Contao, nous avons choisi de présenter quelque chose de commun sur Internet : les portfolios.
On en trouve dans tous les types de site, pour présenter des réalisations personnelles ou professionnelles. Étant donné que c’est une demande régulière, il nous a semblé opportun de mettre en place un module pour cela.
Pour rappel, tout développement est en constante évolution. Les choix de fonctionnalités sont effectués par rapport à notre expérience et aux demandes de notre clientèle. Il se peut que vous ayez déjà utilisé un autre système pour faire la même chose, et c’est tout à fait valable. En développement informatique, une problématique a bien souvent plusieurs solutions qui se valent toutes les unes les autres !
Problématique / Enjeux
Que vous soyez une entreprise ou un particulier, que les projets réalisés soient des tableaux d’art ou des chantiers industriel, ils sont gérés via la même logique de présentation et de navigation.
Le portfolio est un concept générique, il doit mettre en valeur des éléments et permettre leur gestion via un backend. La problématique principale est toutefois de proposer un système qui couvre les besoins spécifiques de votre activité !
On aura donc des champs génériques, dont tout le monde a probablement besoin, ainsi qu’un système d’attributs configurables, dont on pourra définir la valeur pour chaque élément du portfolio.
On utilisera certaines de ces données comme filtres dans les listes affichées. C’est une fonctionnalité bien souvent demandée et appréciée, qui doit donc être présente dès les premières versions du module.
Ce système d’attribut/valeur est un concept informatique fourre-tout très utile, bien qu’un peu abstrait.
Quand on ne sait pas trop ce que l’on va avoir comme données, c’est une façon flexible d’insérer ce qu’on veut. D’un côté on a une table d’éléments, de l’autre une table d’attributs, et une table dite associative entre les deux où l’on renseigne la valeur pour les attributs souhaités d’un élément.
Contao fait déjà beaucoup de choses, nous profiterons de la structure de site et les pages en guise de catégories. Cela permet de ne pas avoir à réinventer la roue quant aux fonctionnalités de navigation (menus, fils d’ariane…).
Pour les débuts de ce module, nous avons essayé de réaliser des modèles de listes et de lecteur standards. Ayant toutefois conscience que chaque activité aura différentes problématiques, nous avons opté pour des designs déclinables plutôt que finis.
Backend
Peu importe la complexité des modules développés, nous faisons toujours en sorte que leur administration soit la plus simple et accessible possible.
Tout d’abord, nous devons déterminer les attributs spécifiques à notre portfolio. Ce sont des données propres à chaque élément présenté, que l’on pourra ensuite agencer à souhait. Un attribut est pour l’instant très simple, c’est un label qui demandera une valeur. Il sera étendu par la suite (voir plus bas).
Ensuite viennent les modules, où l’on a juste besoin de déterminer une liste et un lecteur (optionnel). Rien de particulier, si ce n’est que l’on peut choisir les différents attributs qui serviront de filtres dans la liste.
Comme pour tous les autres modules, vous pouvez ajouter vos classes CSS, choisir les fichiers templates etc...
Puis, nous devons créer les pages qui accueilleront le portfolio. Rien de particulier ici, c’est du Contao natif. Vous devez toutefois ajouter les modules dans chacune des pages concernées.
Avant de commencer à saisir vos projets, il est recommandé de préparer une nomenclature dans l’explorateur des fichiers. Il est probable que vous ayez des photos et des documents pour chaque projet.
Au début, ça ne sera pas grand chose, mais ça devient vite le fouilli ce genre de modules. Prenez le temps de faire une structure simple, que vous copierez ensuite.
Enfin, il ne nous reste plus qu’à créer les éléments du portfolio, en suivant simplement le formulaire de haut en bas. En sélectionnant la page comme catégorie, les éléments s’ajouteront automatiquement dans les sections souhaitées.
Un module spécifique a été posé pour la gestion des attributs, via le dcaWizard. C’est une solution temporaire pour éditer plus facilement les attributs d’un élément.
Pour chaque projet, vous pouvez ajouter autant d’illustrations que souhaité, ainsi qu’une accroche. Une fois l’élément sauvegardé, il est possible d’utiliser les éléments de contenus de Contao pour créer un squelette de page plus riche et précis.
Frontend
Comme on l’a dit plus haut, le portfolio est un système tellement vu et revu qu’il doit se conformer à quelques règles d’ergonomie pour ne pas perturber vos usagers.
La “liste”
Si liste est entre guillemets, c’est surtout parce qu’un portfolio n’a bien souvent pas la tête d’une liste. L’objectif étant de mettre en avant vos réalisations, il vaut mieux laisser parler de belles images que des blocs de textes. Un clic sur un des éléments de la liste amène ensuite au lecteur designé.
On rajoute les filtres au début de la liste ou sur le côté, pour un accès rapide. Le filtrage peut se faire en rafraichissant la page ou en asynchrone (AJAX), tout ce qui compte étant d’avoir une URL par combinaison de filtres possible.
Attention toutefois, car à partir de 2 ou 3 filtres disponibles, le nombre de combinaisons et donc d’URLs augmente considérablement, ce qui peut nuire à votre SEO. Une configuration spécifique à ce cas est prévue par notre module dans une version ultérieure.
Le lecteur
Il existe bien des squelettes pour présenter un projet. Tout comme la liste, vous devez vous focaliser sur la mise en avant des illustrations, mais cette fois-ci en prévoyant un espace conséquent pour le texte et les attributs.
Le modèle que l’on prévoit est donc un slider faisant défiler les images, avec l’intitulé du portfolio à l’intérieur. Viennent ensuite 2 colonnes : celle de gauche contient tous les textes libres (ou l’accroche si pas de texte) tandis que celle de droite contient les attributs et les boutons de partage.
C’est un squelette responsive on ne peut plus classique, qui fait très bien le boulot, tant d’un point de vue usager que référencement.
Limitations connues
C’est toujours difficile d’anticiper les besoins graphiques de nos usagers. Pour ces premières versions de ce module, le choix a été fait de ne satisfaire que les besoins techniques.
Le système des attributs est aussi un point qui n’est aujourd’hui pas tout à fait satisfaisant. Certes il permet à tout type de projet d’afficher ce qu’il a envie, mais n’étant aujourd’hui limité qu’à des informations textuelles, on est vite limités dans ce qu’on peut avoir comme attribut.
De même, l’utilisation de ce concept rend les évolutions complexes car la moindre modification structurelle peut provoquer des pertes de données nécessaires au fonctionnement du module. Il faut donc être précautionneux quant aux mises à jour et évolutions à effectuer.
Il faut toujours être précautionneux et rigoureux quand on développe un package public. Une mise à jour importante doit s’accompagner de scripts de migration et de back-ups pour pouvoir au moins permettre le retour à la version antérieure.
Cela prend toutefois du temps, en quantité toujours supérieure à celle estimée !
Evolutions prévues
Aujourd’hui, le portfolio fait le boulot mais reste procédurier et complexe à modifier si vous ne disposez pas d’un développeur à vos côtés. Une de nos priorités est donc d’améliorer l’administration du module.
La gestion des attributs
Comme nous avons conscience que les attributs sont laborieux à manipuler et à comprendre, nous souhaitons ajouter un système plus intuitif. Le but est de supprimer l’étape de la configuration au préalable des attributs et de l’intégrer lors de la saisie des valeurs d’un portfolio.
Le nouveau système proposerait de choisir parmi les attributs existants ou bien d’en créer un nouvel attribut et de le configurer.
Un assistant pour attribuer les valeurs serait également ajouté, pour éviter les doublons “faute de frappe”.
Référencement automatique et personnalisable
Il existe un grand nombre de balises utiles pour indiquer aux robots ce qu’ils sont en train d’indexer. Comme nous disposons de beaucoup de données, il serait idiot de ne pas les mettre à profit et de construire des balises spéciales pour cela.
Toutefois, il faut permettre aux administrateurs d’écraser ses balises automatiques !
Recadrage des illustrations
Les illustrations jouent un grand rôle dans la qualité d’un portfolio. Ce pourquoi nous voulons permettre aux usagers de recadrer les illustrations au format le plus optimal qu’il soit.
Cela ne remplacera toutefois pas les découpes et retouches faisables sous un véritable logiciel !
Amélioration des filtres et recherche libre
Grâce à l’amélioration des attributs, nous pourrons améliorer la gestion des filtres dans les listes du portfolio, et permettre l’ajout d’une recherche textuelle libre.
Ajout du multilingue
Nous travaillons déjà sur cette évolution, en permettant la création d’un projet en différentes langues et en les liant entre eux. Il y a beaucoup de petites choses à gérer lorsque l’on prévoit un système pour plusieurs langues. Le tout est de permettre tout cela avec un maximum de lisibilité.
Et voilà pour ce tour du module Portfolio pour Contao ! Beaucoup de choses faites et à faire pour ce projet. Ce qui est intéressant ici est le focus sur l’ergonomie, car ce sont des systèmes pensés pour être manipulés très fréquemment.
Les éléments des portfolios sont souvent mis en relation avec d’autres systèmes, comme des actualités, des évènements ou des produits d’un catalogue.
C’est une extension qui touche à tout et qui sera constamment améliorée et améliorable.
Dans la même catégorie
