chore: add "sources"

tag

.editorconfig

@@ -7,3 +7,6 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 charset = utf-8
+
+[*.md]
+trim_trailing_whitespace=false

.gitignore

@@ -3,5 +3,4 @@
 _site/
 dist/
 node_modules/
-package-lock.json
 src/compiled-assets

eleventy.config.js

@@ -1,5 +1,6 @@
 const { DateTime } = require("luxon");
 const markdownItAnchor = require("markdown-it-anchor");
+const pluginTOC = require('eleventy-plugin-toc')
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
@@ -9,12 +10,15 @@ const htmlmin = require('html-minifier');
 
 let options = {
   // whatever options you have set for the library here
+  html: true,
   typographer: true,
   quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'],
 };
 let mdfigcaption = require('markdown-it-image-figures');
 let figoptions = {
-  figcaption: true
+  figcaption: true,
+  lazy: true,
+  async: true,
 };
 const mdLib = markdownIt(options).use(mdfigcaption, figoptions);
 
@@ -39,6 +43,15 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+  eleventyConfig.addPlugin(pluginTOC, {
+    tags: ['h2', 'h3'],
+    wrapperClass: 'table-of-contents',
+    ul: true,
+  });
+
+  eleventyConfig.addShortcode('getYear', () => {
+    return new Date().getFullYear();
+  });
 
   eleventyConfig.addFilter("env", (key, def="NOT DEFINED") => process.env[key] || def);
 
@@ -68,23 +81,41 @@ module.exports = function(eleventyConfig) {
     return Math.min.apply(null, numbers);
   });
 
