# Atelier numérique responsable Hackacorp -- Simplon Corp 17 octobre 2019 https://hackmd.io/@yaaax/atelier-numerique-responsable --- Cet atelier va vous faire participer, préparez vos ordinateurs portables ! --- ## Présentations --- - Yaacov Cohen - Développeur plutôt front-end mais en fait un peu "Full-Stack Overflow" - 15 ans d'expérience dans le développement d'applications --- ### Principales compétences - :sunglasses: Front-end / Intégration / Architecture logicielle / Back-end / Bases de données / JAMstack - :sunglasses: HTML / CSS / JavasScript / Vue.js / PHP / WordPress (roots.io) - :persevere: Obligé d'y toucher : Apache / NGINX / Bash / Linux / GIT / Docker / ... --- ### Mais aussi... - :art: Photoshop / Illustrator / Figma - :calendar: Gestion de projet - :speech_balloon: Coordinateur technique - :package: Product owner - :euro: Commercial - :1234: Comptabilité --- - :loudspeaker: Communication - :bird: Community Manager - :tada: Réseau - :mag_right: Veille (notamment sur le numérique responsable) - :school: Sensibilisation / Formation - ... --- Bref entrepreneur à plein temps :sweat_smile: ![One-man band](https://live.staticflickr.com/7405/12182919023_1d1913da0f_c.jpg "One-man band" =400x400) *(https://www.flickr.com/photos/wwward0/12182919023)* --- ### Good Impact  <code>Studio web à impact positif</code> --- #### Notre mission Accompagner -- concevoir -- développer -- maintenir des services numériques --- Nous encourageons nos clients à adopter avec nous une démarche **numérique responsable** * Éco-conception * Accessibilité * Protection de la vie privée (RGPD) :+1: --- #### :bulb: Un projet qui nous botterait bien : un **Web-Builder "Responsable"** Pas pour tout de suite... mais une idée qui fait son chemin ! --- #### Quelques références - [Koena](https://koena.net) : accessibilité numérique, optimisations - [Persay](https://www.persay.universite-paris-saclay.fr/) : WordPress optimisé - [CO2 Calculator We Love Green](https://welovegreen.goodimpact.studio) : multiples réflexions d'éco-conception - [Mon Diag Electrique](https://mondiagelectrique.fr) : accompagnement et co-construction. Génération statique envisagée mais laissée de côté pour l'instant - [Ekodev](https://ekodev.com) développements spécifiques d'outils internes (CRM, ekovoiturage) - [Fair Trip](https://www.fairtrip.org) (Application Android) --- #### Open source Good Impact Image Compressor (GIIC) - Une extension (plugin) WordPress de compression d'images - Conçue de façon responsable : éco-conçue, accessible et open-source - WIP 80%. Un peu de patience :smiley: --- ## Mais au fait, c'est quoi au juste le "Bad impact" du numérique ? :-1: --- ### Les impacts environnementaux - Gaz à effet de Serre (GES) -> changement climatique - Tension sur l’eau - Épuisement des ressources abiotiques - Déchets électroniques (DEEE) - Déchets papier (impressions) --- A noter : - les impacts se concentrent côté utilisateur  - les impacts sont beaucoup plus important lors de la fabrication des terminaux --- ### Les impacts sociétaux #### Le numérique peut laisser certaines personnes de côté : - les personnes handicapées, - les personnes agées, - les personnes habitant certaines zones géographiques, - etc. --- #### l'économie de l'attention - Le numérique peut rendre fou ! (notifications, patterns addictifs, etc.) --- ### Les dérives de la surveillance de masse (ex: Cambridge Analytica...) - Perte de liberté - Effets pervers. Ex: - une application pour suivre les cycles féminins qui "prévient" le patron que son employée va bientôt tomber **enceinte** - **Strava** et la découverte d'une base militaire secrète - ... (cf. docu *Nothing to Hide*) --- ## Mais alors, que faire ? --- ### L'éco-conception à la rescousse --- ### L'accessibilité numérique --- ### RGPD (--> limiter les cookies inutiles, etc.) --- ### L'open source Note sur l'open-source : la communauté peut l'optimiser + moins de "lock" :lock: de version => des machines qui durent plus longtemps --- # Passons à la pratique ! --- Nous allons : 1. faire un petit audit, ensemble, d'une simple page créée avec WIX sur ces 3 aspects : accessibilité, eco-conception et protection de la vie privée 2. étudier les alternatives pour créer la même page de façon plus responsable et en adoptant une posture "low-tech" --- À chaque étape, des indicateurs seront utilisés pour mesurer les gains apportés. --- ## Une simple page vitrine sous WIX --- ### WIX : un web-builder (constructeur de site) --> https://yaacov60.wixsite.com/goodimpact --- ### Un peu de bon sens Qui peut me dire comment on pourrait améliorer cette page ? --- ### Mesures par les outils Utilisez les différents outils ([Ecometer](http://www.ecometer.org) / [Carbonalyser](https://addons.mozilla.org/fr/firefox/addon/carbonalyser) / [Dareboost](https://dareboost.com) / [web.dev](https://web.dev/measure)) :construction_worker: 4 groupes :mag_right: chaque groupe un outil --- ### Les résultats --- ## Une page générée statiquement avec Hugo --> https://atelier-simplon.netlify.com --- ### C'est quoi la JAM Stack ?  --- ### Vous avez dit "générateur de site statique" ? --- ### Hugo + Forestry + Netlify --- ### Allez, on y retourne : EcoMeter, EcoIndex, web.dev... Vous pouvez changer pour plus de fun :tada: --- ### Introduction au Markdown --> Vous pouvez tester avec, par exemple, [StackEdit](https://stackedit.io/app) --> Cette présentation est faite avec [HachMD](hackmd.io) --- --- ## L'écosystème du numérique responsable --- ### Les références du secteur - [Collectif Green IT](https://collectif.greenit.fr) : la communauté pionnière (Frederic Bordage) ([Groupe](https://groups.google.com/forum/#!forum/ecoconceptionweb), [Outils](https://collectif.greenit.fr/outils.html), etc.) - [Institut du Numérique Responsable](https://institutnr.org) : "lieu de réflexion sur les trois enjeux clés du numérique responsable" - [AGIT](https://alliancegreenit.org) : "diffuser les pratiques écologiquement et socialement responsables au sein des métiers du numérique" ([dernier livre blanc intéressant en date](https://alliancegreenit.org/gt-sensibilisation-grand-public)) --- - [The Shift Projet](https://theshiftproject.org) : "Think Tank qui oeuvre en faveur d’une économie libérée de la contrainte carbone". On aime le *style* de Jancovici :wink: - [GREENSPECTOR](https://greenspector.com) : "Mesurez, benchmarkez, améliorez" - [Green Code Lab](https://www.greencodelab.org) : promotion de l’éco-conception des logiciels --- - [La Fing](http://fing.org) : Think Tank de référence pour anticiper les transformations numériques - [WWF France > numérique responsable](https://www.wwf.fr/projets/numerique-responsable) : Livres blancs, rapports --- - [Eco Info](https://ecoinfo.cnrs.fr/) CNRS - "Pour une informatique éco-responsable" - [Plaidoyer Simplon : Pour un Numérique d'Intérêt Général](https://plaidoyer.simplon.co) :tongue: --- ### Des chiffres sur les impacts - [Empreinte environnementale du numérique mondial](https://www.greenit.fr/empreinte-environnementale-du-numerique-mondial) - [LEAN ICT – LES IMPACTS ENVIRONNEMENTAUX DU NUMÉRIQUE](https://theshiftproject.org/article/pour-une-sobriete-numerique-rapport-shift) - [« CLIMAT : L’INSOUTENABLE USAGE DE LA VIDÉO EN LIGNE »](https://theshiftproject.org/article/climat-insoutenable-usage-video) : rapport du Shift Porject --- ### Des concepteurs impliqués (agences, studios, freelances) - [Good Impact](https://goodimpact.studio) : "Studio web à impact positif" = auto-pub :sunglasses: - [Fairness](https://fairness.coop): "Concevoir responsable" - CONSEIL : écoutez le [Podcast Techologie](https://techologie.net) ! - [Wexample](https://wexample.com) ([Responsite](https://respon.site)) : "Réalisez votre site web éco-responsable". Methodologie bien pensée --- - [Raphaël Lemaire](http://raphael-lemaire.com) Best of Web, informatique durable - [I Have a Green](https://ihaveagreen.fr) : réalisation de sites web éco-conçus, formations et accompagnent - [Romuald Priol](https://docroms.com) : développeur de Services Numériques Responsables - [Bertrand Keller](https://bertrandkeller.info) - [Nüweb](https://www.nuweb.fr) : Agence web éco-responsable --- - [Émeraude Créative](https://emeraude-creative.com) : Studio web spécialisé dans la stratégie digitale et expert en éco-conception web - [Translucide](https://www.translucide.net) par Simon Vandaele - [Frügal IT](http://frugal-it.green) "Applications IT engagées" - [Wouep](https://wouep.com) "On ne change pas le web, mais la manière de le faire" - [Aristys Web](https://www.aristys-web.com) "UX Design, référencement et éco-conception web" --- - [Agence MAAD](https://agence-maad.fr) Agence web à Dijon Super classement par Bertrand Keller : https://bertrandkeller.info/audit/agencesecoconception/ --- ### D'autres acteurs fortement impliqués - [CHATONS](https://chatons.org) : Hébergement alternatif – Décentralisation des données personnelles - [Inrupt / SOLID](https://inrupt.com/) par l'équipe de Tim Berners-Lee, l'inventeur du web : décentralisation et protection de la vie privée - [L'Assemblée Virtuelle](https://www.virtual-assembly.org/) : *"écosystème d’acteurs développant de manière collaborative des communs (outils, méthodologies et projets) au service des acteurs de la transition* --- - [Framasoft](https://framasoft.org) : "Dégooglisons internet !"" - [/e/](https://e.foundation) : "OS pour smartphones open source et respectueux de la vie privée" (Gaël Duval) --- ### Des formateurs engagés - [greenIT.fr](https://www.greenit.fr/formations/) : Green IT, ecoconception numérique - [Opquast](https://www.opquast.com) : qualité web - [Koena](https://koena.net) : accessibilité numérique - [Access42](https://access42.net/) : accessibilité numérique - [AcceDe Web](https://www.accede-web.com/) : accessibilité numérique - [Simplon](https://simplon.co) : numérique responsable et insertion --- ### Des spécialistes - [Fabrice Flipo](http://www.lcsp.univ-paris-diderot.fr/Flipo) : Professeur de philosophie, épistémologie et histoire des sciences et techniques C.f. [article "La croissance d’Internet peut-elle être respectueuse de l’environnement ?"](https://usbeketrica.com/article/internet-peut-il-etre-respectueux-environnement) - [Philippe Bihouix](https://www.youtube.com/watch?v=emWt12qLgsM) : l'âge des Low Tech --- ### Les labels et indexes - [Le Label NR](https://label-nr.fr) - [Ecometer](http://www.ecometer.org) - [Ecoindex](http://www.ecoindex.fr) - [GreenIT-Analysis](https://github.com/didierfred/GreenIT-Analysis) : = Ecometer + EcoIndex sous forme d'extension - [Carbonalyser](https://addons.mozilla.org/fr/firefox/addon/carbonalyser) : extension Firefox "Analyse Internet usage carbon footprint" --- - [Ecograder](https://ecograder.com) - [Asqatasun](https://asqatasun.org) (Accessibilité) - [Tanaguru](https://www.tanaguru.com) (Accessibilité) - [Dareboost](https://dareboost.com) (Performance générale) --- ### La preuve par l'exemple - THE LINK : https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html - https://bare.eco - https://www.notechmagazine.com - http://gauthierroussilhe.com/fr/posts/convert-low-tech - https://wikipedia.org --- - [Quel avenir pour les sites « low-tech » ?](https://graphism.fr/quel-avenir-pour-les-sites-low-tech) - https://n-o-d-e.net/ --- ### Des outils et de la doc - [W3C TAG Ethical Web Principles](https://www.w3.org/2001/tag/doc/ethical-web-principles) : à l'instar des Web Content Accessibility Guidelines ([WCAG](https://www.w3.org/Translations/WCAG20-fr/)), pour le numérique responsable - [web.dev](https://web.dev) Complet, par Google - [GTmetrix](https://gtmetrix.com) Performance (:warning:≠green) - [Dareboost](https://dareboost.com) : test, analyse et optimisation de sites webs - [images.guide](https://images.guide) : compression d'images (Addy Osmani) --- - [Unused CSS](https://www.jitbit.com/unusedcss) : "scan your website for unused CSS selectors" - [8 conseils pour améliorer l’accessibilité de votre thème WordPress (Access42)](https://wordpress.access42.net]) --- ### Des technologies prometteuses - [La JAMstack](https://jamstatic.fr/) : JavaScript API Markup - [ActivityPub](https://www.w3.org/TR/activitypub) : réseaux sociaux décentralisés (e.g. : [Mastodon](https://blog.joinmastodon.org/2018/06/why-activitypub-is-the-future/)) - ... --- ### Sur le reconditionnement - [Ecodair](https://www.ordinateur-occasion.com) - [BackMarket](https://www.backmarket.fr) - [Leboncoin](https://www.leboncoin.fr) --- ## L'écosystème éloigné --- ### Tech for good - [GreenTech verte](https://www.ecologique-solidaire.gouv.fr/greentech-verte) : "Le numérique au service de la transition écologique et solidaire" - [Bayes Impact](https://www.bayesimpact.org/fr) : "Empowering people at scale" - [Solidatech](https://www.solidatech.fr) : "Solutions numériques pour les associations" - [I Wheel Share](https://www.iwheelshare.com) --- - [Collectif BAM](https://www.collectifbam.fr) : Design éthique ([belle infographie](https://www.slideshare.net/EnjoyDigitAll/ethics-by-design-infographie)) - [Center For Humane Technology](https://humanetech.com) (Tristan Harris, Time Well Spent) --- ## Les blogs / Podcasts à suivre - [Blog greenit.fr](https://www.greenit.fr/) - [Podcast Techologie](https://techologie.net) --- ## Quelques vidéos --- - Frédéric Bordage - Comment réduire les impacts environnementaux du numérique ? {%youtube xiRkS5Gabo8 %} --- - Eco-concevoir un site web : Retour d’expérience - Romain PETIOT - Web2day 2019 {%youtube CbGCG0glAnc %} --- - L’avenir du numérique à l’ère de l’anthropocène - Alexandre Monnin & Diego Landivar {%youtube RXTFyA6qwDs %} --- - Écologie digitale et efficacité énergétique: comment réduire l'impact environnemental du numérique ? *(à noter : un message de responsabilisation au début de la vidéo)* {%youtube orbZwZSHYkY %} --- - Documentaire 8 bits, les bricoleurs du son {%youtube zHAvy_99ZRU%} --- - Documentaire "Nothing to Hide" {%youtube djbwzEIv7gE%} --- ## Le numérique responsable dans l'art - [I Agree](https://www.dimayarovinsky.com/i-agree) : Oeuvre de Dima Yarovinsky sur les CGUs interminables des GAFAM - [The Disconnect](https://thedisconnect.co) : Un magazine en ligne qui se lit en mode offline uniquement ! --- ## Super idées de numérique responsable - [Et si demain on ne prenait plus l'avion ?](https://www.linkedin.com/pulse/et-si-demain-ne-prenait-plus-lavion-audrey-blanchard/) - [Solar Low Tech Magazine](https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html) --- ### Citations et reflexions intéressantes - Frederic bordage sur le groupe, au sujet du **Choix d'un CMS responsable** : --- > On peut élaborer une réponse en plusieurs temps afin de transmettre l'état d'esprit de l'écoconception : > 1. A priori, il faut privilégier du flat file / jamstack. > 2. Sauf que **ce n'est pas la solution technique qu'on doit chercher à écoconcevoir, mais plutôt l'unité fonctionnelle sous-jacente**, --- > cf : > - "**être présent sur le web via un site vitrine**", > - "**présenter mon catalogue de produits à mes clients**", > - "**permettre à mes clients d'acheter mes produits**", > - "**diffuser des contenus payant en fonction du profil des utilisateurs**", > - etc. --- > Cette approche par le métier est bien plus efficace pour arbitrer intelligemment entre WP, Drupal, Translucide, flat file / Jamstack, etc. C'est l'acter métier dont on cherche à réduire les impacts, pas une seule des briques (pourquoi uniquement le CMS et pas le SGBD/R, l'OS, etc.) permettant de le réaliser. --- > Cela ouvre aussi des horizons / passerelles entre le print et le web, sur le choix du matériel et de l'hébergement, sur les choix de conception UX / UI / archi applicative associés aux terminaux des utilisateurs, etc. --- > 3. Ensuite, entre WP, Drupal, etc. ce qui impacte souvent le plus, ce sont : > - le thème / vue ; > - le choix des extensions / modules ; > - le paramétrage du CMS (cache, etc.). > bien avant le CMS lui même. --- > Lorsque l'on écoconçoit, pour dépasser les simples optimisations techniques (qui sont déjà un progrès), il faut surtout considérer l'acte métier : lire un article, acheter un produit en ligne, prendre un train, consulter le solde de son compte en banque, etc. --- > C'est presque toujours au niveau métier qu'on trouve des leviers d'écoconception importants. Par exemple, la veille du départ, la SNCF envoie un "reminder" aux voyageurs avec leur n° de place, n° de train, etc. via un simple SMS. --- > C'est en comprenant finement l'attente des voyageurs, qu'on peut faire ce choix d'écoconception un peu "radical" / lowtech qui délivre d'énormes imapcts évités par rapport à une appli mobile 4G, etc. --- Par ailleurs, le SMS évite de créer de la fracture numérique, etc. donc on rentre sur une posture globale de conception responsable et plus seulement d'écoconception. --- ### Merci ! :pray: Vous pouvez suivre la veille de Good Impact sur - [Twitter](https://twitter.com/GoodImpactFr) - [Facebook](https://www.facebook.com/studiogoodimpact) - [LinkedIn](https://www.linkedin.com/company/good-impact) Nous joindre par e-mail : [contact@goodimpact.studio](mailto:contact@goodimpact.studio)