Générateur de graphiques EPFL
L’EPFL voulait mettre à disposition des organisateurs d’évènements et conférences sur son campus un outil permettant de créer des affiches riches et vibrantes.
Des centaines de conférences, séminaires, expositions et concerts ont lieu chaque année sur le vaste campus de l'EPFL, organisés par des étudiants, du personnel, des facultés, des start-ups, des partenaires de recherche, etc.
Jusqu'à présent, les organisateurs chargés de la promotion des événements ont été laissés à eux-mêmes pour générer des posters et moyens de promouvoir leurs évèments.
MediaCom, l'unité de communication EPFL, a chargé Cruncher et :ratio de créer un outil permettant à tous les organisateurs d'évènements de créer des affiches et images de partage sur les réseaux sociaux afin de promouvoir leurs évènements dans le respect de la charte graphique de l'EPFL.

Lors de la conception de l'interface utilisateur, il est vite apparu que pour créer un outil familier (et donc facile à utiliser), nous avions besoin d'un environnement d'édition qui se comporte un peu comme une application de bureau, avec des objets qui peuvent être sélectionnés, puis modifiés par le biais de panneaux d'édition contextuels. Plutôt que d'avoir des objets mobiles, nous avons opté pour une collection de modèles de conception où les objets modifiables ont des positions définies, selon une série de "templates", un sélecteur de couleurs où les couleurs sont tirées des couleurs de la marque, et un sélecteur de polices. Tout cela contribue à ce que les visuels résultants restent fidèles à la charte EPFL.
D'un point de vue technique, nous avons choisi SVG comme format "natif" de
l'éditeur, alors que HTML aurait entraîné des différences de rendu du texte
entre les navigateurs et que <canvas>
aurait impliqué une dépendance de
résolution et la mise en œuvre d'une couche de détection du pointeur de la
souris vers l'objet. Cela pose un petit problème. Les images doivent être
exportées au format PNG
. Alors qu'avec <canvas>
, cette opération peut être
effectuée dans le navigateur, ce n'est pas le cas avec SVG.
Nous avons du coup développé
un micro-service qui reçoit un SVG et retourne une série de fichiers PNG
et JPEG
et les
upload sur un point de stockage S3 dans le cloud pour héberger les images
générées.
Pour développer l'interface utilisateur, nous avons utilisé notre librairie de templating dynamique, Literal.
La première version livrée (notre 'MVP') exporte vers trois formats
- Posters au format A3/A4 portrait
- Carrés en 1024x1024px pour les réseaux sociaux
- Paysage 1080p pour les écrans d'annonce disséminés sur le campus