Assemblée Osuny #4 Réunion mensuelle ouverte

Photo by Jan Huber on Unsplash

Nous organisons une réunion mensuelle ouverte, le premier jeudi de chaque mois, dans le but de rassembler toute la communauté Osuny. Cet événement est un moment d'échange et de discussions, pendant lequel l'équipe noesya présente les avancées fonctionnelles. Cet événement est ouvert, vous êtes libre de venir quand vous le souhaitez, il n'y a aucune obligation d'être présent·e chaque mois, c'est à votre convenance. Nous souhaitons co-construire l'ordre du jour de cette réunion mensuelle avec vous, donc nous sommes à l'écoute de vos remarques et/ou questions.

Focus dans cette édition sur la nouvelle version du thème, la partie visuelle consultée par les utilisateurs. Il y a beaucoup d’enjeux autour de cette version de thème car nous avons 70 sites en production. C'est la sixième version en un peu plus de deux ans.

Personnes présentes

Magali Anglès

Consultante / Formatrice Numérique

Alexis Benoit

Nouvelle-Aquitaine

Pierre-André Boissinot

Île-de-France

Bastien Masse

DG de Class'Code et chef de projet à la Chaire Unesco RELIA, Ressources Educatives Libres et Intelligence Artificielle, Nantes Université.

Thiago Máximo

Co-fondateur et sociétaire de Institut Supérieur de Design de Saint-Malo.

Anita Munyaneza

Consultante en marketing et communication freelance, travaille pour African Future Labs.

Yuna Orsini

Nouvelle-Aquitaine

Daniela Peñaranda

Nouvelle-Aquitaine

Justin Puyo

Coordinateur audiovisuel et multimédia, IUT Bordeaux Montaigne

Clara Rigaud

Développeuse-Chercheuse chez noesya

Olivia Simonet

Nouveautés du thème

Des corrections sur l’accessibilité : amélioration de la lightbox et des galeries d’images pour les lecteurs d’écran
Un problème a été mis en évidence par un utilisateur aveugle dans le système de lightbox qui s'affiche dans la zone d'entête et dans les blocs de galeries. La technologie d'assistance détectait l'image et ne lisait pas le texte alternatif. On a choisi que le lecteur d'écran lise d'abord l'image et ensuite lise le texte alternatif et ouvre ensuite la lightbox. Ajustements également dans la navigation qui est en français maintenant. Rajout d'un attribut html pour donner plus d'infos aux lecteurs d'assistance.

Bloc actualités : nouvel affichage en carousel
Développé par Olivia, cet affichage permet de slider les actualités. Ce système prend peu de place en hauteur et il marche également en  pleine largeur. Voici un exemple de cet affichage : https://example.osuny.org/fr/blocks/blocs-de-liste/actualites-1/

Bloc formation : nouvel affichage en grille
Développé par Clara, il permet d'afficher maintenant les formations en format grille et non plus uniquement en liste. L'idée est de présenter l'image et le chapô de la formation. On peut préciser le ratio de l'image en fonction de chaque site. Voici un exemple de cet affichage :  https://example.osuny.org/fr/blocks/blocs-de-liste/programmes/

Bloc chiffre clé : ajout d'images dans les chiffres clés
Nous pouvons rajouter des images à l'intérieur de ce bloc maintenant. L'image est limitée à une taille par défaut de 128px, quipeut se modifier dans les variables du fichier de configuration sass. Voici un exemple de cet affichage : https ://example.osuny.org/fr/blocks/blocks-narratifs/chiffre-cles/

Possibilité d’ajouter un bouton principal dans le hero des pages
Avant, nous avions un titre, une image, un sommaire, nous pouvons ajouter un bouton désormais avec un titre et un lien externe.

Ajout d’un darkmode simple à activer
Ce darkmode est intégré mais il n'est pas activé par défaut. Pour cela, il faut préciser les variables dans le fichier de configuration, c'est à dire les couleurs du site en lightmode et en darkmode. Cela va s'adapter par défaut aux préférences utilisateurs.

Ajout d'outils pour aider à l’intégration et à l’éco-conception

