Empreinte Digitale remporte l’édition 2021 de Design4Green !

Du 17 au 18 novembre 2021 avait lieu le challenge international Design4Green organisé par l’ESAIP. Une deuxième participation couronnée de succès pour notre équipe qui a remporté vendredi dernier le concours dans la catégorie professionnelle ! Retour sur 48 heures intenses et sur le projet de la victoire !

Design4Green c’est quoi ?

Organisé par l’ESAIP (école d’ingénieur angevine) depuis 5 ans, le challenge international Design4Green c’est 48h de hackathon en équipe pour répondre à un sujet autour de l’éco-conception préparé par des professionnels.

L’objectif du concours : développer un projet web en limitant son empreinte environnementale en prenant en compte les bonnes pratiques de l’éco-conception. D’où le fameux slogan de l’événement “dont’ code like a pig” et sa petite mascotte !

Chaque année plus d’une cinquantaine d’équipes d’étudiants et de professionnels autour du globe se lancent dans l’aventure.

Pour cette édition 2021, le challenge a accueilli une équipe à Casablanca, en Iran  mais aussi au Luxembourg !

Le sujet du challenge 2021: développer une interface de suivi de l’éco-conception d’un projet web

Pour ce challenge 2021, les 58 équipes participantes ont planché pendant 48h sur un sujet imaginé par l’Institut du Numérique Responsable : développer une interface pour les professionnels pour suivre et évaluer l’intégration des 491 critères d’éco-conception issus du référentiel de l’INR.

Défi supplémentaire, penser à l’organisation des critères en fonction du cycle de vie d’un projet web et des différents métiers concernés : développeurs, chef de projet, etc.

Cette année encore notre équipe a construit son projet en pensant économie de fonctionnalité pour proposer un outil épuré avec l’empreinte environnementale la plus limitée. Une démarche qui a guidé nos développeurs pour le choix des différentes technologies utilisées.

Un outil de checklist éco-conçu et accessible

En amont du projet, l’équipe a travaillé sur Excalidraw pour définir un prototype de leur application et s’accorder sur les choix techniques et ergonomiques.

Un site statique pour une empreinte environnementale minimale

L’année dernière déjà, le projet de notre équipe s’appuyait sur une application dite statique.

Ce choix d’infrastructure réduit au maximum la consommation de ressources serveur : il n’est plus chargé que de transmettre des fichiers texte.

Grâce à une conception en “Progressive Web App” (PWA), l’application n’est téléchargée qu’une seule fois puis mise en cache, ne nécessitant plus aucun aller-retour avec le serveur. Elle est ensuite utilisable entièrement hors-ligne.

Le résultat : une page ultra légère de 75kb seulement !  Pour vous donner une idée, une page de recherche Google est six fois plus lourde que notre application !

Un design épuré et minimaliste

Dans un esprit de sobriété, notre équipe a cette fois encore privilégié un design épuré et très minimaliste. L’idée étant de se concentrer uniquement sur le périmètre fonctionnel de l’application : pas de fioriture, juste le nécessaire.

Interface avec le thème clair

Interface avec le thème clair.

La possibilité d’utiliser un thème sombre contribue à la dimension éco-conçue de l’application : l’affichage des couleurs sombres sur les écrans OLED ayant une consommation énergétique moindre. Pensée comme une Progressive Web App (PWA), l’application peut-être également utilisée hors ligne tout en conservant une expérience utilisateur optimale.

Interface avec le thème foncé.

Interface avec le thème foncé.

Avec son ergonomie simple, l’application organise les 491 critères d’éco-conception issus du référentiel de l’INR par famille de métier : architecture, développement front-end ou back-end, stratégie, UX/UI et facilite leur classement par criticité et impact sur la planète, l’utilisateur et le niveau de difficulté. Tout est disponible sur un menu latéral.

Tableau de suivi global de l'avancement des critères d'éco-conception et leur statut dans le cycle de vie du projet.

Tableau de suivi global de l’avancement des critères d’éco-conception et leur statut dans le cycle de vie du projet.

La deuxième page de l’application génère un tableau de suivi des différents critères du référentiel de l’INR avec leur taux d’avancement et leur statut dans le cycle de vie du projet.

Interface récapitulant tous les critères avec un champ de mise à jour de l'état d'avancement du critère. Une jauge colorée indique le pourcentage d'avancée.