+  eleventyConfig.addFilter("filterDraft", articles => {
+    return articles.filter(article => !article.data.draft);
+  });
+
+  eleventyConfig.addFilter("onlyDraft", articles => {
+    return articles.filter(article => article.data.draft);
+  });
+
   // Return all the tags used in a collection
   eleventyConfig.addFilter("getAllTags", collection => {
-    let tagSet = new Set();
+    let tags = new Map();
     for(let item of collection) {
-      (item.data.tags || []).forEach(tag => tagSet.add(tag));
+      if (item.data.draft) {
+        continue;
       }
-    return Array.from(tagSet).sort((a, b) => {
-      return a.localeCompare(b, undefined, {sensitivity: 'base'});
+      (item.data.tags || []).forEach(tag => {
+        let number = tags.get(tag) || 0;
+        tags.set(tag, ++number);
       });
+    }
+    let sortedTags = new Map([...tags.entries()].sort((a, b) => b[1] - a[1]));
+    return Array.from(sortedTags.keys());
   });
 
   eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
     return (tags || []).filter(tag => ["all", "nav", "article", "articles"].indexOf(tag) === -1);
+    // const filters = ["all", "nav", "article", "articles"];
+    // return new Map([...tags].filter(([k, _]) => filters.indexOf(k) === -1));
   });
 
   eleventyConfig.addFilter("readableAuthors", (authors) => {
-    return authors ? "par " + (authors || []).join(" & ") : "";
+    if (authors.length > 1) {
+      return "par " + authors.slice(0, -1).join(", ") + " et " + authors.slice(-1);
+    }
+    return "par " + (authors || []);
   });
 
   eleventyConfig.addFilter("noHome", elements => {
@@ -96,11 +127,6 @@ module.exports = function(eleventyConfig) {
   // Customize Markdown library and settings:
   eleventyConfig.amendLibrary("md", mdLib => {
     mdLib.use(markdownItAnchor, {
-      permalink: markdownItAnchor.permalink.ariaHidden({
-        placement: "after",
-        class: "direct-link",
-        symbol: "#",
-      }),
       level: [1,2,3,4],
       slugify: eleventyConfig.getFilter("slug")
     });

package.json

@@ -9,7 +9,7 @@
     "del:dist": "rimraf ./dist",
     "dev": "npm run dev:assets & npm run dev:site",
     "dev:assets": "webpack --config webpack.config.dev.js",
-    "dev:site": "ELEVENTY_ENV=development npx eleventy --serve",
+    "dev:site": "cross-env ELEVENTY_ENV=development npx eleventy --serve",
     "prod": "npm-run-all del:dist del:assets build:assets build:site",
     "serve:prod": "serve ./dist/"
   },
@@ -22,24 +22,24 @@
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
-    "markdown-it-anchor": "^8.6.4",
-    "markdown-it-image-figures": "^2.1.0",
-    "luxon": "^3.0.4",
-
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",
     "core-js": "^3.22.8",
     "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eleventy-plugin-toc": "^1.1.5",
     "eslint": "^8.17.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.26.0",
     "html-minifier": "^4.0.0",
+    "luxon": "^3.0.4",
+    "markdown-it-anchor": "^8.6.4",
+    "markdown-it-image-figures": "^2.1.0",
     "md5-file": "^5.0.0",
     "mini-css-extract-plugin": "^2.6.0",
     "npm-run-all": "^4.1.5",
-    "css-minimizer-webpack-plugin": "^4.0.0",
     "postcss-loader": "^7.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.52.2",
@@ -51,6 +51,7 @@
     "webpack-merge": "^5.8.0"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "prettier": "^2.0.5"
   }
 }

src/_components/articlesList.njk

@@ -11,7 +11,7 @@
           </div>
           <ul class="post-tags">
             {%- for tag in article.data.tags | filterTagList %}
-              {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+              {%- set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
               <li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
             {%- endfor %}
           </ul>
@@ -23,4 +23,9 @@
     </footer>
   </article>
 {% endfor %}
+{% if showMore %}
+  <div>
+    <a href="/blog/all_articles">Voir l'ensemble des articles</a>
+  </div>
+{% endif %}
 </div>

src/_layouts/article.njk

@@ -2,10 +2,15 @@
 layout: blog.njk
 templateClass: tmpl-post
 ---
+{%- if toc %}
+<aside class="left-side">
+  {{ content | toc | safe }}
+</aside>
+{%- endif %}
 <div class="main-content">
-  <h1>{{ title }}</h1>
-
-  <div class="post-metadata">
+  <h1>  {% if draft %} Brouillon - {%- endif %} {{ title }}</h1>
+  <div
+    class="post-metadata">
     <div class="post-metadata__header">
       Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
     </div>
@@ -21,15 +26,26 @@ templateClass: tmpl-post
 
   <hr>
 
-  {%- if collections.articles %}
+  {%- set articles = collections.articles | filterDraft %}
+  {%- if articles %}
   {# these filters are locale-aware in 2.0.0-canary.14 #}
-  {%- set previousArticle = collections.articles | getPreviousCollectionItem %}
-  {%- set nextArticle = collections.articles | getNextCollectionItem %}
+  {%- set previousArticle = articles | getPreviousCollectionItem %}
+  {%- set nextArticle = articles | getNextCollectionItem %}
   {%- if nextArticle or previousArticle %}
     <nav class="post-nav">
       <ul>
-        {%- if previousArticle %}<li class="previous">Précédent : <a href="{{ previousArticle.url }}">{{ previousArticle.data.title }}</a></li>{% endif %}
-        {%- if nextArticle %}<li class="next">Suivant : <a href="{{ nextArticle.url }}">{{ nextArticle.data.title }}</a></li>{% endif %}
+        {%- if nextArticle %}<li class="next">
+          <a href="{{ nextArticle.url }}" title="Article suivant">
+            <span class="icon" aria-hidden="true">«</span>
+            <span>{{ nextArticle.data.title }}</span>
+          </a>
+          </li>{% endif %}
+        {%- if previousArticle %}<li class="previous">
+          <a href="{{ previousArticle.url }}" title="Article précédent">
+            <span>{{ previousArticle.data.title }}</span>
+            <span class="icon" aria-hidden="true">»</span>
+          </a>
+          </li>{% endif %}
       </ul>
     </nav>
   {%- endif %}

src/_layouts/blog.njk

@@ -11,23 +11,23 @@
   <link rel="alternate" href="/blog/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
   <link rel="alternate" href="/blog/feed/feed.json" type="application/json" title="{{ metadata.title }}">
   <link rel="icon" href="/blog_images/favicon.svg">
-  {% if "ELEVENTY_ENV" | env == "production"%}
-    <!-- Matomo -->
-    <script>
-      var _paq = window._paq || [];
-      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="https://itsonus.matomo.cloud/";
-        _paq.push(['setTrackerUrl', u+'matomo.php']);
-        _paq.push(['setSiteId', '1']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src='//cdn.matomo.cloud/itsonus.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
-      })();
-    </script>
-    <!-- End Matomo Code -->
-  {% endif %}
+{#  {% if "ELEVENTY_ENV" | env == "production"%}#}
+{#    <!-- Matomo -->#}
+{#    <script>#}
+{#      var _paq = window._paq || [];#}
+{#      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */#}
+{#      _paq.push(['trackPageView']);#}
+{#      _paq.push(['enableLinkTracking']);#}
+{#      (function() {#}
+{#        var u="https://itsonus.matomo.cloud/";#}
+{#        _paq.push(['setTrackerUrl', u+'matomo.php']);#}
+{#        _paq.push(['setSiteId', '1']);#}
+{#        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];#}
+{#        g.async=true; g.src='//cdn.matomo.cloud/itsonus.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);#}
+{#      })();#}
+{#    </script>#}
+{#    <!-- End Matomo Code -->#}
+{#  {% endif %}#}
 </head>
 <body class="container">
   <header class="main-header">
@@ -47,7 +47,7 @@
     <div class="footer-contact">
       <div>
         <p class="footer-contact-title">IT's on us</p>
-        <p>Copyright © 2022</p>
+        <p>Copyright © {% getYear %}</p>
       </div>
       <ul class="footer-links">
         <li>
@@ -65,7 +65,11 @@
       </ul>
     </div>
     <div class="footer-center">
-      Ceci est le blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.
+      <p>Blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.</p>
+      {% set absoluteUrl %}{{ page.url | htmlBaseUrl(metadata.url) }}{% endset %}
+      <a href="https://bff.ecoindex.fr/redirect/?url={{ absoluteUrl }}" target="_blank">
+        <img src="https://bff.ecoindex.fr/badge/?theme=light&url={{ absoluteUrl }}" alt="Ecoindex Badge" />
+      </a>
     </div>
   </footer>
 {#  <script src="{% webpackAsset 'main.js' %}"></script> Uncomment if JS is needed#}

src/_pages/blog/all_articles.njk

@@ -9,7 +9,7 @@ eleventyNavigation:
   <nav>
     {% include "tagslist.njk" %}
   </nav>
-  {% set articlesList = collections.articles %}
+  {% set articlesList = collections.articles | filterDraft %}
   {% include "articlesList.njk" %}
 </div>
 <aside class="right-side">

src/_pages/blog/article/architecture-entreprise_et_greenit.md

@@ -0,0 +1,69 @@
+---
+title: Quel rôle joue un architecte d'entreprise dans une démarche GreenIT ? 
+description: Nous verrons qu'une bonne connaissance de son architecture SI et une connaissance de l'état de l'art du green IT permet de réduire les impacts environnementaux. 
+date: 2023-03-12
+tags:
+  - architecture d'entreprise
+  - écoconception
+  - greenIT
+authors:
+  - Damien Marzlin
+  - Margaux Escande
+draft: false
+layout: article.njk
+---
+
+*Pour y répondre, nous avons interviewé Damien Marzlin, membre du collectif IT's on us. Damien est architecte d'entreprise, il accompagne les organisations dans la réduction des impacts environnementaux du numérique et forme à l'écoconception de services numériques.*
+
+## Pour commencer, peux-tu nous expliquer ton métier d'architecte d’entreprise ?
+
+Oui tout à fait. Une de mes premières missions est de cartographier l'existant. L'objectif est d'avoir connaissance de toutes les applications qui composent le système d'information et de connaître les fonctions de chaque application.
+
+On sait donc, par exemple, qu'on a une application qui gère les commandes et qu'elle a pour fonction de réceptionner une commande web et d'envoyer des informations pour préparer la commande.
+
+C'est une première vision assez statique, qu'on appelle POS (plan d'occupation des sols). A ce stade, il manque les liens entre les applications.
+
+Dans la suite de mon exemple, l'étape suivante est de rajouter l'information me permettant de savoir comment je dois aller chercher les commandes web. Ce n'est pas parce qu'une application a la donnée que c'est à elle de les mettre à disposition.
+
+Une bonne connaissance des applications et des liens entre elles, permet l'urbanisation. Et ainsi, couvrir un maximum de fonctions avec un minimum d'applications.
+
+L'autre mission importante que j'ai, c'est d'avoir une vision long terme pour détecter les besoins que l'entreprise va avoir en termes de processus, d'applications et de techniques.
+
+## Peux-tu nous expliquer comment, en tant qu'architecte d'entreprise tu arrives à réduire les impacts environnementaux d'un système d'information ? 
+
+Premièrement, il s'agit de ne pas recréer des fonctions existantes. Je constate assez souvent qu'une équipe projet qui ne connait pas l’architecture du système d'information va développer une nouvelle fonction en dehors du cadre d’architecture de l’entreprise.
+Le premier lien évident, c'est qu'en ayant une bonne connaissance du système d'information, les architectes d'entreprises peuvent maximiser la réutilisation de l'existant. Au démarrage d'un projet, on liste les fonctions nécessaires et on identifie celles existantes et manquantes.
+
+Ce qui peut aussi arriver, c'est que les flux de données entre les applications soient nombreux et non optimisés. Cela est dû au manque d'une vue logique des échanges entre les applications. On sait que le transfert de données a plus d'impacts environnementaux que le stockage. On comprend alors l'importance d'optimiser ces transferts.
+Si on a une démarche d'uniformisation des flux, on va pouvoir extraire une seule fois la donnée, la mettre à disposition à un endroit et avoir plusieurs services qui utilisent l'information.
+Par ailleurs, il arrive souvent que lorsqu'on met en place un flux, les équipes demandent une VM donc cela ajoute des impacts environnementaux.
+
+## Comment cela se passe concrètement en entreprise ?
+
+Souvent, un ou plusieurs architectes sont dédiés à un domaine fonctionnel, selon sa taille et son importance.
+Il y a des instances pour que les différents architectes de l'entreprise puissent communiquer. Dans ma mission actuelle, cette instance est hebdomadaire. Régulièrement, je constate qu'il y a des liens entre les domaines et qu'il est important de travailler en coopération.
+
+Par exemple, l'un des domaines cherchait un outil de signature électronique, avant de chercher une solution, ils ont contacté les architectes d'entreprise pour savoir si quelqu'un avait déjà l'application, ce qui état le cas. Cette fonctionnalité a donc été réutilisée.
+
+Je dois également sensibiliser les personnes qui prennent des décisions qui concerne le système d'information. Je participe donc aux instances où il faut prendre des décisions (Design Authority), pour essayer dès le début d'apporter une vision globale de l'existant et de ce qui peut être fait. Cela est vraiment efficace quand la décision est prise à la suite d'un dialogue entre l'architecte d'entreprise et sa hiérarchie.
+
+## Quels sont les bénéfices de cette approche ?
+
+Il y a des gains économiques forts, car on peut mutualiser.
+
+C'est plus intéressant de connecter 10 services à la même infrastructure que d'avoir 10 infrastructures différentes.
+La mutualisation facilite le pilotage. Il y a qu'une seule équipe qui gère l'infrastructure et qui a une vision globale de l'existant pour déterminer ce qui peut être fait. C'est donc plus simple d'optimiser. Sans cela, il y a un risque élévé de surdimensionnement de plusieurs infrastructures.
+
+Par ailleurs, l'uniformisation des flux de données, simplifie la maintenance. Plus il y a de flux, plus il est difficile de détecter des problèmes dans le transport de l’information et donc, de maintenir le système.
+
+## Peut-on mesurer les gains de cette démarche ?
+
+L'architecture a un impact indirect, ça n'a pas de matérialité. Pour mesurer les bénéfices, il faut évaluer la matérialité grâce à un inventaire des équipements numériques. Dans les grandes entreprises il y a le CMDB (la base de données de gestion de configuraiton), une base de données qui contient tous les composants d'un système d'information de manière à avoir une vue d'ensemble sur leur organisation. On peut alors constater ce qu'on a évité (l'achat d'une machine virtuelle - VM - par exemple), le matériel qu'on a supprimé...
+
+Si on veut avoir une idée des impacts environnementaux de façon précise, il faut réaliser une Analyse du Cycle de Vie (ACV) du système d’information. Il est ensuite possible de réaliser un plan d’action, de simuler les gains potentiels. Pour évaluer les bénéfices environnementaux réels, il faut refaire une ACV après la mise en oeuvre des actions.
+
+## As-tu un conseil pour les organisations qui n'ont pas encore démarré ce chantier ?
+
+La première chose à faire c'est de cartographier l'existant, cela permettra de prendre des décisions éclairées.
+Je conseille également de prendre connaissances du référentiel Green IT : [74 bonnes pratiques clés pour un numérique plus responsable](https://club.greenit.fr/doc/2022-06-GREENIT-Referentiel_maturite-v3.pdf) de GreenIT.fr.
+

src/_pages/blog/article/benchmark_greenit_2023.md

@@ -8,9 +8,10 @@ tags:
   - ACV
 authors:
   - Margaux Escande
+draft: false
 layout: article.njk
 ---
-A ce jour, le numérique a plus d'impacts environnementaux que l'aviation civile et ses impacts continuent d'augmenter.
+À ce jour, le numérique a plus d'impacts environnementaux que l'aviation civile et ses impacts continuent d'augmenter.
 
 Beaucoup d'entreprises initient un Bilan Carbone du Numérique. Il faut tout de même savoir que le gros des impacts du numérique se situent non pas sur l'émission de Gaz à Effet de Serre (11%), mais sur l'épuisement de ressources en métaux et minéraux (52%).
 
@@ -20,8 +21,7 @@ Il est donc important de suivre la recommandation de la Commission Européenne d
 
 [Recommandation (UE) 2021/2279 de la Commission du 15 décembre 2021 relative à l'utilisation de méthodes d'empreinte environnementale pour mesurer et indiquer la performance environnementale des produits et des organisations sur l'ensemble du cycle de vie.](https://eur-lex.europa.eu/legal-content/FR/TXT/?uri=CELEX%3A32021H2279&qid=1641580519072)
 
-Afin d'aider les entreprises à initier cette mesure, chaque année depuis 2016, le [Club Green IT](https://club.greenit.fr/) réalise un benchmark GreenIT.
-
+Afin d'aider les entreprises à initier cette mesure, chaque année depuis 2016, un benchmark green IT est réalisé.
 En rejoignant ce benchmark, une organisation, quelque soit son secteur ou sa taille, peut évaluer son empreinte environnementale selon les standards ISO et le PEF.
 
 Cela permet de :
@@ -33,6 +33,7 @@ Cela permet de :
 - répondre à la pression réglementaire
 - échanger avec d'autres organisations ayant le même objectif de réduction de l'empreinte environnementale du numérique
 
+Les rapports sont accessibles sur le site du [Club Green IT](https://club.greenit.fr/).
 Par exemple, le benchmark de 2021 était composé de 25 grandes entreprises privées et publiques, en France, Belgique, Luxembourg et Suisse, qui au global avaient :
 
 - 356 000 utilisateurs ;
@@ -41,7 +42,7 @@ Par exemple, le benchmark de 2021 était composé de 25 grandes entreprises priv
 
 Le coût pour participer au Benchmark varie selon le chiffre d'affaires de l'entreprise de 2 000€ HT à 15 000€ HT.
 
-Vous avez jusqu'à mi-décembre pour rejoindre le Benchmark 2023.
+Vous avez jusqu'à fin décembre pour rejoindre le Benchmark 2023.
 
 Si vous souhaitez en savoir plus nous vous invitons à nous contacter : [contact@itsonus.fr](mailto:contact@itsonus.fr) et à vous inscrire à [la dernière session de présentation du Benchmark 2022 et lancement du Benchmark 2023](https://www.eventbrite.fr/e/billets-benchmark-green-it-2022-et-2023-session-3-452610930477)
 

src/_pages/blog/article/comment_choisir_erp_responsable.md

@@ -9,28 +9,40 @@ tags:
   - écoconception
 authors:
   - Margaux Escande
+draft: false
 layout: article.njk
 ---
 
-Un ERP (Enterprise Resource Planning) est un progiciel de gestion intégré qui permet "de gérer l'ensemble des processus d'une entreprise en intégrant l'ensemble de ses fonctions, dont la gestion des ressources humaines, la gestion comptable et financière, l'aide à la décision, mais aussi la vente, la distribution, l'approvisionnement et le commerce électronique" [Wikipedia](https://fr.wikipedia.org/wiki/Progiciel_de_gestion_int%C3%A9gr%C3%A9)
+Un ERP (Enterprise Resource Planning) est un progiciel de gestion intégré qui permet "de gérer l'ensemble des processus
+d'une entreprise en intégrant l'ensemble de ses fonctions, dont la gestion des ressources humaines, la gestion
+comptable et financière, l'aide à la décision, mais aussi la vente, la distribution, l'approvisionnement et le commerce
+électronique" [Wikipedia](https://fr.wikipedia.org/wiki/Progiciel_de_gestion_int%C3%A9gr%C3%A9)
 
 ## Les entreprises doivent s'outiller pour suivre l'évolution de la réglementation
 
-[D'ici 2026, toutes les entreprises vont devoir émettre des factures électroniques à transmettre aux clients comme à l'administration fiscale.](https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000044044176) Cela devrait permettre de lutter contre les fraudes, notamment à la TVA.
+[D'ici à 2026, toutes les entreprises vont devoir émettre des factures électroniques à transmettre aux clients
+comme à l'administration fiscale.](https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000044044176) Cela devrait permettre
+de lutter contre les fraudes, notamment à la TVA.
 
-La date d'application varie en fonction de la taille de la structure : juillet 2024 pour les grandes entreprises, janvier 2025 pour les entreprises de tailles intermédiaires et janvier 2026 pour les PME et les microentreprises.
+La date d'application varie en fonction de la taille de la structure : juillet 2024 pour les grandes
+entreprises, janvier 2025 pour les entreprises de tailles intermédiaires et janvier 2026 pour les PME et les
+microentreprises.
 
 Les entreprises doivent donc s'outiller pour rendre cela possible. C'est dans ce contexte que nous avons rencontré Equip'tout.
 
-Equip'tout est une société familiale créée en 2000, devenue une référence dans le Nord de la France dans le domaine de la [location de matériels](http://www.equiptout.fr/index.php?id_cms=1&controller=cms) pour les particuliers, les professionnels et les collectivités.
+Equip'tout est une société familiale créée en 2000, devenue une référence dans le Nord de la France dans le domaine
+de la [location de matériels](http://www.equiptout.fr/index.php?id_cms=1&controller=cms) pour les particuliers, les
+professionnels et les collectivités.
 
-Equip'tout défend des valeurs environnementales et sociales qui nous ont amenées à travailler ensemble pour répondre aux nouvelles contraintes de dématérialisation de la facturation.
+Equip'tout défend des valeurs environnementales et sociales qui nous ont amenées à travailler ensemble pour répondre
+aux nouvelles contraintes de dématérialisation de la facturation.
 
 ## La démarche pour choisir un ERP responsable
 
 Avant toute chose, il est important que chaque partie prenante du projet et notamment les décisionnaires aient une bonne [compréhension des enjeux du numérique](https://www.itsonus.fr/enjeux_numerique/). C'est pourquoi nous avons commencé notre mission par une sensibilisation.
 
-Puis, comme toute démarche projet, il convient d'explorer par des interviews et de l'observation le geste métier actuel. Cela nous a permis d’identifier les irritants et les points de satisfaction pour chercher la meilleure réponse.
+Puis, comme toute démarche projet, il convient d'explorer par des interviews et de l'observation le geste métier
+actuel. Cela nous a permis d’identifier les irritants et les points de satisfaction pour chercher la meilleure réponse.
 
 Par exemple, nous avons appris qu'une partie du geste métier ne doit pas être numérisée pour s'assurer de la fluidité du
 parcours. En effet, des fiches papiers sont utilisées dans le processus d'entretien des machines, ce qui donne de façon
@@ -38,15 +50,20 @@ rapide l'information du travail à réaliser sans manipuler un ordinateur.
 
 ![Fiches permettant de suivre l'entretien des machines](/blog_images/articles/comment_choisir_erp_responsable/image_1.jpg "Fiches permettant de suivre l'entretien des machines")
 
-Après avoir pris connaissance de l'existant, nous avons validé le périmètre du projet, identifié la parcours utilisateur, validé les fonctionnalités prioritaires et réalisé une analyse d'architecture pour comprendre la gestion des échanges et du stockage de données.
+Après avoir pris connaissance de l'existant, nous avons validé le périmètre du projet, identifié la parcours
+utilisateur, validé les fonctionnalités prioritaires et réalisé une analyse d'architecture pour comprendre la gestion
+des échanges et du stockage de données.
 
-Nous avons ensuité réalisé une grille d’évaluation des outils selon différents critères : fonctionnels, techniques et responsables.
+Nous avons ensuite réalisé une grille d’évaluation des outils selon différents critères : fonctionnels, techniques
+et responsables.
 
-Cette démarche a abouti à la réalisation d'un prototype permettant à Equip'tout de valider le choix de l'ERP, ainsi que de créer de la confiance entre l'organisation retenue et Equip'tout.
+Cette démarche a abouti à la réalisation d'un prototype permettant à Equip'tout de valider le choix de l'ERP,
+ainsi que de créer de la confiance entre l'organisation retenue et Equip'tout.
 
 ## 4 critères pour choisir un ERP responsable
 
-Au delà de l'objectif d'avoir un ERP adapté au métier d'Equip'tout et conforme au futur changement de réglementation, nous avions 4 objectifs complémentaires.
+Au-delà de l'objectif d'avoir un ERP adapté au métier d'Equip'tout et conforme au futur changement de
+réglementation, nous avions 4 objectifs complémentaires.
 
 **Le service numérique est écoconçu** afin de réduire les impacts environnementaux :
 
@@ -60,19 +77,23 @@ Au delà de l'objectif d'avoir un ERP adapté au métier d'Equip'tout et conform
 * il possède une version web lisible par un lecteur d'écran ;
 * une démarche d'évaluation et d'amélioration est en cours. Par exemple, ils ont fait : un audit RGAA, ils sont certifiés OPQUAST et/ou formé à l'accessibilité numérique.
 
-**La logiciel est open source,** le service est accessible sans limite et le code est accessible, étudiable, modifiable et redistribuable :
+**Le logiciel est open source,** le service est accessible sans limites et le code est accessible, étudiable,
+modifiable et redistribuable :
 
-* il n'y a pas de sur-coût de licence pour accéder à certaines fonctionnalités ;
+* il n'y a pas de surcoût de licence pour accéder à certaines fonctionnalités ;
 * une communauté existe ;
 * nous sommes libres de développer sur la plateforme avec n'importe quel partenaire.
 
-**La solution est durable**, le service est modulable, il est possible de connecter / déconnecter des modules internes et externes au service :
+**La solution est durable**, le service est modulable, il est possible de connecter / déconnecter des modules internes
+et externes au service :
 
 * le langage utilisé pour s'assurer que les connaissances sont présentes localement ;
 * la possibilité d'avoir une assistance et d'être formé à l'administration technique et métier ;
 * le service est exploitable au travers d'API.
 
-Cela n'a pas été le cas ici, mais il aurait été possible que certaines organisations soit labellisées, comme le Label Numérique Responsable, le label B Corp ou face référence à des reconnaissances comme WattImpact. Cela ne doit pas dispenser de questionner et de vérifier les véritables intentions des organisations.
+Cela n'a pas été le cas ici, mais il aurait été possible que certaines organisations soient labellisées, comme le Label
+Numérique Responsable, le label B Corp ou face référence à des reconnaissances comme WattImpact. Cela ne doit pas
+dispenser de questionner et de vérifier les véritables intentions des organisations.
 
 ## Nous avons choisi de travailler avec Tryton
 
@@ -88,6 +109,11 @@ Cependant, notre choix s'est naturellement porté sur Tryton, pour plusieurs rai
 
 Cerdic Krier, manager chez B2CK qui est l'entreprise référente dans le déploiement de Tryton :
 "Nous sommes ravis d'avoir été choisi pour faire les développements et les adaptations pour l'implémentation de
-Tryton chez Equip'Tout. Cela va permetttre d'étendre les fonctionnalités de base de Tryton avec un nouveau module de gestion de location."
+Tryton chez Equip'Tout. Cela va permettre d'étendre les fonctionnalités de base de Tryton avec un nouveau module
+de gestion de location."
+
+Si vous souhaitez [réduire l'empreinte environnementale et sociale de votre
+solution](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/) ou si vous souhaitez
+vous [former au numérique responsable](https://www.itsonus.fr/nos_services/formations/), pensez à
+nous [contacter](https://www.itsonus.fr/contact/).
 
-Si vous souhaitez [réduire l'empreinte environnementale et sociale de votre solution ](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/)ou si vous souhaitez vous [former au numérique responsable](https://www.itsonus.fr/nos_services/formations/), pensez à nous [contacter](https://www.itsonus.fr/contact/).

src/_pages/blog/article/ecoconception_et_datawarehousing.md

@@ -0,0 +1,75 @@
+---
+title: Quelle est la place de l'écoconception dans le datawarehousing ?
+description: Les organisations manipulent beaucoup de données, est-ce compatible avec l'écoconception ? Quelles sont les bonnes pratiques ?
+date: 2023-01-09
+tags:
+  - écoconception
+  - datawarehouse
+
+authors:
+  - Damien Marzlin
+  - Margaux Escande
+draft: false
+layout: article.njk
+---
+
+*Pour y répondre, nous avons interviewé Damien Marzlin, membre du collectif IT's on us. Damien est architecte
+d'entreprise, il accompagne les organisations dans la réduction des impacts environnementaux du numérique et forme à l'écoconception de services numériques.*
+
+## Pour commencer Damien, peux-tu nous expliquer ce qu'est le datawarehouse ?
+
+C'est un entrepôt de données : un endroit où une entreprise recueille beaucoup de données qui viennent de différentes sources.
+Ces données une fois collectées et mélangées, permettent d'en tirer une valeur analytique.
+
+Les organisations peuvent être amenées à utiliser une datawarehouse pour les aider à prendre des décisions ou parce
+qu'elles sont contraintes par un cadre légal de fournir des rapports.
+
+Par exemple, chez Auchan, nous devons produire une déclaration de performance extra-financière (DPEF) , nous croisons
+donc des données de ventes, RH, RSE, ...
+
+## Quel est le lien entre datawarehouse et écoconception de services numériques ?
+
+Le datawarehousing est un service numérique composé de logiciels, d'équipements utilisateurs, de centre de données, d'équipements réseau. Bien souvent, il y a plusieurs applications, car plusieurs domaines métiers,
+qu'il faut concevoir, développer et héberger.
+Aussi, dans un datawarehouse il y a plusieurs étages : un premier pour la collecte, un deuxième où on normalise la
+donnée, un troisième où on transforme la donnée en valeur et un dernier qui permet de visualiser.
+Ces applications répondent a un ou plusieurs actes métiers qui doivent être écoconçus. 
+
+## À quoi faut-il penser pour les écoconcevoir ?
+
+### Questionner le besoin
+
+Le datawarehouse produit des reporting, des KPIs ... qui vont être utilisés par des gens. Il est important de
+questionner le besoin. Comme pour tous les projets informatiques, il faut donc s'assurer que ce qui est produit répond à
+un réel besoin utilisateur.
+
+Bien souvent, je constate lors dans mes missions, que ce qui est produit n'est pas utile pour les équipes. Soit parce que dès le départ le projet est mal cadré, soit parce que le projet a pris trop de temps et l'information n'est plus nécessaire. Parfois, on produit des rapports journaliers alors qu'un rapport hebdomadaire aurait suffi.
+
+### Correctement requêter
+
+Avant il fallait réfléchir à la bonne configuration des serveurs, mais depuis qu'on a des environnements cloud ou du On-Premise on n'a plus de contrainte et donc on se pose moins de question. C'est ainsi plus facile, techniquement possible et économiquement viable, de manipuler des téraoctets de données. Ce qui a pour effet de consommer beaucoup de RAM (mémoire vive ou mémoire à court terme) et de CPU (capacité de calcul).
+
+De manière générale, je constate que les bonnes sources d'information sont récupérées dans le datawarehouse.  
+En revanche, régulièrement je vois des requêtes récupérant une grosse quantité de données pour ensuite les filtrer et/ou
+les transformer en dehors de la requête : directement dans le code du programme sans utiliser le moteur de requêtage.
+Ceci charge toutes les données et entraine donc une grosse montée en RAM. Le CPU est fortement utilisé également. Ces lourds traitements peuvent être évités en exploitant les capacités du serveur de base de données ; qui est prévu pour cela.
+
+
+## Comment éviter la dérive ?
+
+**Un projet de datawarehousing, n'est pas qu'un projet technique, il faut intégrer dans l'équipe, et dès le début, une
+personne responsable de l’expérience utilisateur.** Son rôle sera de comprendre ce que vivent les utilisateurs (via des interviews, de l'observation par exemple) et d'identifier la problématique à laquelle il faut répondre. Se contenter de demander quel est le besoin des utilisateurs peut mener à un projet qui finalement ne sera pas utile.
+Si le projet est terminé, ce qui a été produit lui doit continuer à vivre. Il faut donc penser à mettre en place des points de contrôle après la mise en production, pour s'assurer de l'utilité réelle des évolutions fonctionnelles. Vous pouvez vous appuyer sur les équipes support de l'utilisation du datawarehouse. Quels sont les échanges qu'ils ont avec les utilisateurs? Sont-ils satisfaits ou non ? Vous pouvez également aller sur le terrain pour échanger et observer l'usage qui est fait ou encore envoyer une enquête de satisfaction à intervalle régulier.
+
+Un autre point clé est d’**avoir un spécialiste en modélisation de données et en requêtage et de le faire intervenir
+le plus tôt possible.** C'est un savoir qui se perd, car cela attire moins les développeurs et développeuses. Il est
+important d'entretenir cette compétence. Si ce profil n'existe pas dans votre équipe, rien que le fait de faire des
+revues de code peut déjà apporter des bénéfices. Dans une équipe agile, on peut, par exemple, ajouter à la Definition Of
+Done (DOD) un critère comme "les requêtes SQL ne font pas de produit cartésien" ou encore "la manipulation de données
+parait nominale". Finalement, on parle ici de qualité de code.
+
+Si vous souhaitez commencer
+une [démarche de réduction des impacts environnementaux de votre projet de datawarehousing](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/),
+découvrez notre offre de service et contactez-nous.
+
+Vous pouvez également vous appuyer sur le [référentiel Green IT : 74 bonnes pratiques clés pour un numérique plus responsable](https://club.greenit.fr/doc/2022-06-GREENIT-Referentiel_maturite-v3.pdf).

src/_pages/blog/article/ecoconception_web_exposition_celtique.md

@@ -1,7 +1,7 @@
 ---
 title: "Écoconception d'un site de contenu pour le Musée de Bretagne"
-description: "Retour d'expérience sur le site \"Celtique ? L'expo.\""
-date: 2022-11-01
+description: "Retour d'expérience sur le site « Celtique ? L'expo »."
+date: 2022-11-15
 tags:
   - écoconception
   - retour d'expérience
@@ -9,9 +9,14 @@ authors:
   - Anne Faubry
   - Aurélie Baton
   - Nicolas Doby
+  - Sarah Lemiale
+  - Manuel Moreau
+draft: false
+toc: true
 layout: article.njk
 ---
-En 2022, nous avons conçu et développé le site [Celtique ? L'expo](https://www.exposition-celtique.bzh) dans une
+
+En 2022, nous avons conçu et développé le site ["Celtique ? L'expo"](https://www.exposition-celtique.bzh) dans une
 démarche d’écoconception, afin d'accompagner l'exposition éponyme du Musée de Bretagne. L'écoconception étant un sujet
 récent, nous avons dû expérimenter et faire certains arbitrages pour trouver les meilleures solutions. Nous souhaitons
 partager ce retour d’expérience dans cet article et nous espérons que ce retour d'expérience pourra servir à :
@@ -141,16 +146,44 @@ notre méthode de compression des images voir : [https://www.exposition-celtiqu
 
 Les vidéos ont été incrustées en HTML5. Cela permet de ne pas avoir à télécharger un nouveau lecteur réduisant fortement le nombre de requêtes.
 
+### Graphisme
+
+**En écoconception de services numériques :** Les chartes graphiques des organisations sont rarement pensées pour le
+web, et encore moins pour la sobriété et l'accessibilité. Elles présentent souvent des logos non adaptés au mobile, des
+couleurs au contraste insuffisant, des typographies personnalisées aux nombreuses variations qui viennent alourdir
+le site…
+Le préjugé selon lequel un site appliquant une démarche d'écoconception sera laid ou austère a encore la peau dure. Il
+existe pourtant différentes astuces ([liste d'exemples disponible ici](https://eco-conception.designersethiques.org/guide/fr/content/10-ressources.html)) pour créer un site avenant et différenciant tout
+en étant sobre.
+
+**Problèmes rencontrés :** Le site Celtique ? devait être immersif, donner envie de lire le contenu, mettre en
+avant les collections, mais sans alourdir inutilement les pages. Les éléments de charte partagés, conçus pour
+l'exposition physique, s'adaptaient mal à un contexte web (problèmes de lisibilité, poids des médias…).
+
+**Solutions :** Il existe plusieurs recours en écoconception pour apporter du dynamisme et de l'identité
+sans surpoids : utiliser la couleur, recourir à des formes SVG, créer des glyphes, faire varier les formes.
+- Ainsi nous avons repris les couleurs marquées de l'exposition (turquoise, orange, rose vif…) en les modifiant parfois légèrement pour s'assurer que les contrastes étaient accessibles.
+- Nous avons utilisé les triskells créés pour l'exposition en filigrane : en format SVG, ils ne pesaient chacun que 2 à 5 Ko.
+- Nous avons créé de nouvelles formes SVG pour casser le côté austère et apporter de la fantaisie : des vagues, des blobs (voir forme orange ci-dessous)...
+- Le tiret orange en vague devant le titre a été intégré en glyphe (voir ci-dessous).
+
+![Illustration du tiret orange devant un titre, et de différentes formes](/blog_images/articles/ecoconception_web_exposition_celtique/image-6.jpg)
+
+- Enfin la feuille de styles (CSS) permet de faire de nombreuses variations sans recourir à des surcouches. Par
+exemple jouer sur les arrondis, les contours, les ombres…(voir exemple du sommaire ci-dessous)
+
+![Sommaire montrant des arrondis réalisés en CSS](/blog_images/articles/ecoconception_web_exposition_celtique/image-7.jpg)
+
 ### Police
 
 **En écoconception de services numériques :** Même si les polices ne sont pas l'élément le plus impactant, elles contribuent à accroître
 le poids de la page et les transferts nécessaires à leur téléchargement. En utilisant des polices
 standards, pré-installées sur l’ordinateur on économise donc de la bande passante tout en accélérant l’affichage de la page.
 
-**Problèmes rencontrés :** Comme de nombreux évènement culturels, l’exposition “Celtique ?” a une forte identité
-et la typographie choisie pour l’exposition physique est très marquée et rappelle le caractère celtique. Cependant, cette
-typographie n’est pas utile pour le texte de la page et télécharger une police de caractère simplement pour appliquer à un
-titre n’est pas un choix pertinent.
+**Problèmes rencontrés :** Comme de nombreux évènement culturels, l’exposition "Celtique ?" a une forte identité
+et la typographie choisie pour l’exposition physique est très marquée et rappelle le caractère celtique. La typographie
+créée pour l'exposition "Celtique ?" n'était pas accessible et alourdissait le site (93 Ko par variation de police qui
+seront téléchargés par tous les utilisateurs lors de leur première visite).
 
 **Solutions :** Pour répondre à l’objectif d'écoconception tout en gardant l’identité de l’exposition, nous avons utilisé la
 police **Arial** pour le contenu des pages (titres, sous-titres, texte), mais nous avons choisi une **image SVG** pour conserver
@@ -210,3 +243,122 @@ Ce changement a induit de former les équipes non-techniques sur ces aspects tec
 
 Une fois les modifications réalisées, les équipes techniques peuvent générer et re-déployer une version de production.
 
+## Le retour d'expérience du musée de Bretagne
+
+L'idée de développer un site web en complément d'une exposition temporaire n'est pas nouvelle pour le Musée de Bretagne
+aux Champs Libres. Plusieurs expositions présentées depuis 2006 ont donné lieu à la création de mini-sites dédiés, sans
+compter les projets menés avec des partenaires. L'objectif d'alors est double : promotionnel et documentaire. La mise en
+ligne du portail des collections du musée en 2017 a également permis d'affirmer l'engagement du musée vers une mise à
+disposition croissante de ressources culturelles en ligne, et cela avec une démarche volontariste d'ouverture des
+contenus, dans la philosophie de l'open content portée notamment par Wikimédia. **Considérant le développement d'un site
+portail des Champs Libres et la mise en ligne de parcours thématiques sur le portail des collections, le musée de
+Bretagne ne s'était plus engagé dans la création d'un véritable site dédié depuis 2012.**
+
+### Les motivations du projet
+
+<i>Pourquoi avoir choisi de s'engager dans un nouveau projet de site web dédié à l'exposition Celtique ?[[1]](#ref-1) avec une
+ambition écoresponsable ?</i>
+
+Le contexte "global" d'abord. **La crise sanitaire et ses conséquences sur les établissements culturels (fermeture,
+ouverture partielle…) ont amené ceux-ci à se poser la question du renforcement de leur présence en ligne**, pour "garder
+le lien" avec leur public. Le musée de Bretagne souhaitait aussi expérimenter des liens entre le in situ et le online,
+le visiteur de l'exposition pouvant ouvrir des fenêtres "numériques" au cours de sa visite. Néanmoins, force est de
+constater la difficulté à obtenir des données stabilisées sur les véritables bénéfices/coûts (temps investi, notoriété,
+impacts sur la fréquentation insitu) de tels projets pour les établissements concernés.
+
+La seconde motivation est liée à la **stratégie globale de l'établissement**, celle des Champs Libres comme celle du Musée
+de Bretagne. S'inscrivant dans la dynamique de la mise en ligne du portail des collections en 2017, l'amplification des
+projets de diffusion numérique reste un enjeu fort porté par le musée[[2]](#ref-1). Dans le même temps, la réflexion en cours aux
+Champs Libres vers un nouvel écosystème web, avec comme orientation principale **"une stratégie pour un numérique
+soutenable"**, prend de l'ampleur. Le projet web Celtique ? s'oriente alors vers une ambition d'écoresponsabilité plus
+marquée. L'idée est d'avoir un projet pilote sur lequel le musée peut s'appuyer, voire réutiliser des briques, pour des
+projets à venir. Pour autant, il ne s'agit pas de systématiser, voire d'industrialiser, la production de site à chaque
+exposition. L'équipe du musée convient que l'opportunité d'une production web doit être questionnée à chaque fois au
+même titre que les autres composantes du projet : médiation, programmation, édition…
+
+**Le Musée de Bretagne s'engage donc dans ce projet avec l'approche d'une démarche quasi-innovante car encore peu
+expérimentée et documentée jusqu'alors.**
+
+<span id="ref-1">[1] Présentée au musée de Bretagne du 17 mars au 4 décembre 2022</span>  
+<span id="ref-2">[2] Inscrit dans son projet scientifique et culturel depuis 2015</span>
+
+### Une organisation dédiée
+
+Pour répondre aux enjeux précisés en amont, le choix retenu a été celui d'un **co-pilotage interne innovation/production**. L'expertise web du musée se situe du côté du chargé de mission prospective et innovation, qui se trouve également
+être le référent musée au sein du groupe projet écosystème web des Champs Libres. Côté pôle production, la cellule
+production des expositions se voit légitimement attribuer le co-pilotage du projet (via la cheffe de projet de
+l'exposition, puis la chargée de productions audiovisuelles), par sa capacité à faire le lien avec les contenus et à
+organiser la production en cohérence, de calendrier et de ressources, avec les autres composantes du projet
+d'exposition.
+
+### L'adaptation continue du projet
+
+Le projet web Celtique ? s'inscrit, dès son amorce, dans un plan de charge contraint. Ayant à l'esprit la règle du
+"moyen constant", le projet va progressivement évoluer dans ses intentions. D'un projet qui devait permettre l'accès à
+des ressources complémentaires, voire inédites (qui demande un surcroît de production et de coordination éditoriale), il
+devient un espace "relai" de l'exposition où l'on retrouve les ressources présentées dans une organisation plus propice
+à la consultation en ligne en amont ou à la sortie de sa visite.
+
+**L'enjeux d'un site le plus écoresponsable possible dans un budget contraint a également amené l'équipe du musée à revoir
+certaines orientations liées à l'aspect interactif et l'attractivité visuelle du site, ainsi que sur l'utilisation
+raisonnée des médias.** L'un des enseignements retenus par les équipes du musée est alors de considérer qu'un site plus
+écoresponsable n'en n'est pas moins coûteux qu'un site classique, voire un peu plus. Mais il s'agit ici de penser à
+plus long terme : un projet moins coûteux pour l'environnement, avec des briques réutilisables qui en assurent une
+certaine reproductibilité…
+
+Ces adaptations ont pu être intégrées de manière assez fluide grâce à **l'agilité et la régularité des échanges entre le
+prestataire et les équipes du musée, fonctionnant sur le principe de l'itération**. Une méthodologie nécessaire dans le
+cadre de tel projet.
+
+### Quelques questions spécifiques soulevées au cours de la mise en œuvre de ce projet
+
+#### Sur quelle base fixe-t-on le niveau d'écoresponsabilité ?
+
+Pour s’engager dans un projet écoresponsable, il importe de se fixer des objectifs chiffrés, et pour **cela il faut des
+indicateurs précis à atteindre**. Aujourd’hui, ces données sont encore difficiles à trouver. Pour le musée de Bretagne,
+s'engager dans le projet web Celtique ? visait donc aussi à capitaliser sur un retour d'expérience, et agréger des
+données possiblement réutilisables sur des projets futurs, tout en s'appuyant sur l'expertise d'un prestataire
+expérimenté et soucieux de partager ces connaissances notamment
+ici : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/)
+
+#### À qui destine-t-on cette offre ?
+
+Répondre clairement à cette question avant de s'engager dans le projet permet de mieux définir les critères d'arbitrage
+en cours de réalisation. **Un site écoresponsable est surtout un site qui répond à ses objectifs initiaux, sans éléments
+superficiels ou autre effet "waouh!"**. Dans le cas présent, le site web remplit sa mission d’ouverture et de liens vers
+des contenus complémentaires sans toutefois proposer sur le site beaucoup plus de ressources que celles de l’exposition.
+Il est à destination de personnes qui ne pourraient peut-être pas visiter l'exposition mais souhaitent pouvoir
+approfondir le sujet, sans pour autant devenir expert.
+
+#### À quel niveau peut-on se connecter aux ressources présentes chez nos partenaires ?
+
+Proposer un écosystème documentaire enrichi est certainement l'ambition de la plupart des sites web d'exposition. Pour
+autant, la fluidité du parcours du visiteur ne doit jamais être affectée par le souhait d'une trop grande serendipité
+des contenus. En somme, le visiteur doit pouvoir flâner sans jamais se perdre. Les cheminements entre les pages ont été
+mis en évidence et testés pour viser cet objectif (voir la partie [Navigation](#navigation) plus haut). **De même, la valeur
+écoresponsable d'un site peut être réduite si celui-ci propose des renvois trop systématiques vers des univers web
+éloignés de ces enjeux.** C'est ainsi que le musée de Bretagne, en s'associant à Bécédia, a choisi un partenaire culturel
+sensible à ces enjeux.
+
+### Perspectives
+
+L'ensemble des enseignements recueillis lors de ce projet, tant du point de vue technique que méthodologique, vient
+aujourd'hui nourrir les évolutions en cours de notre écosystème web.
+
+L'un des prochains chantiers est celui de la refonte de notre portail des collections en ligne. Le cahier des charges en
+cours de rédaction s'inspire déjà en partie des leçons retenues pour viser le maximum d'écoresponsabilité. L'enjeu est
+élevé puisqu'il concerne une base de données qui comporte aujourd'hui 350 000 notices et images associées, avec le souci
+d'équilibrer le projet entre sobriété du design et qualité des contenus diffusés.
+
+## Notre façon de collaborer
+
+Tout au long du projet, nous avons travaillé de manière itérative et régulière entre l’équipe de conception du site et
+l’équipe du Musée de Bretagne pour trouver les meilleurs compromis. Cela est passé par des points hebdomadaires de
+revue des maquettes, des échanges de mails et l'utilisation de [Figma](https://www.figma.com/). Cet outil a permis au
+Musée de Bretagne et au développeur de commenter au fur et à mesure les interfaces en cours de réalisation pour partager
+les textes définitifs, les comportements interactifs ou encore les hyperliens de destination sans se surcharger d'emails.
+
+Les limites de cette démarche d'un point de vue écoconception sont le manque de sobriété de ces outils
+(visioconférences, Figma…). Idéalement, l'écoconception consisterait aussi à limiter l'impact environnemental pendant
+la co-création. Si [PenPot](https://penpot.app/) semble être une alternative Open Source intéressante à Figma, nous n'avons pas trouvé de
+façon plus efficiente de collaborer sobrement.

src/_pages/blog/article/exemple_it_for_green_boussole_pluss.md

@@ -0,0 +1,58 @@
+---
+title: Le numérique au service de la production locale, utile, solidaire et soutenable
+description : Le numérique peut soutenir des projets à impacts positifs pour l'environnement et la société. La boussole PLUSS en est un exemple, elle permet d'autoévaluer ses projets pour une production plus locale, utile, solidaire et soutanable. 
+date: 2023-03-27
+tags:
+  - IT for green
+  - écoconception
+  - open source
+authors:
+  - Margaux Escande
+draft: true
+layout: article.njk
+---
+
+*Cet article fait suite à l'interview de Olivia Ruel-Mailfert, Pascal Desreumaux Apes et Melia Deplanque. L'APES a soutenu le projet de l'association les Saprophytes de concevoir et mettre à disposition une boussole pour autoévaluer ses projets au regard de la production local, utile, solidaire et soutenable.*
+
+## Pouvez-vous commencer par une présentation des Saprohytes ? ##
+
+Nous sommes un collectif dans le Nord qui accompagne les collectivités dans la conception et l'autoconstruction d'espaces publics, nous sommes amenés à construire des espaces et des outils localement.
+
+Qu'est-ce qui vous a poussé à faire une boussole 'production locale, utile, solidaire et soutenable'
+
+Nous nous posions des questions sur le monde d'après. Nos échanges ont abouti à une idée, celle de travailler sur la production locale pour qu'elle soit utile, solidaire et soutenable.
+
+Il nous a semblé pertinent de commencer par la construction d'un référentiel pour aider les projets à s'autoévaluer. Nous avons identifiés 10 catégories.
+
+Ce référentiel a été présenté à plusieurs personnes. Nous avions d'abord imaginé garder une version très manuelle. Cet outil a été reconnue comme étant utile pour d'autres, nous avons obtenus un financement de la région. Ainsi, aujourd'hui, il existe une version numérique.
+
+Aujourd'hui, chaque projet peut s'autoévaluer sur les 10 catégories. Nous avons déterminés des questions pour aider à l'évaluation, mais les projets peuvent s'approprier la boussole et modifier les questions pour qu'elles soient plus adaptées. Ainsi, ce n'est pas un outil qui permet de se comparer entre structure, mais plutôt d'évaluer sa structure dans le temps.
+
+Lors de ce projet, une vigilance a été apportée au respect des bonnes pratiques d'écoconception et d'accessibilité. Qu'en avez vous retenu ?
+
+Melia : Au début, je pensais que nous devrions être vigilant au stockage des données. Finalement, j'ai compris que ce n'était pas le levier principal pour réduire les impacts environnementaux. Nous avons principalement été vigilant au bon fonctionnement de la boussole sur du matériel ancien.
+
+
+## Est-ce que cela vous a demandé un effort particulier ?##
+
+Pascal: Je n'ai pas eu la perception de travailler différemment. Cela s'est fait naturellement. Tout s'est fait avec une efficacité incroyable.
+
+Finalement en se posant les bonnes questions dès le cadrage et en réduisant le périmètre au maximum, la phase de développement a été réduite.
+
+## Le projet est sous licence Open Source, quelles ont été vos motivations à cela ? ##
+
+Par principe nous ne sommes que sur des logiciles libres, nous n'avons même pas réfléchi à le rendre propriétaire.
+Le fait de savoir que ça peut être réutilisé nous permet d'espérer une mutualisation et donc une réduction des impacts environnementaux.
+
+Par ailleurs, la boussole a vu le jour grâce à des fincements publics, donc autant éviter de multiplier les financements pour des projets similaires.
+
+## Si vous deviez donner un conseil à une organisation qui souhaite mettre en place un projet au service des communs et responsable, quel serait-il ? ##
+
+Melia : J'ai été amabassadrice sur le projet sans réellement savoir ce que cela impliquait. J'avais mal estimé le temps que cela me prendrait, mais j'ai aimé m'impliquer de bout en bout. La coconstruction du contenu a été essentielle. Il ne faut pas sous estimer le temps que cela peut prendre.
+
+Pascal : Sur ce projet, nous n'avons pas respecté une méthodologie à la lettre. Il me semble que l'essentiel c'est d'avancer pas à pas.
+
+Olivia : J'ai bien aimé le partenariat avec IT's on us, j'ai appris plein de choses sur le fond, notamment sur l'écoconception. Il me semble qu'il est important de trouver un partenaire avec qui on arrive à se dire les choses avec bienveillance.
+
+
+Le collectif IT's on us vous accompagne dans [la conception et la réalisation de vos projets à impacts positifs](https://www.itsonus.fr/nos_services/soutenir_developpement_durable/), de bout en bout. Nous veillons au respect des bonnes pratiques permettant de réduire les impacts sociaux et environnementaux négatifs. Parlons-en ! 

src/_pages/blog/article/guide_developpeuse-euse_lecteur_d_ecran.md

@@ -0,0 +1,131 @@
+---
+title: "Guide d'accessibilité pour développeur·euse web : débuter avec un lecteur d'écran sur une page web"
+description : Quelques configurations et commandes utiles à connaître pour quiconque souhaite se familiariser avec un lecteur d'écran 
+date: 2024-04-23
+tags:
+  - accessibilité
+authors:
+  - Rémi Doolaeghe
+draft: false
+layout: article.njk
+---
+
+En tant que développeur·euse web, quand on débute en accessibilité, on est rapidement confronté au besoin de pouvoir se plonger en condition réelle. Se mettre à la place de la personne qui a besoin d'un service accessible reste un bon moyen de mettre en place les bonnes conditions d'utilisabilité.
+
+Parmi le panel d'outils à connaître, le lecteur d'écran est une des solutions utilisées par les personnes en situation de handicap. Mais voilà, la prise en main de ce genre d'outil n'est pas des plus évidentes, et peut même parfois rebuter une personne motivée.
+
+Un lecteur d'écran est une application capable de restituer le contenu d'une page web (ou toute application d'ailleurs) via une voix synthétique, en s'appuyant sur la structure de la page, pour permettre à une personne en situation de handicap (majoritairement visuel, mais aussi moteur, auditif, cognitif...) de pouvoir comprendre comment l'information est organisée. L'outil permet également de fournir une aide pour interagir avec la page.
+
+Oui mais voilà : au premier abord, un lecteur d'écran semble produire un flot ininterrompu de paroles de façon incontrôlable, et  pourrait en rebuter plus d'un. Je suis passé par cette phase où le lecteur d'écran était une sorte de monstre métamorphe difficile à dompter. Et pourtant, il suffit de pas grand chose pour commencer à comprendre comment s'en servir basiquement, et faire déjà de belles avancées.
+
+Les quelques conseils qui vont suivre ne prennent que peu de temps à mettre en place, mais devraient déjà changer largement la façon dont vous utilisez le lecteur d'écran. Ce guide est loin d'être exhaustif, mais vous aurez quelques bases utiles pour son utilisation dans la vie quotidienne en tant que producteur de service numérique.
+
+Cet article se focalise sur NVDA qui est mon outil du quotidien. Il fait généralement partie des lecteurs recommandés, mais n'est pas le seul. Je vais sauter la phase d'installation qui ne devrait pas poser trop de problèmes, et me focaliser sur son utilisation. Je vais également essentiellement me concentrer sur l'utilisation de NVDA dans le cadre d'une page web, bien que l'outil soit capable de bien plus que ça.
+
+Vouloir tester une page web avec NVDA est une bonne chose. Mais lorsqu'on n'a pas l'habitude de s'en servir, la tâche peut se révéler ardue. Voici donc quelques conseils pour vous aider à rendre l'outil plus facile d'utilisation avant même de se lancer dans le grand bain.
+
+## Activer la mise en surbrillance du focus
+
+Quiconque a déjà lancé un lecteur d’écran sans y être habitué·e peut se retrouver rapidement perdu·e sans savoir exactement où le lecteur d’écran en est dans la page. Lorsqu’on n’a pas de handicap visuel, autant profiter des capacités supplémentaires de l’outil pour permettre de mieux s’y retrouver.
+
+Il est possible de configurer NVDA pour qu’il mette en exergue (via un encadrement coloré) différents types de focus. Ces options se trouvent dans les préférences de NVDA. Pour y accéder, lancez NVDA. Par défaut, il va se retrouver minimisé dans les applications masquées sur Windows (sur Mac, je ne saurais pas dire) :
+
+![Applications en tâche de fond](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-1.png)
+
+Applications en tâche de fond
+
+Cliquez sur l’icône NVDA, puis sur le menu **Préférences**, puis sur **Paramètres…**
+
+Dans la fenêtre qui s’ouvre, allez ensuite dans la section **Vision**, comme suit :
+
+![Fenêtre de configuration de NVDA pour l'activation des options de focus](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-2.png)
+
+Fenêtre de configuration de NVDA pour l’activation des options de focus
+
+Je recommande de cocher ces options, qui ont les effets suivants :
+
+- **Mettre en évidence le focus système** : NVDA ajoute une bordure en pointillé bleu autour de l’élément qui a actuellement le focus système. Dans le cadre de la navigation web, le focus système est le focus qui est généralement posé sur les éléments nativement focusable de la page (boutons, liens, éléments de formulaire…).
+- **Mettre en évidence l’objet navigateur** : NVDA ajoute une bordure rose autour de l’élément qui a actuellement le focus NVDA. Le focus NVDA se pose sur l’élément que NVDA est actuellement en train de vocaliser, ou celui sur lequel il s’est arrêté. Tout élément peut recevoir ce focus, et non uniquement les éléments focusables comme pour le focus système. La façon de déplacer le focus NVDA sera décrite plus tard dans l’article.
+- **Mettre en évidence le curseur du mode navigation** : NVDA ajoute une bordure jaune autour du première caractère du bloc ou partie de bloc qu’il est en train de vocaliser. Ce curseur peut être utile lorsque NVDA est en train de vocaliser un long paragraphe. Par défaut, NVDA ne lit pas tout le paragraphe d’un coup, mais va le découper en morceaux. Ce curseur indique le début du morceau qu’il est en train de vocaliser ou qui a le focus NVDA.
+
+Avec tous ces focus actif, outre le beau sapin de Noël que ça produit, vous avez maintenant une meilleure compréhension de l’endroit où se trouve le focus de NVDA.
+
+## Journal de lecture
+
+Le journal de lecture est une fenêtre complémentaire qui retranscrit tout ce que la restitution vocalise. Cet outil permet notamment de mieux comprendre ce qui est dit, et de garder une trace de ce qui s’est passé. C’est notamment pratique pour une personne pas encore habituée à la façon dont les éléments sont restitués à l’oral par le lecteur d’écran.
+
+A noter que l’exemple ci-dessous est un peu brouillon à cause de l’interférence avec l’outil de capture d’écran.
+
+![Démonstration de la visionneuse de parole sur une page de site e-commerce pour un casque audio](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-3.png)
+
+Démonstration de la visionneuse de parole sur une page de site e-commerce pour un casque audio
+
+Pour activer le journal de lecture, cliquez sur NVDA dans les applications masquées (comme pour l’ouverture des paramètres du paragraphe sur le focus), puis **Outils**, puis **Visionneuse de parole**.
+
+## Vitesse de vocalisation
+
+Une alternative au journal de vocalisation est de réduire la vitesse de la vocalisation. En effet, en jouant sur la vitesse de prononciation, notamment en la ralentissant, il est plus facile de comprendre ce qui est dit sans avoir à se reposer sur une retranscription écrite, qui peut ne pas être toujours pratique à utiliser dans certains contextes.
+
+Pour jouer sur la vitesse de la vocalisation, cliquez sur NVDA dans les applications masquées (comme précédemment), puis **Préférences**, puis **Paramètres**, puis **Parole**.
+
+![Fenêtre de configuration de NVDA pour la configuration de la vitesse de vocalisation](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-5.png)
+
+Une fois dans cette fenêtre, il ne reste plus qu'à jouer avec le slider correspondant à l'étiquette **Débit**.
+
+## Prendre le contrôle de la vocalisation
+
+Maintenant que vous êtes doté·e du bagage utile, il est temps de ne plus subir le lecteur d’écran.
+
+Par défaut, le lecteur d’écran commencera à vocaliser dès que le contexte change. Par exemple lorsque vous passez d’un onglet à un autre dans votre navigateur, ou que vous changez d’application au premier plan, le lecteur d’écran restituera vocalement ce qui se passe. Cela a pour conséquence qu’il pourrait vous donner l’impression de ne jamais vous laisser en paix. C’est ici qu’interviennent les deux premières commandes à connaître.
+
+### Pause/Lecture
+
+Pour mettre en pause une vocalisation en cours, un appui sur la touche **Shift** fera l’affaire. Cette touche agit comme un bouton pause d’une télécommande. Si vous rappuyez sur **Shift**, la vocalisation reprend exactement là où elle en était (même si elle était en plein milieu d’un mot).
+
+### Stop
+
+Pour interrompre définitivement une vocalisation en cours, il faudra presser la touche **Ctrl**. La différence avec la pause est qu’il est impossible de reprendre la vocalisation. Cette touche joue le rôle d’un stop. Il faudra ensuite utiliser les commandes de navigation pour relancer une vocalisation.
+
+Jusqu’ici, on aura appris à pouvoir ne pas subir la vocalisation en étant capable de la démarrer ou l’interrompre. Mais il manque encore la capacité de pouvoir naviguer activement vers les éléments désirés.
+
+## Naviguer avec le lecteur d’écran
+
+Avec simplement quelques touches supplémentaires, il devient possible de pouvoir se déplacer à la demande dans la page, de façon linéaire (en parcourant les éléments séquentiellement, les uns après les autres).
+
+Naturellement, il est possible de laisser le lecteur restituer toute la page, du début à la fin. Mais on se retrouve rapidement à manquer de finesse, surtout s’il faut systématiquement repartir du début de la page pour vocaliser un éléments spécifique qui se trouve en plein milieu du contenu. C’est ici qu’interviennent les quelques touches de navigation basique.
+
+### Touche NVDA
+
+Avant d’entrer dans le vif du sujet, il est nécessaire de connaître ce qu’on appelle les **touches NVDA.** Ces touches peuvent être configurées dans l’interface de NVDA dans **Préférences**, **Paramètres, Clavier**.
+
+![Fenêtre de paramètres pour configurer les touches NVDA du clavier](/blog_images/articles/guide_de_survie_lecteur_d_ecran/image-4.png)
+
+Fenêtre de paramètres pour configurer les touches NVDA du clavier
+
+Lors de l’appui sur une de ces touches, NVDA considère que vous appuyez sur une **touche NVDA.** Cela servira à exécuter certains raccourcis au clavier.
+
+Passons maintenant aux commandes concrètes pour naviguer activement dans la page.
+
+### Lire l’élément suivant
+
+Un appui sur la touche **flèche du bas** interrompra la vocalisation en cours (s’il y en a une), et déplacera le focus NVDA vers le prochain élément de la page. Cet élément n’est pas nécessairement activable. Il peut s’agir d’un paragraphe, par exemple. Cela peut être pratique pour faire du pas à pas dans la vocalisation.
+
+### Lire l’élément précédent
+
+Un appui sur la touche **flèche du haut** fera l’inverse, à savoir déplacera le focus vers l’élément précédent dans la page
+
+### Redémarrer la lecture de la page à partir du focus
+
+En combinant un appui sur une **touche NVDA** et la **flèche du bas**, la vocalisation reprend depuis l’élément qui a le focus. Il existe quelques subtilités par rapport à la touche pause/lecture **Shift**, mais ce n’est pas essentiel à connaître pour débuter. La vocalisation finira de restituer la page jusqu’à sa fin, et tant que vous ne l’interromprez pas.
+
+### Relire l’élément courant
+
+En appuyant sur une **touche NVDA** et la **flèche du haut**, le lecteur d’écran vocalise à nouveau l’élément qui détient actuellement le focus. Cela permet notamment de lui faire répéter ce qui est focalisé.
+
+## Conclusion
+
+Avec ces quelques configurations et touches, il vous sera désormais possible de vous familiariser avec les bases de NVDA. Bien qu’il reste le défi de bien comprendre ce qui est vocalisé (et qui peut parfois apparaître quelque peu cryptique quand on débute), vous serez maintenant en capacité d’être le pilote de votre lecteur d’écran plutôt que de le subir.
+
+Il existe bien d’autres commandes, mais celles-ci devraient pouvoir couvrir vos besoins essentiels en terme d’utilisation.
+
+Si vous souhaitez aller plus loin, la [documentation officielle de NVDA](https://www.nvda.fr/doc/userGuide.html) devrait répondre à toutes vos interrogations.

src/_pages/blog/article/impacts_envrionnementaux_du_numerique.md

@@ -6,11 +6,12 @@ date: 2022-11-21
 tags:
   - impacts environnementaux
   - écoconception
-  - numérique responsable
   - ACV
 authors:
   - Anthony Lecerf
+draft: false
 layout: article.njk
+toc: true
 ---
 Le numérique est au cœur de notre quotidien et bouleverse nos modes de vie et de travail. Il a également des effets
 négatifs involontaires, entre autres sur notre environnement, qu’il faut absolument chercher à réduire car le numérique
@@ -72,7 +73,7 @@ terminaux pour 1 serveur.**
 
 __Nota bene :__ les impacts des équipements réseaux n’ont pas pu se baser sur un nombre d’équipements et leur durée de vie
 car les opérateurs et équipementiers n’ont pas pu déterminer cette dernière. L’infrastructure réseau n’a pas été prise
-en compte car des données ont aussi manquer à ce niveau. Cela fait partie des limites de cette étude.
+en compte car des données ont aussi manqué à ce niveau. Cela fait partie des limites de cette étude.
 
 ## Principaux impacts environnementaux du numérique en France
 
@@ -118,7 +119,7 @@ uranium 235 soit la radioactivité générée par les besoins de 25 millions d
 ### Écotoxicité, eaux douces
 
 "Ces indicateurs suivent toute la chaîne d'impact depuis l'émission d'un composant chimique jusqu'à l'impact final sur
-l'homme et les écosystèmes. Cela comprend la modélisation de la distribution et du devenir dans l'environnement,
+l'Homme et les écosystèmes. Cela comprend la modélisation de la distribution et du devenir dans l'environnement,
 l'exposition des populations humaines et des écosystèmes, et les effets liés à la toxicité associés à l'exposition."
 
 La contribution du numérique en France à l’écotoxicité est de 263 milliards d’unités de toxicité pour des écosystèmes.
@@ -130,12 +131,20 @@ Trois impacts environnementaux, parmi bien d’autres, méritent d’être souli
 particules fines et la création d’ozone photochimique sont des effets négatifs significatifs du numérique : leur
 quantité est équivalente à ceux générés par un million d’habitants du monde.
 
-Définitions : Acidification : "L’acidification de l'air est liée aux émissions d'oxydes d'azote, d'oxydes de soufre,
+__Définitions :__
+
+- Acidification :
+"L’acidification de l'air est liée aux émissions d'oxydes d'azote, d'oxydes de soufre,
 d'ammoniac et d'acide chlorhydrique. Ces polluants se transforment en acides en présence d'humidité, et leurs retombées
-peuvent endommager les écosystèmes ainsi que les bâtiments."Émissions de particules fines : "La présence de particules
+peuvent endommager les écosystèmes ainsi que les bâtiments."
+
+- Émissions de particules fines :
+"La présence de particules
 fines de petit diamètre dans l'air - en particulier celles d'un diamètre inférieur à 10 microns - représente un problème
-de santé humaine, car leur inhalation peut provoquer des problèmes respiratoires et cardiovasculaires."Création d’ozone
-photochimique : "L'ozone troposphérique se forme dans la basse atmosphère à partir de composés organiques volatils
+de santé humaine, car leur inhalation peut provoquer des problèmes respiratoires et cardiovasculaires."
+
+- Création d’ozone photochimique :
+"L'ozone troposphérique se forme dans la basse atmosphère à partir de composés organiques volatils
 (COV) et d'oxydes d'azote résultant du rayonnement solaire. L'ozone est un oxydant très puissant connu pour avoir des
 effets sur la santé, car il pénètre facilement dans les voies respiratoires."
 
@@ -144,7 +153,7 @@ surreprésentation de la fin de vie liée aux données utilisées. Ce point a é
 pu être corrigé dans le temps de l’étude. Soyons conscient que le numérique contribue aussi fortement au stress
 hydrique. [L’étude iNum : impacts environnementaux du numérique en France](https://www.greenit.fr/impacts-environnementaux-du-numerique-en-france/) de [GreenIT.fr](https://www.greenit.fr/), également basé sur une méthode ACV,
 concluait que le numérique en France contribuait à la tension sur l’eau douce à hauteur de 559 millions de m³ d'eau
-douce soit 5 fois la consommation d’eau des Parisiens.
+douce soit 5 fois la consommation d’eau des Parisiens."
 
 ### Impacts du numérique en France par habitant
 
@@ -169,7 +178,7 @@ raisons :
   d’énergie motrice – produite à partir de moteurs à explosion et d’hydrocarbures, de ressources et d’intrants
   chimiques, et engendre beaucoup de déchets ;
 - la fabrication des équipements et infrastructures du numérique nécessite énormément d’énergie produite dans des pays
-  avec un mix énergétique très carbonée ainsi qu’une grande force motrice générée par des moteurs à explosion.
+  avec un mix énergétique très carboné ainsi qu’une grande force motrice générée par des moteurs à explosion.
 
 ### Poids des différents équipements dans l’empreinte environnementale du numérique français
 
@@ -196,8 +205,8 @@ impacts et les usages personnels contribuent de 42 à 63% des impacts.
 ## Recommandations et réponses de IT’s on us
 
 La fabrication est la principale source d'impacts pour l'environnement. Cela s’explique notamment par la quantité
-importante d’énergies fossiles nécessaire à leur production et à l'extraction des minerais. L’utilisation représente «
-seulement" 21 % de la contribution au changement climatique en raison du mix énergétique peu carboné de la France.
+importante d’énergies fossiles nécessaire à leur production et à l'extraction des minerais. L’utilisation représente
+"seulement" 21 % de la contribution au changement climatique en raison du mix énergétique peu carboné de la France.
 
 Les auteurs de l'étude recommandent donc d’allonger au maximum la durée de vie des équipements "à travers la durabilité
 des produits, le réemploi, le reconditionnement, l’économie de la fonctionnalité ou la réparation".
@@ -205,5 +214,9 @@ des produits, le réemploi, le reconditionnement, l’économie de la fonctionna
 Les membres du collectif IT’s on us [accompagnent les organisations](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/) et les aident à :
 - utiliser moins d’équipements numériques et à les faire durer plus longtemps grâce à la démarche Numérique Responsable.
 - écoconcevoir les services numériques en les dotant de couches applicatives fonctionnant sur de vieux équipements et
-- [changer de modèle économiques](https://www.itsonus.fr/nos_services/developper_modeles_durables/), quand elles appartiennent secteur du numérique, afin de sortir de la logique de volume
+- [changer de modèle économique](https://www.itsonus.fr/nos_services/developper_modeles_durables/), quand elles appartiennent secteur du numérique, afin de sortir de la logique de volume
   et corréler leurs intérêts économiques avec les intérêts socio-environnementaux.
+
+
+## Sources
+- [https://www.arcep.fr/uploads/tx_gspublication/etude-numerique-environnement-ademe-arcep-volet02_janv2022.pdf](https://www.arcep.fr/uploads/tx_gspublication/etude-numerique-environnement-ademe-arcep-volet02_janv2022.pdf)

src/_pages/blog/article/integration_video.md

@@ -0,0 +1,94 @@
+---
+title: Intégrer une vidéo sur une page Web
+description: Intégrer au mieux une vidéo sur une page Web en prenant en compte les aspects éco-conception, accessibilité et éthique.
+date: 2022-11-25
+tags:
+  - écoconception
+  - accessibilité
+  - éthique
+authors:
+  - Nicolas DOBY
+draft: true
+layout: article.njk
+---
+
+
+margaux.escande
+16:24
+donner un exemple de truc relou
+
+poser la problématique principale : environnemental / accessibilité numérique
+
+poser les sous problématique : Gafam
+
+l'usage des vidéos explose : tik tok ...
+
+expliquer ce qui peut être fait d'un point de vue métier / technique et à quel moment une vidéo fait sens
+
+## Introduction
+
+Chiffre du poids des vidéos
+
+Google / auto hébergement
+
+Bannir l'autoplay
+
+Rendre accessible
+
+Afficher la durée, le poids
+
+Encoder sur un format standard
+
+Limiter le poids, 720p max
+
+Exemple https://couleur-science.eu/ qui explique des phon
+
+## Conseils
+
+Pour un tuto technique, bannissez le format vidéo. Rien de plus frustrant de voir un tutoriel expliquant une technologie, un framework, .. sous forme de vidéo.
+La plupart du temps, le code source n'est pas disponible.
+
+Rien de mieux que de présenter un tutoriel avec des explications ponctuées d'exemples de code au format textuel !
+
+## Se passer de Google
+
+Indépendance face aux GAFAM,
+
+Vidéo peut être supprimée,
+
+le lecteur ajoute une surcouche non nécessaire
+
+Si vous avez besoin Peertube vs. lecteur HTML5
+
+https://www.youtube.com/watch?v=dQw4w9WgXcQ
+
+
+## Rendre une vidéo accessible
+
+Ajouter une transcription :
+```html
+<figure>
+  <video aria-describedby="transcription" preload="metadata" poster="/videos/video1_poster.jpg" width="620">
+    <source src="/videos/video1.mp4" type="video/mp4">
+    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. <a href="/videos/video1.mp4">un lien pour télécharger la vidéo</a>.</p>
+  </video>
+  <figcaption>
+    <details>
+      <summary>Afficher la transcription</summary>
+      <div id="transcription">
+        <p>
+          - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad commodi, dolorum incidunt laudantium, mollitia
+            nihil nisi obcaecati porro quaerat, quam quas quidem quis quos recusandae repellendus reprehenderit suscipit temporibus vitae?
+        </p>
+        <p>
+          - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum neque tempore? A ab animi dolorum ea eos, fuga, hic numquam
+          obcaecati perferendis reiciendis sapiente vero vitae voluptatem. Iusto, natus?
+        </p>
+      </div>
+    </details>
+  </figcaption>
+</figure>
+```
+
+
+

src/_pages/blog/draft.njk

@@ -0,0 +1,17 @@
+---
+layout: home.njk
+---
+<div class="main-content">
+  <h1>Articles en construction</h1>
+
+  {% set articlesList = collections.articles | onlyDraft %}
+  {% if articlesList.length > 0 %}
+  {% include "articlesList.njk" %}
+  {% else %}
+    <p>Tous les articles sont en ligne ! Retournez à <a href="/blog/">l'accueil</a> pour les consulter.</p>
+  {% endif %}
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>

src/_pages/blog/feed/feed.njk

@@ -8,13 +8,13 @@ permalink: /blog/feed/feed.xml
 	<subtitle>{{ metadata.description }}</subtitle>
 	<link href="{{ permalink | htmlBaseUrl(metadata.url) }}" rel="self"/>
 	<link href="{{ metadata.url | addPathPrefixToFullUrl }}"/>
-	<updated>{{ collections.articles | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
+	<updated>{{ collections.articles | filterDraft | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
 	<id>{{ metadata.url }}</id>
 	<author>
 		<name>{{ metadata.author.name }}</name>
 		<email>{{ metadata.author.email }}</email>
 	</author>
-	{%- for article in collections.articles | reverse %}
+	{%- for article in collections.articles | filterDraft | reverse %}
 	{% set absolutePostUrl %}{{ article.url | htmlBaseUrl(metadata.url) }}{% endset %}
 	<entry>
 		<title>{{ article.data.title }}</title>

src/_pages/blog/feed/json.njk

@@ -14,7 +14,7 @@ permalink: /blog/feed/feed.json
     "url": "{{ metadata.author.url }}"
   },
   "items": [
-    {%- for article in collections.articles | reverse %}
+    {%- for article in collections.articles | filterDraft | reverse %}
     {%- set absoluteArticleUrl = article.url | htmlBaseUrl(metadata.url) %}
     {
       "id": "{{ absoluteArticleUrl }}",

src/_pages/blog/index.njk

@@ -10,7 +10,8 @@ eleventyNavigation:
   <nav>
     {% include "tagslist.njk" %}
   </nav>
-  {% set articlesList = collections.articles | head(-5) %}
+  {% set articlesList = collections.articles | filterDraft | head(-6) %}
+  {% set showMore = true %}
   {% include "articlesList.njk" %}
 </div>
 <aside class="right-side">

src/_pages/blog/tags.njk

@@ -17,7 +17,7 @@ permalink: /blog/tags/{{ tag | slugify }}/
 <div class="main-content">
   <h1>#{{ tag }}</h1>
 
-  {% set articlesList = collections[ tag ] %}
+  {% set articlesList = collections[ tag ] | filterDraft %}
   {% include "articlesList.njk" %}
 </div>
 <aside class="right-side">

src/blog_assets/css/index.scss

@@ -15,6 +15,7 @@
   --color-green-2: #57c183;
 
   --background-color: #fff;
+  --background-color-toc: #F2F7F6;
 
   --text-color: rgba(0,0,10,.8);
   --text-color-sub: rgba(0,0,10,.55);;
@@ -22,6 +23,7 @@
   --text-color-tertiary: var(--color-green-2);
   --text-color-link: var(--color-green-1);
   --text-color-link-active: var(--color-green-1);
+  --text-color-toc: #1C4852;
 }
 
 /*@media (prefers-color-scheme: dark) {*/
@@ -55,6 +57,7 @@ body {
   font-family: var(--font-family);
   color: var(--text-color);
   background-color: var(--background-color);
+  scroll-behavior: smooth;
 }
 
 main {
@@ -68,11 +71,77 @@ main {
   width: 1200px;
 }
 
-.right-side {
+.left-side, .right-side {
   position: sticky;
   top: 1rem;
   align-self: flex-start;
-  width: 300px;
+}
+.left-side {
+  padding-right: 60px;
+  min-width: 360px;
+  max-width: 360px;
+}
+.right-side {
+  min-width: 300px;
+  max-width: 300px;
+}
+
+.table-of-contents {
+  background: var(--background-color-toc);
+  border-radius: 5px;
+  padding: 1.625rem 0.7rem;
+}
+
+.table-of-contents ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li ul {
+    margin-bottom: 1rem;
+  }
+
+  li {
+    line-height: 17px;
+    margin-bottom: 1rem;
+
+    a {
+      font-weight: bold;
+      font-size: 0.875rem;
+      color: var(--text-color-toc);
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+  li:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.table-of-contents > ul ul {
+  margin-top: 10px;
+}
+
+.table-of-contents > ul ul li {
+  margin: 0 0 0 0.7rem;
+  line-height: 17px;
+  a {
+    font-weight: normal;
+  }
+}
+
+.table-of-contents > ul ul li+li {
+
+}
+
+.table-of-contents > ul ul li+li,
+.table-of-contents > ul ul li:first-child {
+  margin-bottom: .5rem;
+}
+
+.right-side {
   padding-left: 60px;
 }
 
@@ -126,7 +195,6 @@ h2 {
   font-style: normal;
   font-weight: 700;
   letter-spacing: .02rem;
-  line-height: 1.7rem;
   margin: 3rem 0 2rem;
 }
 
@@ -209,7 +277,7 @@ figure img {
 
 figure figcaption {
   margin-top: 6px;
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
   color: var(--text-color-sub);
 }
 
@@ -240,12 +308,11 @@ figure figcaption {
 
 /*!* Posts list *!*/
 .post-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 3rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 2rem;
 }
 .post-list-item {
-  max-width: 430px;
   padding: 2rem;
   border-radius: 5px;
   box-shadow: 0 5px 10px rgba(0,0,0,0.3);
@@ -284,15 +351,17 @@ figure figcaption {
 }
 .post-tag a {
   color: var(--text-color);
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
+  font-weight: 700;
   text-decoration: none;
 }
 
 /* Tags list */
 .post-metadata {
   display: flex;
+  flex-direction: column;
   gap: .5em;
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
   color: var(--text-color-sub);
 }
 
@@ -306,30 +375,48 @@ h1 + .post-metadata {
 
 .post-metadata .post-metadata__header {
   flex-grow: 1;
-  font-size: 0.8125rem; /* 13px /16 */
+  font-size: 0.875rem;
   color: var(--text-color-sub);
 }
 .post-nav ul {
   display: flex;
+  gap: 1rem;
+  margin: 0;
   justify-content: space-around;
   list-style: none;
   padding: 0;
-  margin: 2rem 1rem 0 0;
-}
 
-/* Direct Links / Markdown Headers */
-.direct-link {
-  font-family: sans-serif;
+  a {
+    display: flex;
+    flex-direction: row;
     text-decoration: none;
-  font-style: normal;
-  margin-left: .1em;
-}
-a[href].direct-link {
-  color: transparent;
-}
-a[href].direct-link:focus,
-:hover > a[href].direct-link {
-  color: var(--color-gray-50);
+    align-items: center;
+    padding: 1.5rem;
+    color: var(--text-color);
+    height: 100%;
+  }
+  .icon {
+    font-size: 36px;
+  }
+  .previous, .next {
+    flex-basis: 50%;
+    background: var(--color-gray-20);
+    border-radius: 8px;
+
+    &:hover {
+      background: var(--color-gray-50);
+    }
+  }
+  .previous {
+    .icon {
+      margin-left: 2rem;
+    }
+  }
+  .next {
+    .icon {
+      margin-right: 2rem;
+    }
+  }
 }
 
 .main-footer {
@@ -382,6 +469,9 @@ a[href].direct-link:focus,
 .footer-center {
   flex: 0 60%;
   text-align: center;
+  > p {
+    margin-bottom: 12px;
+  }
 }
 
 /*
@@ -440,9 +530,15 @@ pre[class*="language-diff-"] {
     max-width: 100%;
   }
   .right-side {
+    position: relative;
     width: 100%;
-    padding-left: 0;
-    padding-top: 5rem;
+    padding: 5rem 0;
+  }
+  .left-side {
+    position: relative;
+    order: 2;
+    width: 100%;
+    padding-right: 0;
   }
   h1 + .post-metadata {
     flex-direction: column;