Quand on est en mode développeur, ajout d'une petite box où on a des raccourcis pour faciliter l'intégration :

  • mise en place d'une petite réglette pour s'assurer des alignements ;
  • un système qui permet avec ctrl + W d'afficher en mode pleine largeur ;
  • un contrôle des tailles d'images, comme on veut maximiser l'optimisation des images, création d'un outil de debug qui signale la taille chargée réellement et la taille nécessaire, la configuration idéale en fonction de la taille de l'écran ;
  • mise en place d'un raccourci ctrl + p, qui permet d'ouvrir dans un autre onglet la page sur laquelle on est en train de travailler en local (dev) dans sa version en ligne.

Faciliter la gestion des grilles et colonnes avec de nouveau outils

On a changé ce système là de façon à être plus proche du colonnage en UI. L'idée c'est de ne plus être tributaire de la largeur du parent. Si j'ai besoin que ça fasse 4 colonnes, je l'indique en utilisant le mixins columns(4) et ça s'adapte peu importe le contexte CSS.

Factorisation du code et simplification de certains partials

On a relu, corrigé quelques sémantiques html et mis en place des ajustements techniques. On a un html plus proche de ce qu'on voulait, plus pur. En utilisant du schema.org on standardise le web, c'est plus clair pour les moteurs de recherche et donc cela améliore le référencement.

Migration

Une migration réussie pour une soixantaine de sites en production ! 

La migration a été réalisée en partie manuellement à cause de breaking changes dans la nouvelle version. Nous n'avons pas endommagé de sites, ça c'est bien passé. Nous nous sommes interrogés sur la manière de surveiller les sites pour nous assurer qu'au moment d'une mise à jour du thème ou d'une fonctionnalité, rien ne se casse.

Nous avons testé  l’outil de tests de non régression Percy qui permet de préciser et de warner s'il y a des différences visuelles. Le problème de cet outil, c'est le nombre de calcul qu'il y a. Nous avons eu plus de 20 000 screenshots dans différents formats sur 3 sites au moment de la migration. Nous avons décidé de l'arrêter. L'impact carbone est élevé et le coût de la facturation également, surtout si nous devons passer sur 70 sites. 

Nous allons organiser une masterclass sur ces enjeux TNR (tests de non régression). L'idée est de voir d'autres outils, notamment libres et d'échanger sur ce sujet là. 

Questionnements autour des updates

La question de comment signaler les mises à jour se pose. L'idée serait de créer un espace indiquant les nouvelles fonctionnalités, de documenter les changements et de les rendre disponibles. Peut-être sur la page d'accueil de l'admin, sur le tableau de bord ? Justin Puyo de l'IUT Bordeaux Montaigne suggère que cela pourrait être intéressant sur le tableau de bord, même si c'est uniquement pour annoncer des fonctionnalités et fournir le lien vers les pages correspondantes.

À venir

Pour les prochaines améliorations, nous prévoyons de mettre en ligne un portfolio. L'idée est de créer cette nouvelle section en complément des actualités et de l'agenda. Nous pourrons ainsi créer un projet de portfolio, qui devrait être prêt pour le mois prochain. Selon Justin Puyo, cela pourrait être très bénéfique pour l'enseignement, en mettant en avant les projets pédagogiques.

Nous travaillons également sur les pages Campus. Il s'agit d'intégrer dans les sites les informations spécifiques à chaque campus. Cette demande provient de l'IUT de Bordeaux, qui possède plusieurs sites physiques à différentes adresses. Des blocs associés seront disponibles.

Un travail est en cours sur la possibilité d'intégrer dans le bloc de formation un lien vers les sites de chaque formation dans le hero.

En back, nous sommes en train de revoir le système de mise à jour pour l'optimiser. Nous y travaillons activement et avons identifié plusieurs pistes d'amélioration.

Q&R

Yuna et Dianela du collectif Team UX ont posé des questions sur la conception des sites Osuny, comment modifier le design, et si une interface pour la personnalisation est disponible.