Interface récapitulant tous les critères avec un champ de mise à jour de l’état d’avancement du critère. Une jauge colorée indique le pourcentage d’avancée.

En dessous est également disponible pour chaque critère la possibilité de renseigner l’état d’avancement de chaque critère pour mettre à jour le tableau.

Si vous le souhaitez vous pouvez tester et découvrir l’application de notre équipe.

Marier éco-conception et accessibilité : un pari réussi !

Chez Empreinte Digitale, l’accessibilité numérique fait partie intégrante de tous nos projets web. Pour notre deuxième participation au challenge Design4Green notre équipe a également porté une attention toute particulière à l’accessibilité de l’application et aux respects du Règlement Général d’Amélioration de l’Accessibilité (RGAA) et des normes internationales du WCAG (Web Content Accessibility Guidelines). Rappelons que le numérique responsable ne se limite pas à l’aspect environnemental et intègre également un volet sociétal !

Ainsi nos développeurs front-end ont veillé à ce que l’application soit entièrement navigable au clavier et à ce la vocalisation par les lecteurs d’écrans soit optimale. Les couleurs ont également été choisies en fonction des normes et ratios de contrastes préconisés par le RGAA.

Enfin, pour une bonne navigation, des liens d’évitements ont été inclus ainsi que des attributs “role” adaptés à chaque région de la page et composant dynamiques.

Front-end et Back-end : nos choix techniques

Partie back-end : PHP 8

Pour la partie back-end de l’application, utilisée uniquement pour l’import du fichier CSV contenant les 491 critères d’éco-conception de l’INR, l’équipe a utilisé le langage PHP dans sa version 8.1 plus économe en ressources et surtout plus performante ! Nous vous en parlions dans notre article sur les nouveautés de PHP8. PHP est en outre utilisé par plus de 80% des sites internet, un gage de sa robustesse et de sa longévité !

Front-end : TypeScript et SvelteJS

L’année dernière nous testions pour la première fois SvelteJS que nous avons réutilisé dans ce nouveau projet applicatif.

À la différence d’autres frameworks orientés composants comme React, Svelte n’embarque pas le code du framework côté client, mais compile un code JavaScript optimisé pour l’application, beaucoup plus léger. Cela permet une grande aisance de développement sans sacrifier les performances.

Une librairie complémentaire, SvelteKit, permet quant à elle de gérer les aspects plus transversaux d’une application comme le routage, les données ou le mode de rendu (serveur, client, statique, voire hybride).

Pour réduire au maximum la charge côté serveur, nous avons choisi de compiler le site en fichiers statiques (de simples fichiers HTML, JavaScript et CSS). Une fois mis en ligne, aucun code n’est donc exécuté sur le serveur. Les pages sont transmises telles quelles au client, et le JavaScript prend le relais pour permettre l’interaction.

Pour réduire encore plus les échanges, l’API générée par le back-end PHP est embarquée directement dans les pages, et ne nécessite donc pas d’appel supplémentaire.

Finalement, une fois l’application ouverte, elle est intégralement mise en cache sur le navigateur client et peut être utilisée hors ligne sans perte de fonctionnalités.

Design4Green 2021 : l’année de la victoire pour l’équipe Empreinte Digitale !

En 2020, nous participions pour la première fois au challenge Design4Green. Une première tentative qui s’était soldée par un travail non évalué par malchance. Pas de quoi entamer la motivation de l’équipe qui s’est représentée cette année.

Notre équipe 2021, emmenée par Clément Cousein développeur front-end était composée de : Raphaël Poitevin, administrateur système et réseaux pour la partie infrastructure, Jochen Rousse, développeur back-end et Félix Girault, développeur front-end.

Après l’échauffement de la première participation, nous étions fin prêts à nous relancer dans la compétition et pour notre plus grand plaisir nous avons remporté le challenge dans la catégorie professionnelle, face à nos confrères de Spécinov ! A la clé une récompense de 1000€ et surtout le plaisir d’avoir travaillé ensemble pendant 48h dans une bonne ambiance et de voir nos efforts récompensés.

Nous sommes ainsi repartis de la cérémonie de clôture, organisée à la CCI, avec un chèque souvenir que nous gardons bien précieusement !

Encore un grand bravo à tous les participants étudiants et professionnels de cette édition 2021 ! Nous tenions également à remercier l’équipe organisatrice de l’ESAIP, ainsi que l’ensemble du jury pour ce prix !