Voir la source de Dominik - module éco-conception web

{{Tuto Details
|Main_Picture=Dominik_-_module__co-conception_web_titre_web.jpg
|Main_Picture_annotation={"version":"3.5.0","objects":[{"type":"image","version":"3.5.0","originX":"left","originY":"top","left":-1,"top":-1,"width":1920,"height":1080,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.42,"scaleY":0.42,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://wiki.lowtechlab.org/images/3/30/Dominik_-_module_co-conception_web_titre_web.jpg","filters":[]}],"height":450.2546689303905,"width":600}
|Licences=Attribution-ShareAlike (CC BY-SA)
|Description=<translate>Ce tutoriel vient compléter le tutoriel "Dominik - serveur modulable autoalimenté en réemploi". Il est une initiation au codage d'un site web en éco-conception, dans le but de faire tendre le numérique vers plus de sobriété.</translate>
|Area=Energy, Tools
|Type=Tutorial
|Difficulty=Hard
|Duration=0
|Duration-type=hour(s)
|Cost=0
|Currency=EUR (€)
|Tags=numérique, smartphone, Dominik, photovoltaïque, internet, énergie, ordinateur, rasberry, réseau, réseaux, serveur, hébergement, récupération, stockage, partage, sneakernet, écoconception, low-tech magazine, low-tech, fichiers
}}
{{Introduction
|Introduction=<translate>Ce module s'inscrit dans un tutoriel plus général : Dominik - serveur modulable autoalimenté en réemploi

Il sert donc à proposer des méthodes par thèmes pour concevoir votre propre Dominik, mais peu aussi être pris à part pour l'aspect technique abordé.


L'objectif de ce module numérique est d'obtenir un site web conçu de zéro ("from scratch") en HTML et CSS en suivant les concepts de l'écoconception numérique, c'est-à-dire la conception numérique à faible impact.

On commencera par présenter les concepts et détails sur l'écoconception numérique pour un projet numérique général. On précisera ensuite la réappropriation de ces concepts pour la création de notre site web low-tech hébergé sur le smartphone. Ce site web est disponible à l'URL suivante : http://lowtechnumerique.mooo.com/

Il sert à rendre disponible à tous l'ensemble de la connaissance produite dans le cadre de ce projet.

Cette partie est largement fondée sur les travaux de Gauthier Roussilhe. Elle les reprend, les adapte et les vulgarise, en adéquation avec la licence [https://creativecommons.org/licenses/by-sa/4.0/deed.fr '''CC-BY-SA 4.0'''] sous laquelle ces travaux sont partagés (https://gauthierroussilhe.com/ressources).</translate>
}}
{{Materials
|Material=<translate></translate>
|Tools=<translate></translate>
|Prerequisites={{Prerequisites
|Prerequisites=Dominik - serveur modulable autoalimenté en réemploi
}}
}}
{{Tuto Step
|Step_Title=<translate>Les trois points de départ de l'éco-conception numérique</translate>
|Step_Content=<translate>===Réduire l’empreinte environnementale du service, qu’il soit numérique ou non===
L'accord de Paris vise à réduire par 5 les émissions de gaz à effet de serre en France en 30 ans (de 11tCO2e / pers en 2018 à 2tCO2e / pers en 2050). Cela implique que l'ensemble du mode de vie de la population française va être transformé et donc la façon de réaliser un grand nombre de services. Le secteur numérique n'échappe pas à cet effort, les services numériques, comme tout le reste des activités, doivent aussi être repensés dans une logique de sobriété et d'efficacité.

===Répondre avec pertinence aux besoins exprimés par les usagers, quitte à les réinterroger (démarche low-tech)===
De nombreuses autres pratiques mettent déjà l'emphase sur ce point (design / méthodes agiles / etc.). L'éco-conception numérique poursuit cet effort et rajoute une variation : l'expression de certains "besoins" peut aller à l'encontre de principes de sobriété ou de soutenabilité. Il est donc important que l'identification des besoins s'accompagnent d'une analyse préliminaire des besoins matériels et l'empreinte environnementale d'un usage demandé, surtout s'il est massif.

===La numérisation n’est pas forcément la meilleure option pour répondre aux deux premiers points===
L'éco-conception numérique permet d'avoir une position agnostique vis-à-vis de la numérisation. Cette position implique de ne pas supposer que la numérisation rend par défaut les choses meilleures. Elle le peut mais elle peut aussi rendre les choses pires. Cette posture demande de comprendre ce qu'on souhaite numériser et pourquoi, afin de pouvoir estimer ce qu'on perd et ce qu'on gagne dans le processus. Cela permet de formuler un arbitrage qui va prioritairement dans le sens des usagers et des politiques de soutenabilité.</translate>
}}
{{Tuto Step
|Step_Title=<translate>Les sept piliers de l'éco-conception numérique</translate>
|Step_Content=<translate>===1 - Favoriser la durée de vie des équipements===
La fabrication des équipements est le plus gros facteur d’impact environnemental du service numérique, il est alors essentiel que le service ne favorise pas la renouvellement des équipements mais bien l’allongement de leur durée de vie.
{{Idea|Qu'est-ce qui défavorise la durée de vie des équipements ?}}

*Applications et services numériques nécessitant une certaine puissance de calcul (quelle valeur) provoquant des ralentissements
*Applications et services incluant trop de scripts (JS, trackers, charge GPU, etc.) et nécessitant trop de bande passante
*Applications et services sans rétro-comptabilité proposant une expérience dégradée
*L'utilisation des langages trop récents et sans portage vers d'anciens systèmes d'opération
*Toute logique qui pousse à une obsolescence matérielle par mise à jour de la couche logicielle
*Les garanties matérielles trop courtes
*Les incitations à la consommation / renouvellement

===2 - Favoriser la réduction de la consommation globale de ressources non-renouvelables et la réduction des déchets électroniques===
Le volume et l’intensité des ressources consommées par l’usage du service, et l’usure des équipements qui en résulte, doivent baisser drastiquement sur les facteurs suivants : consommation d’énergie primaire (cela inclut l’électricité), des matières premières (métaux, etc.) et d’eau.
{{Idea|Qu'est-ce qui cause l'augmentation de la consommation de ressources ?}}

*Applications et services numériques nécessitant une plus grande consommation d'équipements connectés
*Applications et services numériques nécessitant / provoquant un large transfert de données pour fonctionner
*Toute logique d'augmentation du temps en ligne et d'augmentation de la capture de données
*L'utilisation de matériel peu efficace ou/et avec une courte durée de vie
*L'augmentation du nombre d'utilisateurs
*L'intensité énergétique et matérielle par utilisateur

===3 - Favoriser la durée de vie du service en tant que tel===
Concevoir un service numérique prend du temps alors il est important de s’assurer que le service répond à des besoins pertinents et durables.

Un service doit être pensé dès le départ pour faciliter la maintenance par des nouvelles équipes ou des personnes extérieures au projet.
{{Idea|Qu'est-ce qui défavorise la durée de vie d'un service ?}}

*Le manque de pertinence du service (mauvaise compréhension des besoins)
*Le manque d'utilisabilité du service (UX, accessibilité, etc.)
*Le manque de maintenance des solutions techniques choisies (langage avec une faible communauté, dépendances des librairies, pas de mise à jour de sécurité)
*Des facteurs externes (changement d'équipe, de direction, de programme, fin du service ...)

===4 - Optimiser pour les conditions d’usage les plus difficiles===
Il faut faire l’hypothèse que l’usager du service dispose d’un faible accès au réseau (couverture mobile, faible réseau) et d’un appareil vieux ou d’entrée de gamme (peu de puissance de calcul, peu de mémoire).
{{Idea|Quelles sont les conditions les plus difficiles ?}}

*Peu de bande passante disponible
*Peu de puissance de calcul et de mémoire disponible
*L'usager paye pour ses données
*L'usager a une connexion intermittente
*L'usager a des besoins d'accessibilité (vision, ouïe)

===5 - Être une clé d’entrée pour intégrer les autres bonnes pratiques du web===
Il ne faut pas d’écoconception numérique sans inclure dès le départ l’accessibilité, la sécurité, la gouvernance des logiciels et des données, l’économie de l’attention, etc. L’écoconception numérique fait partie d’un cercle vertueux.
{{Idea|Quelles sont les autres bonnes pratiques ?}}

*Accessibilité Web (RGAA, a11y)
*Performance web
*Sécurité des données
*Respect de la vie privée de l'utilisateur, gouvernance des données (RGPD)
*Open data, logiciel libre
*Performance
*Respect de l'attention de l'usager
*Software craftsmanship
*Cycle de vie de l'information et de la donnée

===6 - Fédérer les communautés de pratiques===
Il est préférable d’utiliser des outils durables, entretenus par des communautés actives et pérennes (maintenance, marché du travail).

Il est nécessaire de documenter le processus et les choix de conception afin d’augmenter la capacité de maintenance sur les services déployés.

L’écoconception numérique est un champ relativement jeune, il est donc important de documenter le travail fait et de l’ouvrir à la communauté pour améliorer les méthodes et faciliter la collaboration.
{{Idea|Comment participer aux communautés de pratiques ?}}

*Utiliser les outils déjà présents et les enrichir
*Documenter la mise en place des services éco-conçus
*Remonter les bonnes pratiques et autres informations pour améliorer les connaissances sur le sujet
*Utiliser des licences permettant le partage des données, logiciels, etc.

===7 - Sensibiliser à la sobriété===
Il est important de communiquer sur les mesures environnementales des services déployés et sur les réductions permises. L’utilisation d’équivalences peut être un axe de communication. La démarche d’écoconception doit être rendue perceptible soit par un langage visuel spécifique, soit par des éléments de communication dédiés.

En interne, la démarche de communication doit permettre de s'adresser à la base des employés d'une organisation mais aussi dans la direction de celle-ci.

Il est conseillé d'intégrer la démarche de sobriété et d'éco-conception numérique dans une stratégie pré-existante afin d'être aligné dans une politique interne déjà identifiée et défendue. La sobriété et l'éco-conception ne peuvent pas être moteur d'une stratégie de transition écologique mais elle peut accompagner et supporter le mouvement. L'exemplarité vient donc de la stratégie globale de l'organisation et non pas de sa capacité à éco-concevoir des services numériques de façon isolée.
{{Idea|Comment sensibiliser efficacement ?}}

*Choisir des indicateurs cohérents avec le travail de la communauté
*Intégrer des indicateurs de la démarche sur les services éco-conçus
*Utiliser les services de mesure reconnus par la communauté (ecoindex)
*Utiliser des équivalences grand public de manière consistante</translate>
}}
{{Tuto Step
|Step_Title=<translate>Choix techniques</translate>
|Step_Content=<translate>===Choix d'un langage back-end===
Le choix d'un langage back-end pour un projet numérique doit s'effectuer dans un réflexion de résilience du système numérique. Pour perdurer, pour être entretenu correctement et pour pouvoir être développé en adéquation avec les besoins, il est nécessaire de choisir un langage en fonction de :

*la taille de la communauté d'utilisateurs : plus il y a d'utilisateurs, plus le langage est documenté et plus il sera facile à prendre en main et à débugger.
*les compétences préexistantes de l'équipe projet : si une partie ou l'ensemble de l'équipe projet est déjà à l'aise sur un langage en particulier, cela représente un intérêt non négligeable pour faciliter la conception numérique.
*l'intégration dans les services informatiques préexistants de la structure : si le projet s'inscrit dans une structure qui dispose déjà d'une infrastructure numérique, il est pertinent d'homogénéiser les choix de langage.

Ces critères peuvent sembler éloignés de l'aspect écologique de l'écoconception numérique. En réalité, ces critères se focalisent principalement sur deux aspects de résilience qui sont interdépendants :

*éviter la complexification du système :
*favoriser le maintien long terme du système

Multiplier les langages et sélectionner des langages peu documentés ou mal maitrisés, c'est augmenter la complexité du système informatique. Dans l'optique où le numérique doit être utilisé uniquement s'il répond à un réel besoin, il est essentiel que la structure numérique en elle-même reste accessible et manipulable par l'humain. Ce dernier doit rester maître de son système numérique, car dans un contexte de contraction énergétique et matérielle, il aura besoin d'adapter sa structure. Gagner en flexibilité et en contrôle sur son système numérique, c'est s'assurer de sa pérennité.

On pourrait se demander si le choix du langage ne devrait pas reposer également sur une évaluation factuelle de son efficacité énergétique. Certains articles de recherche se sont penchés sur cette question :

https://www.sciencedirect.com/science/article/abs/pii/S0167642321000022

Cependant, il y a trop peu de documentation ou d'articles scientifiques aujourd'hui pour prioriser le choix des langages selon ce critère. Ce dernier reste marginal devant les critères précédents.

===Choix d'une librairie Javascript===
voir : https://gauthierroussilhe.com/book/ademe/JS.html</translate>
}}
{{Tuto Step
|Step_Title=<translate>Gestion des assets</translate>
|Step_Content=<translate>=== Polices de caractères ===

* Limiter le nombre de polices utilisées
* Utiliser des polices systèmes (polices par défaut des navigateurs)
* Utiliser des ''web safe font'' (polices les plus courantes = Arial, Courier New, Times New Roman, Georgia et Verdana)
* Avoir recours à un appel local ou distant pour d'autres polices

=== Compresser et appeler des images ===

* Limiter le nombre global d'images en réfléchissant à l'intérêt réel de l'utilisation de l'image
* Limiter le chargement des images (''lazy loading''), voir décider du non-chargement de certaines images (par exemple si trop ancienne)
* Compresser (et utiliser le ''dithering)'', redimensionner les images

=== Compresser et charger des vidéos ===

* Limiter le nombre global de vidéos ainsi que leur duréee et leur qualité en réfléchissant à l'intérêt réel de l'utilisation de ces vidéos
* Limiter le chargement des vidéos (sans lecture automatique, ''lazy loading'')
* Compresser et redimensionner les vidéos

=== Choisir son hébergeur ===
L'hébergement dépend de nombreux critères environnementaux qu'il est important de prioriser. Voici quelques critères principaux pour orienter votre choix :

Durée de vie des équipements (serveur, proxy, switch, etc.)

''Critère : durée de vie supérieure à 5 ans''

* Matériel ''/ Critère : parc d'équipements labellisé EnergyStar, EPEAT, ecoLabel 80+ recommandé''
* Efficacité énergétique (PUE) ''/ Critère : inférieur à 1,15''
* Type de refroidissement / ''Critère : refroidissement à air libre ou adiabatique recommandé''
* Intensité carbone de l'électricité / ''Critère : inférieur à 75gCO2e/kW''
{{Warning|Même s'ils peuvent apparaître "vert" à première vue, il est donc déconseillé d'utiliser les services d'hébergement des GAFAM.}}

=== Données d'audience et gestion des cookies ===
voir https://gauthierroussilhe.com/book/ademe/AUDIENCE.html

et https://gauthierroussilhe.com/book/ademe/COOKIES.html
<br /></translate>
}}
{{Tuto Step
|Step_Title=<translate>Exemples de sites low-tech</translate>
|Step_Content=<translate>La liste suivante est une proposition non exhaustive d'exemples de structures ayant développé un site web à basse consommation. De plus, ces structures développent plus globalmeent des contenus pertinents dans le développement de solutions low-tech, numériques ou non.

=== Solar low-tech magazine ===
Low-tech Magazine remet en question la croyance dans le progrès technologique et met en évidence le potentiel des connaissances et des technologies du passé pour concevoir une société durable. Créé par Kris De Decker, le site web du magazine est un site suivant une conception numérique à faible impact, qui répond aux besoins et respecte les principes du magazine. Pour réduire la consommation d'énergie, ils ont opté pour une conception web de base, en utilisant un site statique au lieu d'un système de gestion de contenu basé sur une base de données. Ils utilisent en outre des polices de caractères par défaut, des images tramées, des options de lecture hors ligne et d'autres astuces pour réduire la consommation d'énergie bien en dessous de celle d'un site web moyen. En outre, les faibles besoins en ressources et la conception ouverte permettent de maintenir le blog accessible aux visiteurs disposant d'ordinateurs plus anciens et/ou de connexions Internet moins fiables. Parce qu'il consomme si peu d'énergie, ce site web peut être exécuté sur un mini-ordinateur ayant la puissance de traitement d'un téléphone portable. Il a besoin d'une puissance de 1 à 2,5 watts, qui est fournie par un petit système photovoltaïque hors réseau installé sur le balcon de la maison de l'auteur Kris De Decker. Comme c'est le cas pour les systèmes d'énergie renouvelable hors réseau, le stockage de l'énergie est limité. Cela signifie que le site Web sera hors ligne pendant les longues périodes de temps nuageux. Le magazine propose également une version imprimée sur demande du contenu de son site internet.

Pour en savoir plus : https://solar.lowtechmagazine.com/about.html

=== lowtechlab.org/fr/ ===
Le Low Tech Lab est une association qui croit que la pensée low-tech permet de vivre mieux avec moins, et que si elle était plus largement connue, acceptée et adaptée, elle permettrait de lutter efficacement contre les maux tant environnementaux que sociaux et sociétaux du XXIème siècle. Depuis 2013, ils font le constat que de nombreuses réponses low-tech existent déjà un peu partout et que les initiatives individuelles et/ou collectives émergent spontanément aux quatre coins du monde. Leurs missions sont d'explorer pour dénicher des solutions et des projets low-tech partout en France et dans le Monde ; d'expérimenter dans différents contextes et domaines ; de documenter les low-tech, le tout en open-source, et gratuitement ; de faciliter la mise en mouvement par des outils collaboratifs et communautaires ; et de diffuser et transmettre les expériences et les témoignages des ambassadeurs de la low-tech.

Pour concevoir leur site web en adéquation avec leur philosophie, ils sont repartis des 3 piliers de la philosophie des low-tech : "Durable, car le site réduit son empreinte environnementale au maximum et est conçu pour durer le plus longtemps possible avec peu de maintenance. Accessible, car la légèreté du site permet à un plus grand public d’y accéder quelque soit la qualité du réseau et l’âge du smartphone ou de l’ordinateur. Utile, car il répond aux besoins présents et futurs de l’équipe du Low-tech Lab et de sa communauté. L’aspect environnemental est ici prépondérant et structure la conception : l’idée générale est que la réduction du transfert de données permette de réduire la consommation électrique et l’usure des équipements et ainsi réduire l’empreinte environnementale globale en termes d’émissions de gaz à effet de serre, de consommation d’eau et de consommation de ressources."

Pour en savoir plus : https://lowtechlab.org/fr/actualites-blog/le-low-tech-lab-lance-son-site-internet-low-tech

=== gauthierroussilhe.com/ ===
Gauthier Roussilhe est un designer et chercheur étudiant comment nos pratiques de conception se modifient dans le cadre de la crise environnementale planétaire. Sa pratique et ses questions de recherche se concentrent précisément sur le design numérique et les impacts environnementaux du numérique. Il apporte également son expertise indépendante pour les acteurs publics et privés qui souhaitent être éclairés dans leurs choix numériques afin d'être en cohérence avec les politiques de transition écologique. Enfin, il forme aux enjeux environnementaux de la numérisation par la compréhension générale des infrastructures et du socle matériel du secteur numérique dans des structures comme Sciences Po Paris ou l'ENS Paris Saclay.

En novembre 2020, il publie <u>Situer le numérique</u>, un un manuel pédagogique qui permet d’introduire et de comprendre les enjeux environnementaux du numérique. Ce manuel peut servir à former les personnes qui souhaitent travailler sur les impacts environnementaux du numérique et sur l’écoconception web, quelque soit leur niveau sur le sujet. Le manuel est composé de trois cahiers :

1 - Définir un cadre : quelle place pour l’Homme sur quelle Terre ?

2 - Matérialiser le numérique : quelles infrastructures et quels impacts ?

3 - La conception numérique à faible impact : quelles expériences, quelles méthodes et quelles perspectives ?

Dans ce dernier cahier, il développe les pratiques de la conception numérique à faible impact, qu'il met en oeuvre dans son propre site web.

Pour en savoir plus : https://gauthierroussilhe.com/ressources/situer-le-numerique

=== Notre site web low-tech : lowtechnum.mooo.com ===
Le site que nous avons créé et hébergé sur Dominik répond à un objectif de sensibilisation, mais aussi à des objectifs de documentation, tout en étant un démonstrateur de ce qu’est ou pourrait être Dominik. Il permet de décrire le projet, de mettre en ligne les guides pratiques pour recréer la box Dominik, de proposer des ressources sur l’impact du numérique et un accès à un support de stockage, à l’adresse lowtechnumerique.mooo.com.

Il est volontairement visuellement épuré pour faire écho aux pratiques de sobriété numérique.</translate>
}}
{{Notes
|Notes=<translate></translate>
}}
{{PageLang
|Language=fr
|SourceLanguage=none
|IsTranslation=0
}}
{{Tuto Status
|Complete=Draft
}}