Réponse d’Alexis : le figma du thème rassemble tous les blocs et toutes les pages. L'idée est de partir des différents modes d'affichage disponibles et de les styliser. Nous essayons de couvrir un maximum de besoins dans le thème, mais il peut arriver que nous devions modifier une mise en page spécifique dans le site. Il peut y avoir des différences, la surcouche de design permet d'ajouter l'identité au contenu. Pour modifier le design, il faut coder. Il s'agit d'options de variables à remplir. La personne qui va modifier le style du site se basera sur un fichier de configuration (c'est expliqué dans la documentation développeur). Il faut préciser les valeurs dans ce fichier. En remplissant ces variables, cela va modifier le style du site. Les couleurs, les en-têtes, les menus, etc. Juste en utilisant ce fichier, nous pouvons couvrir énormément de besoins. C'est très rapide avec ce fichier, mais cela nécessite d'avoir un accès à GitHub, d'envoyer ses modifications, etc. Il n'y a pas d'interface simple pour le moment.
Yuna propose de travailler sur la page potentielle de configuration variable de design. En réponse, Alexis suggère qu'ils peuvent en discuter et prévoir un temps pour échanger et travailler sur cette idée.

Dianela se demande : "quand vous ajoutez une fonctionnalité, comment cela se passe-t-il, cela vient-il d'un besoin d'un client ?"

Alexis a répondu : Oui, souvent quand il y a un nouveau projet ou besoin, c'est pour cela que nous apprécions les retours des designers. Est-ce bénéfique pour tout le monde ? Dans ce cas, nous l'ajoutons au thème. Sinon, si c'est un besoin spécifique, nous l'intégrons uniquement pour le site. Par exemple, pour le site d'Alice et les crypto trolls (https://www.aliceetlescryptotrolls.org/), c'était très spécifique car il y a une partie jeu et livre, et donc ce n'est pas dans le thème. Nous essayons le plus souvent d'enrichir le thème.

Dianela se questionne également sur les enjeux de sobriété, "y a-t-il toujours une réflexion sur l'éco-conception, comme dans un jeu comme Alice ?"

Réponse d’Alexis : oui, nous utilisons Osuny et ça optimise. Ici, l'image de la carte est l'élément le plus lourd, mais nous bénéficions toujours des fonctionnalités du thème, comme par exemple, comment bien gérer ses images et leurs dimensions.

Justin Puyo revient sur l'outil de curation mise en place pour les actualités.

À l'origine, cet outil a été développé avant le système de blocs et permettait de créer une actualité à partir d'un autre site, en copiant et nettoyant le contenu récupéré. Cependant, depuis l'introduction du système de blocs, cette fonctionnalité semble moins pratique et pertinente. Au lieu de modifier encore une fois cet outil, il est peut-être temps de se demander s'il constitue la bonne solution. Selon lui, il y a un problème de cohérence : nous dupliquons un contenu alors que l'objectif d'Osuny est d'être sobre et de ne pas dupliquer inutilement. De plus, si l'article source est mis à jour, les modifications doivent être réalisées manuellement. La curation devrait plutôt se concentrer sur la récupération des éléments de base au lieu de créer une nouvelle page d'actualité. Ces éléments apparaîtraient toujours dans les actualités, mais le lien renverrait directement à la source plutôt qu'à la page d'actualité dupliquée. Il serait nécessaire de récupérer l'image et le résumé, mais pas le contenu, car cela renverrait directement vers le site externe. Cependant, l'inconvénient de cette solution est que si la source change ou si l'actualité est supprimée, le lien est rompu. 

Une autre remarque de Justin sur les lightbox

Lorsque les images sont en mode lightbox, les liens présents dans les crédits ne sont pas cliquables. Cela peut être volontaire, mais parfois, le lien est utile.
Alexis a répondu qu'ils corrigeraient ce problème. L'idée est de réécrire le système de galerie et de lightbox. Actuellement, nous utilisons une librairie javascript qui n'est plus maintenue, donc nous allons créer notre propre système pour le gérer. Cela nous évitera de dépendre d'un service tiers et améliorera l'accessibilité. Nous prévoyons de le faire lors de la prochaine mise à jour du thème.

Question de Thiago Maximo : Comment tester Osuny, comment l'installer, comment ça fonctionne ?

Réponse d'Alexi : Pour l'instant, nous n'avons pas encore complété l'outil SaaS.
Pierre André rajoute : Nous avons la partie administration et gestion du site. Pour la partie BO, nous développons le moteur Osuny et gérons une instance Osuny sur un serveur partagé avec diverses universités. Nous pouvons ouvrir une instance pour toi et gérer un ou plusieurs sites. Comme Osuny est open source, il est possible de récupérer l'instance et de la gérer ailleurs, ou de la dupliquer ou la répliquer. Cela crée ton site web, le met sur git, et ensuite déploie ton site sur un serveur deuxfleurs. C'est entièrement paramétrable et assez ouvert. Les instances BO et les sites web sont complètement séparés. En effet, il n'y a pas de système où tu peux simplement cliquer sur un bouton, tu devras passer par nous.