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,10 +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);
 
@@ -27,16 +33,25 @@ module.exports = function(eleventyConfig) {
   //eleventyConfig.addWatchTarget('./src/compiled-assets/main.js');
   //eleventyConfig.addWatchTarget('./src/compiled-assets/vendor.js');
 
-  // Copy src/compiled-assets to /assets
+  // Copy src/compiled-assets to /blog_assets
-  eleventyConfig.addPassthroughCopy({ 'src/compiled-assets': 'assets' });
+  eleventyConfig.addPassthroughCopy({ 'src/compiled-assets': 'blog_assets' });
   // Copy all images
-  eleventyConfig.addPassthroughCopy('src/images');
+  eleventyConfig.addPassthroughCopy('src/blog_images');
 
     // Add plugins
   eleventyConfig.addPlugin(pluginRss);
   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);
 
@@ -66,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) => {
+      (item.data.tags || []).forEach(tag => {
-      return a.localeCompare(b, undefined, {sensitivity: 'base'});
+        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", "post", "posts"].indexOf(tag) === -1);
+    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 => {
@@ -94,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

@@ -0,0 +1,31 @@
+<div class="post-list">
+{% for article in articlesList | reverse %}
+  <article class="post-list-item">
+      <header class="post-list-header">
+        <h2>
+          <a href="{{ article.url }}" class="post-list-link">{% if article.data.title %}{{ article.data.title }}{% else %}<code>{{ article.url }}</code>{% endif %}</a>
+        </h2>
+        <div class="post-metadata">
+          <div>
+            Le <time datetime="{{ article.data.date | htmlDateString }}">{{ article.data.date | readableDate }}</time> {{ article.data.authors | readableAuthors }}
+          </div>
+          <ul class="post-tags">
+            {%- for tag in article.data.tags | filterTagList %}
+              {%- set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
+              <li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
+            {%- endfor %}
+          </ul>
+        </div>
+      </header>
+      <p>{{ article.data.description }}</p>
+    <footer  class="post-list-footer">
+      <a href="{{ article.url }}">Lire la suite</a>
+    </footer>
+  </article>
+{% endfor %}
+{% if showMore %}
+  <div>
+    <a href="/blog/all_articles">Voir l'ensemble des articles</a>
+  </div>
+{% endif %}
+</div>

src/_components/postslist.njk

@@ -1,26 +0,0 @@
-<div class="post-list">
-{% for post in postslist | reverse %}
-  <article class="post-list-item">
-      <header class="post-list-header">
-        <h2>
-          <a href="{{ post.url }}" class="post-list-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
-        </h2>
-        <div class="post-metadata">
-          <div>
-            Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}
-          </div>
-          <ul >
-            {%- for tag in post.data.tags | filterTagList %}
-              {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-              <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
-            {%- endfor %}
-          </ul>
-        </div>
-      </header>
-      <p>{{ post.data.description }}</p>
-    <footer  class="post-list-footer">
-      <a href="{{ post.url }}">Lire la suite</a>
-    </footer>
-  </article>
-{% endfor %}
-</div>

src/_components/tagslist.njk

@@ -1,7 +1,7 @@
 <div class="title">Catégories</div>
 <ul class="tags">
   {% for tag in collections.all | getAllTags | filterTagList %}
-    {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+    {% set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
-    <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a></li>
+    <li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a></li>
   {% endfor %}
 </ul>

src/_data/metadata.json

@@ -1,6 +1,6 @@
 {
   "title": "Blog IT's on us",
-  "url": "https://blog.itsonus.fr/",
+  "url": "https://www.itsonus.fr/blog",
   "language": "fr",
   "description": "Blog traitant de numérique responsable"
 }

src/_layouts/article.njk

@@ -0,0 +1,57 @@
+---
+layout: blog.njk
+templateClass: tmpl-post
+---
+{%- if toc %}
+<aside class="left-side">
+  {{ content | toc | safe }}
+</aside>
+{%- endif %}
+<div class="main-content">
+  <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>
+    <ul class="post-tags article-tags">
+      {%- for tag in tags | filterTagList %}
+      {%- set tagUrl %}/blog/tags/{{ tag | slugify }}/{% endset %}
+      <li class="post-tag"><a href="{{ tagUrl }}">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
+      {%- endfor %}
+    </ul>
+  </div>
+
+  {{ content | safe }}
+
+  <hr>
+
+  {%- set articles = collections.articles | filterDraft %}
+  {%- if articles %}
+  {# these filters are locale-aware in 2.0.0-canary.14 #}
+  {%- set previousArticle = articles | getPreviousCollectionItem %}
+  {%- set nextArticle = articles | getNextCollectionItem %}
+  {%- if nextArticle or previousArticle %}
+    <nav class="post-nav">
+      <ul>
+        {%- 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 %}
+  {%- endif %}
+</div>
+<aside class="right-side">
+  {% include "tagslist.njk" %}
+  {% include "other_links.njk" %}
+</aside>

src/_layouts/blog.njk

@@ -6,17 +6,34 @@
   <title>{{ title or metadata.title }}</title>
   <meta name="description" content="{{ description or metadata.description }}">
   <meta name="generator" content="{{ eleventy.generator }}">
-  <link rel="stylesheet" href="/assets/main.css?{{ cacheBust.mainCss }}"/>
+  <link rel="stylesheet" href="/blog_assets/main.css?{{ cacheBust.mainCss }}"/>
-  <link rel="stylesheet" media="print" href="/assets/print.css?{{ cacheBust.printCss }}" />
+  <link rel="stylesheet" media="print" href="/blog_assets/print.css?{{ cacheBust.printCss }}" />
-  <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+  <link rel="alternate" href="/blog/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
-  <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
+  <link rel="alternate" href="/blog/feed/feed.json" type="application/json" title="{{ metadata.title }}">
-  <link rel="icon" href="/images/favicon.svg">
+  <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 %}#}
 </head>
 <body class="container">
   <header class="main-header">
     <div>
-      <a class="main-header-logo" href="/">
+      <a class="main-header-logo" href="/blog">
-        <img src="/images/logo.svg" alt="IT's on us" width="165" height="33">
+        <img src="/blog_images/logo.svg" alt="IT's on us" width="165" height="33">
         Blog
       </a>
     </div>
@@ -30,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>
@@ -40,7 +57,7 @@
         </a>
         </li>
         <li>
-        <a href="/feed/feed.xml" download>
+        <a href="/blog/feed/feed.xml" download>
           <svg width="32" height="32" viewBox="0 0 461.432 461.432" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-rss"><title id="title-rss">Accéder au flux RSS du blog</title><g fill="#fff"><path d="M125.896 398.928c0 33.683-27.308 60.999-61.022 60.999-33.684 0-61.006-27.316-61.006-60.999 0-33.729 27.322-61.038 61.006-61.038 33.714 0 61.022 27.308 61.022 61.038zM0 229.636c0 8.441 6.606 15.379 15.036 15.809 60.318 3.076 100.885 25.031 138.248 62.582 36.716 36.864 60.071 89.759 64.082 137.769.686 8.202 7.539 14.524 15.77 14.524h56.701c4.344 0 8.498-1.784 11.488-4.935a15.852 15.852 0 004.333-11.729c-8.074-158.152-130.669-278.332-289.013-286.23a15.846 15.846 0 00-11.709 4.344A15.848 15.848 0 000 173.247v56.389z"/><path d="M0 73.411c0 8.51 6.713 15.482 15.216 15.819 194.21 7.683 350.315 161.798 358.098 355.879.34 8.491 7.32 15.208 15.818 15.208h56.457c4.297 0 8.408-1.744 11.393-4.834a15.857 15.857 0 004.441-11.552C453.181 199.412 261.024 9.27 16.38 1.121A15.844 15.844 0 004.838 5.568 15.842 15.842 0 000 16.954v56.457z"/></g>
           </svg>
         </a>
@@ -48,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/_layouts/home.njk

@@ -1,5 +1,5 @@
 ---
-layout: base.njk
+layout: blog.njk
 templateClass: tmpl-home
 ---
 {{ content | safe }}

src/_layouts/post.njk

@@ -1,41 +0,0 @@
----
-layout: base.njk
-templateClass: tmpl-post
----
-<div class="main-content">
-  <h1>{{ title }}</h1>
-
-  <div class="post-metadata">
-    <div class="post-metadata__header">
-      Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
-    </div>
-    <ul>
-      {%- for tag in tags | filterTagList %}
-      {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-      <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
-      {%- endfor %}
-    </ul>
-  </div>
-
-  {{ content | safe }}
-
-  <hr>
-
-  {%- if collections.posts %}
-  {# these filters are locale-aware in 2.0.0-canary.14 #}
-  {%- set previousPost = collections.posts | getPreviousCollectionItem %}
-  {%- set nextPost = collections.posts | getNextCollectionItem %}
-  {%- if nextPost or previousPost %}
-    <nav class="post-nav">
-      <ul>
-        {%- if previousPost %}<li class="previous">Précédent : <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
-        {%- if nextPost %}<li class="next">Suivant : <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
-      </ul>
-    </nav>
-  {%- endif %}
-  {%- endif %}
-</div>
-<aside class="right-side">
-  {% include "tagslist.njk" %}
-  {% include "other_links.njk" %}
-</aside>

src/_pages/404.njk

@@ -1,18 +0,0 @@
----
-layout: home.njk
-permalink: 404.html
-eleventyExcludeFromCollections: true
----
-<div class="main-content">
-  <p>Cette page n'existe pas !</p>
-
-
-  <p>ous avez fait fausse route ¯\_(ツ)_/¯</p>
-
-  <p><a href="/">Aller à la page d’accueil</a></p>
-
-</div>
-<aside class="right-side">
-  {% include "tagslist.njk" %}
-  {% include "other_links.njk" %}
-</aside>

src/_pages/blog/all_articles.njk

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

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/article.json

@@ -1,5 +1,5 @@
 {
   "tags": [
-    "posts"
+    "articles"
   ]
 }

src/_pages/blog/article/benchmark_greenit_2023.md

@@ -0,0 +1,49 @@
+---
+title: "Benchmark 2023 : initier l'évaluation de l'empreinte environnementale de son organisation"
+description: "Évaluer l'empreinte environnementale de son organisation avec une analyse du cycle de vie simplifiée, en conformité avec les préconisations de la commission européenne."
+date: 2022-11-18
+tags:
+  - benchmark
+  - greenIT
+  - ACV
+authors:
+  - Margaux Escande
+draft: false
+layout: article.njk
+---
+À 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%).
+
+S'intéresser à seulement 11% du problème n'est pas suffisant.
+
+Il est donc important de suivre la recommandation de la Commission Européenne d'utiliser la méthode d'analyse du Cycle de Vie. En prenant en compte la phase de fabrication, d'utilisation et de fin de vie, et 16 critères environnementaux (pour respecter le Product Environnemental Footprint), vous vous assurez de ne pas avoir de transfert d'impacts et de mettre en œuvre des actions pertinentes.
+
+[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, 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 :
+
+- comprendre où se situent les impacts environnementaux de son système d'information
+- connaître sa maturité sur les 74 bonnes pratiques Green IT.
+- comparer son positionnement avec celui des aux organisations
+- identifier des actions pertinentes et prioritaires à mettre en œuvre
+- 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 ;
+- 1 000 000 d'équipements numériques (informatiques et télécoms) ;
+- 9 900 m² DC (salle informatique).
+
+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'à 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)
+
+Si vous souhaitez réaliser un accompagnement individuel et des recommandations détaillées, nous vous invitons à découvrir notre offre de [réduction des impacts environnementaux](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/)

src/_pages/blog/article/comment_choisir_erp_responsable.md

@@ -0,0 +1,119 @@
+---
+title: Comment choisir un ERP responsable ?
+description: Choisir un ERP responsable et être en conformité avec la loi de finance pour les petites et moyennes entreprises.
+date: 2022-11-17
+tags:
+  - choix de solution
+  - cadrage
+  - open source
+  - é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)
+
+## 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.
+
+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 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.
+
+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
+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.
+
+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.
+
+## 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.
+
+**Le service numérique est écoconçu** afin de réduire les impacts environnementaux :
+
+* le service fonctionne sur des vieux ordinateurs ;
+* les fonctionnalités sont utiles, utilisables et utilisées ;
+* les bonnes pratiques d'écoconception sont respectées. Vérifiez s'ils ont fait : une analyse du cycle de vie (ACV), une analyse de la maturité des 115 bonnes pratiques d'écoconception web ou une estimation des impacts avec EcoIndex.
+
+**L'ERP est accessible** à tous quelque soit son contexte d'utilisation :
+
+* le service numérique a une interface simple et une navigation possible au clavier ;
+* 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.
+
+**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 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 :
+
+* 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 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
+
+Nous avons constaté que les ERPs répondent assez peu aux critères d'écoconception et d'accessibilité.
+
+Cependant, notre choix s'est naturellement porté sur Tryton, pour plusieurs raisons :
+
+* L'opportunité de concevoir de façon responsable le module de location non existant à date
+* La possibilité de naviguer au clavier et d'ajuster l'interface pour répondre au geste métier
+* L'absence de frais d'utilisation de l'ERP et la liberté de choisir les partenaires (véritablement open source)
+* La possibilité d'utiliser le service sans être connectée au réseau internet
+
+
+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 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/).
+

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

@@ -0,0 +1,364 @@
+---
+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-15
+tags:
+  - écoconception
+  - retour d'expérience
+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
+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 à :
+* Illustrer ce qu'implique concrètement une démarche d'écoconception ;
+* Diffuser des solutions sobres répondant à certaines problématiques client ou utilisateur ;
+* Éviter à d'autres concepteurs de commettre les mêmes erreurs et de passer par les mêmes tâtonnements que nous dans leurs projets.
+
+## Contexte du projet
+
+### Objectifs du site
+
+Le [Musée de Bretagne](https://www.musee-bretagne.fr/) a lancé du 18 mars au 4 décembre 2022 l'exposition "Celtique ?", qui interroge l'identité celte de la Bretagne contemporaine. Pour accompagner cette exposition physique, le Musée de Bretagne a souhaité lancer un site internet répondant à deux objectifs principaux :
+* Rendre les contenus de l'exposition accessibles au plus grand nombre, notamment pour les personnes éloignées géographiquement ainsi qu'une fois l'exposition finie ;
+* Permettre aux visiteurs de poursuivre leur expérience en ligne via des ressources complémentaires.
+
+Le site reprend donc les contenus de l'exposition en les adaptant à un contexte web et en les enrichissant d'autres ressources disponibles en ligne.
+
+### Cahier des charges du site
+
+En cohérence avec ses valeurs de démocratisation de la culture et de rôle civique des institutions publiques, le cahier des charges émis imposait que le site soit :
+* accessible (le plus possible)
+* éco-conçu (le plus sobre possible)
+* open-source (utilisant des solutions libres et partageant son code source)
+* cookie-free (ne collectant aucune donnée personnelle des utilisateurs).
+
+### Équipe
+
+L'équipe ayant réalisé ce projet était composée de :
+* [Hélène Maître-Marchois](https://www.linkedin.com/in/h%C3%A9l%C3%A8ne-ma%C3%AEtre-marchois-56758259/) de [Fairness](https://fairness.coop/), interlocutrice commerciale
+* [Nicolas Doby](https://www.linkedin.com/in/nicolas-doby-a4a96b96/) de [IT's on Us](https://www.itsonus.fr/), développeur
+* [Aurélie Baton](https://www.linkedin.com/in/aureliebaton/) et [Anne Faubry](https://www.linkedin.com/in/anne-faubry-3b2b8390/), UX/UI Designers
+
+Côté Musée de Bretagne, les interlocuteurs privilégiés avec lesquels l'équipe de développement a co-créé le site final étaient :
+* [Manuel Moreau](https://www.linkedin.com/in/manuel-moreau-44b66214a/), Prospective et Innovation
+* [Sarah Lemiale](https://www.linkedin.com/in/sarah-lemiale/), Cheffe de projet d'exposition
+
+### Résultat
+
+La conception et le développement du site se sont déroulés de fin novembre 2021 à mars 2022. Le site a été publié le 13 juin 2022.
+
+**Les 15 pages de contenu du site sont toutes notées A ou B par ecoindex.** Le nombre moyen de requêtes est de 15, **le poids
+moyen des pages est de 658 Ko** et la taille moyenne du DOM est de 310. Le site se charge en 2,5 secondes avec une connexion
+3G moyenne. L’empreinte environnementale du parcours principal équivaut à 10 g équivalent CO₂ de gaz à effet de serre
+et 15 cl d’eau selon les mesures effectuées avec GreenIT Analysis.
+
+Retrouvez le détail des mesures d'impacts environnementaux effectuées et leurs explications sur la page [Écoconception](https://www.exposition-celtique.bzh/ecoconception/).
+
+L'écoconception de services numériques a permis de minimiser les impacts environnementaux du service web tout en
+améliorant la performance d'usage pour le visiteur du site.
+
+## Problématiques rencontrées
+
+Cet article vise avant tout à partager les problématiques de conception rencontrées ainsi que les solutions adoptées.
+
+### Navigation
+
+**En écoconception de services numériques :** L'un des ressorts principaux de l'écoconception consiste à fluidifier au maximum le parcours
+utilisateur. Une navigation complexe entraîne des allers-retours et des chargements de pages superflus.
+
+**Problèmes rencontrés :** L'arborescence initialement prévue correspondait à l'architecture de l'exposition et au
+parcours physique des visiteurs. Or, elle était beaucoup trop complexe pour une architecture de site web. Les tests menés
+nous ont en effet révélé que les utilisateurs ne parvenaient pas à savoir où ils se trouvaient sur le site ou à retrouver
+une page sur laquelle ils étaient allés auparavant.
+
+Par ailleurs le cahier des charges indiquait que le site devait répondre à deux usages de navigation distincts :
+- Navigation linéaire : lecture des contenus dans l'ordre chronologique, celui des chapitres
+- Navigation transverse : lecture des contenus selon les sujets abordés, en sautant des parties, dans le désordre
+
+**Solutions :** Les 4 niveaux de profondeur de l'arborescence ont été réduits à 3. Les longueurs de chaque partie ont été harmonisées afin de se retrouver avec 2 parties de 3 et 5 chapitres au lieu de 4 parties de 1 à 4 chapitres. Cela a nécessité des réécritures et des coupes dans le texte, choisies avec le Musée de Bretagne.
+Deux palettes de couleurs distinctes ont également été retenues pour aider les utilisateurs à identifier où ils se trouvaient.
+Dans les parties les plus riches, nous avons ajouté un sommaire sous l'introduction et un chemin de fer cliquable en haut de page, permettant des navigations transverses selon les centres d'intérêt de l'internaute. Des boutons "précédent" et "suivant" ont également été travaillés pour les usages de navigation plus linéaires.
+
+![Différentes navigations : chemin de fer cliquable, boutons précédent/suivant](/blog_images/articles/ecoconception_web_exposition_celtique/image_1.jpg "Différentes navigations : chemin de fer cliquable, boutons précédent/suivant")
+
+Ces modes de navigation devaient être également accessibles sur mobile. Le chemin de fer a dû être simplifié.
+
+__Nota bene :__ Certains utilisateurs, notamment les moins à l'aise avec le numérique, ne pensent pas nécessairement à cliquer sur le logo pour revenir à l'accueil. Il est important de prévoir une entrée "Accueil" dans le menu pour ces personnes.
+
+### Photos
+
+**En écoconception de services numériques :** En 2022, les images d'une page web représentent en moyenne plus
+de 1 Mo ([HTTP Archive](https://httparchive.org/reports/page-weight)). Or GreenIT.fr recommande de rester sous
+la barre de 1 Mo pour le poids d'une page.
+
+**Problèmes rencontrés :** Le site “Celtique ?” est un site de contenu, présentant des photos de collections de
+musées. Plusieurs pages intègrent une dizaine d'images de bonne qualité. Certains utilisateurs, comme des enseignants
+et des chercheurs, peuvent avoir besoin d'accéder aux images en haute définition. Certaines photos des œuvres transmises
+étaient d'excellente qualité à des fins de conservation, et pesaient à l'origine plus de 50 Mo.
+
+**Solutions :** Comme toujours en écoconception, il s'agit tout d'abord d'interroger le besoin. Ici, il est
+double : accompagner les textes explicatifs et s'immerger dans les collections. Certaines images superflues ont ainsi
+été écartées pour réduire leur nombre à 10 par page de contenu au maximum.
+
+Deuxièmement, nous nous sommes interrogés sur la définition nécessaire pour les images. Nous avons choisi de les
+afficher en taille moyenne pour la plupart (entre 300 et 800 pixels de large) avec une **option "Voir en résolution
+maximale"** pour accéder à la haute définition.
+
+![Figure suivi d'un lien pour voir la version haute résolution](/blog_images/articles/ecoconception_web_exposition_celtique/image_2.jpg "Figure suivi d'un lien pour voir la version haute résolution")
+
+Les photos ont été fortement optimisées. Ainsi, même en haute définition, les images ne font pas plus de 1024 pixels
+de large et conservent un poids inférieur à 2 Mo. Les images de taille moyenne font quant à elles généralement
+entre 50 et 200 Ko.
+
+Pour accéder à notre méthode de compression des
+images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
+
+Pour les images vectorielles, nous avons privilégié le format SVG qui est généralement plus léger que le JPEG,
+sauf pour les images vectorielles complexes telles que la "Carte des flux de populations et échanges économiques et
+culturels au haut Moyen  ge" qui était plus lourde au format SVG.
+
+Lorsque possible, certaines images vectorielles ont été remplacées par des glyphes : par exemple la flèche
+précédent / suivant est un caractère.
+
+### Vidéos
+
+**En écoconception de services numériques :** Les vidéos représentent environ 80% des données transférées sur
+internet. Gourmand en énergie, le streaming a des impacts environnementaux considérables : obsolescence accélérée du
+matériel, renouvellement des infrastructures générant un effet rebond, exigences élevées en stockage, transfert de
+données… Il s'agit de les réduire au maximum.
+
+**Problèmes rencontrés :** La vidéo est un média populaire, efficace en communication. Les expositions sont souvent présentées par une vidéo, généralement positionnées haut sur la page d'accueil pour inciter au visionnage. Plusieurs interviews et vidéos explicatives font également partie de l'exposition, pesant 200 Mo à 500 Mo chacune. Par ailleurs, le plugin Youtube, souvent utilisé pour incruster les vidéos dans la page pèse à lui seul 2,5 Mo et nécessite de nombreuses requêtes.
+
+**Solutions :** Certaines vidéos ont été placées plus bas sur les pages, voire en lien externe vers Youtube pour ne pas trop inciter à les visionner lorsqu’elles n’étaient pas essentielles à la compréhension.
+
+Elles ont été **compressées à 720p et fortement optimisées**, permettant souvent de diviser leur poids par 15. Pour accéder à
+notre méthode de compression des images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
+
+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. 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
+l’apparence de la typographie dans le titre de l’exposition.
+
+![Titre du site utilisant une typographie celtique](/blog_images/articles/ecoconception_web_exposition_celtique/image_3.jpg "Titre du site utilisant une typographie \"celtique\"")
+
+### Interactions
+
+**En écoconception de services numériques :** Certaines interactions et animations peuvent être coûteuses en termes de ressources car elles
+nécessitent dans certains cas l’implémentation de JavaScript ou de certaines propriétés CSS à éviter.
+
+**Problèmes rencontrés :**
+Pour rendre l’exposition interactive et accessible au plus grand nombre, le Musée de Bretagne avait prévu un test (quiz) pour que chacun puisse découvrir son “profil celte”. L’idée était donc de conserver ce questionnaire pour la version en ligne de l’exposition. Mais comment rendre un test suffisamment interactif tout en limitant l’utilisation de ressources ?
+
+Les questions du questionnaire étaient au départ au nombre de 12. Nous avions envisagé une barre de progression afin que l’utilisateur ait une indication visuelle de sa progression dans le questionnaire.
+
+**Solutions :**
+Après plusieurs tests utilisateurs sur les maquettes il est finalement devenu apparent qu’il y avait trop de questions. Nous
+avons donc proposé de passer à 9 questions au lieu de 12. Les tests utilisateurs ont été concluants et la barre de
+progression était finalement superflue. Nous avons finalement décidé d’éliminer la barre de progression ce qui
+nécessitait également moins de développement.
+
+Cependant, afin que l’utilisateur ait un retour clair avant validation, nous avons conservé un **simple décompte
+des réponses** en utilisant un simple code Javascript.
+
+![Décompte des réponses restantes](/blog_images/articles/ecoconception_web_exposition_celtique/image_4.jpg "Décompte des réponses restantes")
+
+### Page Écoconception
+
+**En écoconception de services numériques :** Une des bonnes pratiques de l’écoconception consiste à documenter la démarche pour faire
+avancer le sujet et partager l’expérience, mais aussi afin d’expliquer le contexte et les limites du projet.
+
+**Problèmes rencontrés :** Comme de nombreux projets entamant une démarche d’écoconception, il y a d’un côté,
+l’objectif à atteindre, et de l’autre, les limites auxquelles nous sommes confrontés. Nous avons pu mettre
+en place une grande partie des bonnes pratiques d’écoconception, mais certaines n’ont pas pu être mises en place
+pour le moment car elles touchent à l’écosystème plus global des Champs Libres (par exemple l’hébergement des
+vidéos sur une plateforme de type PeerTube ou les statistiques de fréquentation du site sur un outil tel que Matomo).
+
+**Solutions :** Plutôt que d’afficher un score EcoIndex en bas de page ou bien une estimation de l’empreinte
+environnementale, nous avons préféré (après discussion avec l’équipe du musée) documenter notre **intention
+d’écoconception dans une page** disponible dans le pied de page du site, au même titre que la déclaration d’accessibilité.
+
+![Bas de page contenant le lien vers la page écoconception](/blog_images/articles/ecoconception_web_exposition_celtique/image_5.jpg "Bas de page contenant le lien vers la page écoconception")
+
+### Techniques
+
+La particularité de ce projet est qu’il ne nécessite aucune modification graphique, aucun ajout de page ou de contenu. Seules des corrections textuelles mineures seront réalisées sur ce site. De ce fait, un générateur de site statique répond amplement au besoin. Ceci permettant de générer une seule fois les ressources statiques (HTML, CSS, JS) lors de l’installation contrairement à des sites dynamiques qui génèrent les pages à la volée, à chaque visite du site web. Ce choix soulage la charge serveur, le transformant en simple fournisseur de fichiers et non un calculateur récurrent.
+
+Le générateur de [sites statiques 11ty](https://www.11ty.dev/) a été retenu en utilisant pour la plupart des pages un format Markdown et un template global pour la mise en forme. Le format Markdown, étant lisible sans avoir de connaissance technique, il est aisé d’apporter des corrections sur le fond sans “casser” la forme.
+
+Au fur et à mesure des avancées des maquettes, il s’est avéré que chacune des pages étaient différentes. Le Markdown perdant son avantage d’être lisible, il a été décidé de passer sur un format Nunjunk ; permettant d’avoir plus de souplesse dans le développement.
+
+Ce changement a induit de former les équipes non-techniques sur ces aspects techniques :
+* l’architecture technique du projet : savoir à quel endroit se trouve les textes à modifier,
+* comment modifier des fichiers sources Nunjunk en respectant un format contraignant.
+
+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

@@ -0,0 +1,222 @@
+---
+title: "Impacts environnementaux du numérique en France"
+description: "Grâce à l’étude de l’ADEME et de l’ARCEP de janvier 2022, quantification et analyse des impacts
+environnementaux du numérique en France."
+date: 2022-11-21
+tags:
+  - impacts environnementaux
+  - écoconception
+  - 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
+contribue au dépassement de plusieurs limites planétaires, c’est-à-dire aux quantités d’impacts environnementaux
+au-dessus desquels nous déstabiliseront les équilibres fondamentaux de la planète.
+
+Rappelons que sur neuf limites planétaires, six ont désormais été dépassées : le changement climatique, l’érosion de la
+biodiversité, les perturbations globales du cycle de l’azote et du phosphore, les changements d'utilisation des sols,
+l'introduction de nouvelles substances (en 2022) et l’utilisation de l'eau douce (en 2022).
+
+## Principes d’évaluation environnementale
+
+Contrairement à ce que sous-entend l’univers sémantique du numérique ("cloud", dématérialisation, virtualisation...)
+**les services numériques ont une matérialité bien réelle** : des équipements et des infrastructures sont nécessaires
+pour
+exécuter les logiciels, naviguer sur les sites web et utiliser les applications.
+
+C’est bien cette matérialité qui engendre des impacts environnementaux. En effet, un logiciel n’a pas d’impacts
+environnementaux à proprement parler (et ne s’écoconçoit pas) alors que les éléments physiques d’un service numérique en
+ont.
+
+Pour quantifier et analyser ces impacts, il est important de prendre en compte plusieurs critères environnementaux car
+le numérique a bien plus d’effets négatifs que les seules émissions de gaz à effet de serre. Si l’analyse n’est pas
+multicritère, le risque que les solutions apportées transfèrent les impacts d’un critère vers un autre est réel.
+
+Il est également essentiel d’avoir une approche multi-étapes et systémique et de considérer l’ensemble des étapes du
+cycle de vie de tous les éléments physique sous-jacents à une unité fonctionnelle. On définit l’objet d’une étude par la
+fonction qu’il remplit afin de pouvoir comparer différentes solutions.
+
+C’est là tout l’intérêt de **la méthode holistique que représente l’analyse de cycle de vie (ACV)**.
+[Une évaluation environnementale](https://www.arcep.fr/uploads/tx_gspublication/etude-numerique-environnement-ademe-arcep-volet02_janv2022.pdf),
+basée sur la méthode ACV, pilotée par l’ADEME et l’ARCEP et publiée en janvier 2022, quantifie et analyse les impacts
+environnementaux du numérique en France au travers de l’unité fonctionnelle suivante :
+
+"Utiliser les équipements et systèmes basés en France liés aux équipements et infrastructures numériques sur un an"
+
+## Matérialité des équipements et infrastructures numériques en France
+
+Selon cette étude, cette unité fonctionnelle couvre l’utilisation de plus d’un milliard d’équipements utilisateurs
+(terminaux) et notamment :
+
+- plus de 120 millions de téléphones, dont 70 millions de smartphones ;
+- près de 25 millions de tablettes ;
+- près de 60 millions d’ordinateurs portables et 40 millions d’ordinateurs fixes ;
+- environ 40 millions d’écrans d’ordinateur et 60 millions de téléviseurs ;
+- plus de 20 millions d’imprimantes ;
+- environ 245 millions d’objets connectés.
+
+Elle implique également des équipements réseau et des centres informatiques, entre autres :
+
+- environ 30 millions d’abonnés (et donc de box internet) à des réseaux fixes ;
+- environs 95 millions d’abonnés à des réseaux mobiles, dont approximativement 20 millions pour des communications entre
+  machines ;
+- 1,5 million de serveurs ;
+- 15 millions de disques durs et SSD.
+
+**La matérialité du numérique est donc très fortement liée aux équipements des utilisateurs : il y a plus de 660
+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 manqué à ce niveau. Cela fait partie des limites de cette étude.
+
+## Principaux impacts environnementaux du numérique en France
+
+### Impact sur le changement climatique
+
+Il se définit comme suit : "Les gaz à effet de serre (GES) sont des composés gazeux qui absorbent le rayonnement
+infrarouge émis par la surface de la Terre. L'augmentation de leur concentration dans l'atmosphère terrestre contribue
+au réchauffement climatique."
+
+Il représente 16,9 milliards de tonnes équivalent CO₂ soit les émissions d’un parc de plus de 12 millions de véhicules
+parcourant plus de 12 000 km / an et émettant 112 g éq. CO₂ / km ou encore l’équivalent des émissions de plus de 2
+millions d’habitants du monde.
+
+### Épuisement des ressources abiotiques – éléments (minerais, métaux)
+
+La définition de cet impact est la suivante : "L'exploitation industrielle entraîne une diminution des ressources
+disponibles dont les réserves sont limitées. Cet indicateur évalue la quantité de ressources minérales et métalliques
+extraites de la nature comme s'il s'agissait d'antimoine".
+
+Le numérique en France contribue à l’épuisement des ressources abiotiques – éléments à hauteur de 948 tonnes équivalent
+antimoine, soit près de 19 000 milliards de tonnes de terre excavée, ou encore, selon l’étude, l’équivalent de la
+contribution de 15 millions d’habitants du monde.
+
+### Épuisement des ressources abiotiques – fossiles
+
+"L'indicateur représente la consommation d'énergie primaire provenant de différentes sources non renouvelables
+(pétrole, gaz naturel, etc.). Contrairement à ce que le nom indique, la consommation d’énergie primaire issue de
+l’uranium est également considérée. Les calculs sont basés sur le Pouvoir Calorifique Inférieur (PCI) des types
+d'énergie considérés, exprimé en MJ/kg. Par exemple, 1 kg de pétrole apporteront 41,87 MJ à l'indicateur considéré."
+
+Le numérique en France épuise ce type de ressource à hauteur de 796 milliards de mégajoules de ressources fossiles soit
+la contribution à l’épuisement de ressources fossiles de 12 millions d’habitants du monde.
+
+### Radiations ionisantes
+
+"Les radionucléides peuvent être libérés lors de plusieurs activités humaines. Lorsque les radionucléides se
+désintègrent, ils libèrent des rayonnements ionisants. L'exposition humaine aux rayonnements ionisants provoque des
+dommages à l'ADN, qui à leur tour peuvent conduire à divers types de cancer et de malformations congénitales."
+
+Le numérique en France contribue aux radiations ionisantes à la hauteur de 98 milliards de kilobecquerel équivalent
+uranium 235 soit la radioactivité générée par les besoins de 25 millions d’habitants du monde.
+
+### É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'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.
+Cela correspond à l’écotoxicité générée par 6 millions d’habitants du monde.
+
+### Autres impacts
+
+Trois impacts environnementaux, parmi bien d’autres, méritent d’être soulignés. L’acidification, les émissions de
+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'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
+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
+(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."
+
+__Nota bene :__ "L’indicateur d’épuisement de la ressource en eau \[a donné\] des résultats non cohérents du fait d’une
+surreprésentation de la fin de vie liée aux données utilisées. Ce point a été identifié \[par les auteurs\], mais n’a pas
+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."
+
+### Impacts du numérique en France par habitant
+
+L’impact annuel du numérique sur le changement climatique est de 235 kg éq. CO₂ par français, soit les émissions de gaz
+à effet de serre équivalentes à celles d’un trajet de 2 259 km en voiture.
+
+La production annuelle de déchets numériques est de 299 kg par habitant.
+
+Pour répondre à ses besoins numériques un Français génère une masse de matériaux déplacée considérable de 932 kg chaque
+année.
+
+## Source des impacts du numérique en France
+
+Par leur nombre les équipements des utilisateurs représentent 63 à 92% de ces impacts!
+
+À part pour les indicateurs épuisement des ressources – fossiles, radiations ionisantes et émissions de particules
+fines, auxquels l’utilisation de ces équipements, et donc la production d’électricité pour les alimenter, contribue le
+plus, **c’est la fabrication des équipements des utilisateurs qui concentre la majorité des impacts** et ce pour deux
+raisons :
+
+- ces équipements requièrent une quantité importante de métaux et de minerais, dont l’extraction demande beaucoup
+  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é 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
+
+Par leur nombre et leurs impacts unitaires importants, tant pour les fabriquer que pour les utiliser, les téléviseurs
+représentent 11 à 30% des impacts du numérique français. Ils participent particulièrement à l’épuisement des ressources
+– éléments.
+
+Viennent ensuite les ordinateurs portables et fixes, les smartphones, les box TV, les consoles de jeu vidéo, les
+imprimantes et les autres écrans qui par leur nombre et leurs impacts unitaires élevés expliquent 5 à 15% des impacts.
+
+Les objets connectés, peu impactants unitairement, mais très nombreux, contribuent pour la majorité des impacts, de 3 à
+6% de l’empreinte environnementale du numérique en France.
+
+### Réseau fixe VS réseau mobile
+
+Les impacts environnementaux des réseaux mobiles sont plus importants que ceux des réseaux fixes, par quantité de
+données transférées.
+
+### Usages personnels VS usages professionnels
+
+Les résultats de l’étude de l’ADEME et de l’ARCEP montrent que les usages professionnels contribuent de 37 à 48% des
+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.
+
+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".
+
+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 é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

@@ -1,14 +1,15 @@
 ---
 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-02
+date: 2022-11-25
 tags:
   - écoconception
   - accessibilité
   - éthique
 authors:
   - Nicolas DOBY
-layout: post.njk
+draft: true
+layout: article.njk
 ---
 
 

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/exemple.md

@@ -1,56 +0,0 @@
----
-title: Exemple d'article
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-date: 2022-10-14
-tags:
-  - ACV
-  - EFC
-  - écoconception
-authors:
-  - John Doe
-layout: post.njk
----
-
-## Introduction
-Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-
-![Un chaton](/images/blog/kitty_1.jpeg "Un chaton tout mignon 😍")
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-
-## Partie une
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-```diff-js
- // this is a command
- function myCommand() {
-+  let counter = 0;
--  let counter = 1;
-   counter++;
- }
-
- // Test with a line break above this line.
- console.log('Test');
-```
-
-## Partie deux
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-```js
-// this is a command
-function myCommand() {
-	let counter = 0;
-	counter++;
-}
-
-// Test with a line break above this line.
-console.log('Test');
-```
-
-## Conclusion
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.

src/_pages/blog/exemple_2.md

@@ -1,59 +0,0 @@
----
-title: Second exemple d'article
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-date: 2022-10-15
-tags:
-  - cryptographie
-authors:
-  - Alice
-  - Bob
-layout: post.njk
----
-
-## Introduction
-Les personnages Alice et Bob sont des figures classiques en cryptologie. Ces noms sont utilisés au lieu
-de « personne A » et « personne B » ; Alice et Bob cherchent dans la plupart des cas à communiquer de manière sécurisée.
-
-Ces noms ont été inventés par Ron Rivest, Adi Shamir et Leonard Adleman pour leur article de 1978 dans le Communications
-of the ACM qui présentait le cryptosystème RSA (le rapport technique de 1977 sur RSA n'utilisait pas encore ces noms)
-Rivest nie tout lien avec le film de 1969 intitulé Bob et Carole et Ted et Alice. Les personnages sont rapidement devenus
-populaires dans la communauté des cryptographes, entre autres après que leur « histoire » a été racontée lors d'un after-dinner
-speech de John Gordon lors d'une conférence à Zurich.
-
-D'autres prénoms sont utilisés pour décrire d'autres rôles, comme Oscar (l'adversaire, opponent en anglais) ou Eve (une « écouteuse » ou eavesdropper) ou Robert (le responsable, Roberto en espagnol). Ces personnages font souvent partie des démonstrations d'attaques et d'explications sur les protocoles. Selon la langue, on peut trouver d'autres prénoms (Bernard ou Carole en français, par exemple).
-## Partie une
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-```diff-js
- // this is a command
- function myCommand() {
-+  let counter = 0;
--  let counter = 1;
-   counter++;
- }
-
- // Test with a line break above this line.
- console.log('Test');
-```
-
-## Partie deux
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-```js
-// this is a command
-function myCommand() {
-	let counter = 0;
-	counter++;
-}
-
-// Test with a line break above this line.
-console.log('Test');
-```
-
-## Conclusion
-
-![Un chaton](/images/blog/kitty_2.jpeg)
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.

src/_pages/blog/exemple_3.md

@@ -1,51 +0,0 @@
----
-title: Troisième exemple d'article
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-date: 2022-10-17
-tags:
-  - accessibilité
-authors:
-  - John Murdock
-layout: post.njk
----
-
-## Introduction
-Leverage agile Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-## Partie une
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-```diff-js
- // this is a command
- function myCommand() {
-+  let counter = 0;
--  let counter = 1;
-   counter++;
- }
-
- // Test with a line break above this line.
- console.log('Test');
-```
-
-## Partie deux
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
-
-```js
-// this is a command
-function myCommand() {
-	let counter = 0;
-	counter++;
-}
-
-// Test with a line break above this line.
-console.log('Test');
-```
-
-## Conclusion
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.

src/_pages/blog/feed/feed.njk

@@ -1,6 +1,6 @@
 ---
 # Metadata comes from _data/metadata.json
-permalink: /feed/feed.xml
+permalink: /blog/feed/feed.xml
 ---
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.language }}">
@@ -8,20 +8,20 @@ permalink: /feed/feed.xml
 	<subtitle>{{ metadata.description }}</subtitle>
 	<link href="{{ permalink | htmlBaseUrl(metadata.url) }}" rel="self"/>
 	<link href="{{ metadata.url | addPathPrefixToFullUrl }}"/>
-	<updated>{{ collections.posts | 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 post in collections.posts | reverse %}
+	{%- for article in collections.articles | filterDraft | reverse %}
-	{% set absolutePostUrl %}{{ post.url | htmlBaseUrl(metadata.url) }}{% endset %}
+	{% set absolutePostUrl %}{{ article.url | htmlBaseUrl(metadata.url) }}{% endset %}
 	<entry>
-		<title>{{ post.data.title }}</title>
+		<title>{{ article.data.title }}</title>
 		<link href="{{ absolutePostUrl }}"/>
-		<updated>{{ post.date | dateToRfc3339 }}</updated>
+		<updated>{{ article.date | dateToRfc3339 }}</updated>
 		<id>{{ absolutePostUrl }}</id>
-		<content type="html">{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) }}</content>
+		<content type="html">{{ article.templateContent | transformWithHtmlBase(absolutePostUrl, article.url) }}</content>
 	</entry>
 	{%- endfor %}
 </feed>

src/_pages/blog/feed/json.njk

@@ -0,0 +1,29 @@
+---
+# Metadata comes from _data/metadata.json
+permalink: /blog/feed/feed.json
+---
+{
+  "version": "https://jsonfeed.org/version/1.1",
+  "title": "{{ metadata.title }}",
+  "language": "{{ metadata.language }}",
+  "home_page_url": "{{ metadata.url | addPathPrefixToFullUrl }}",
+  "feed_url": "{{ permalink | htmlBaseUrl(metadata.url) }}",
+  "description": "{{ metadata.description }}",
+  "author": {
+    "name": "{{ metadata.author.name }}",
+    "url": "{{ metadata.author.url }}"
+  },
+  "items": [
+    {%- for article in collections.articles | filterDraft | reverse %}
+    {%- set absoluteArticleUrl = article.url | htmlBaseUrl(metadata.url) %}
+    {
+      "id": "{{ absoluteArticleUrl }}",
+      "url": "{{ absoluteArticleUrl }}",
+      "title": "{{ article.data.title }}",
+      "content_html": {% if article.templateContent %}{{ article.templateContent | transformWithHtmlBase(absoluteArticleUrl, article.url) | dump | safe }}{% else %}""{% endif %},
+      "date_published": "{{ article.date | dateToRfc3339 }}"
+    }
+    {% if not loop.last %},{% endif %}
+    {%- endfor %}
+  ]
+}

src/_pages/blog/index.njk

@@ -5,15 +5,14 @@ eleventyNavigation:
   order: 1
 ---
 <div class="main-content">
-  {% set maxPosts = collections.posts.length | min(5) %}
   <h1 class="main-title">Blog numérique responsable</h1>
   <p class="sub-title">par le collectif IT's on us</p>
   <nav>
     {% include "tagslist.njk" %}
   </nav>
-  {% set postslist = collections.posts | head(-5) %}
+  {% set articlesList = collections.articles | filterDraft | head(-6) %}
-  {% set postslistCounter = collections.posts | length %}
+  {% set showMore = true %}
-  {% include "postslist.njk" %}
+  {% include "articlesList.njk" %}
 </div>
 <aside class="right-side">
   {% include "other_links.njk" %}

src/_pages/blog/sitemap/sitemap.njk

@@ -1,5 +1,5 @@
 ---
-permalink: /sitemap.xml
+permalink: /blog/sitemap.xml
 eleventyExcludeFromCollections: true
 ---
 <?xml version="1.0" encoding="utf-8"?>

src/_pages/blog/tags.njk

@@ -12,13 +12,13 @@ pagination:
 layout: home.njk
 eleventyComputed:
   title: Tags “{{ tag }}”
-permalink: /tags/{{ tag | slugify }}/
+permalink: /blog/tags/{{ tag | slugify }}/
 ---
 <div class="main-content">
   <h1>#{{ tag }}</h1>
 
-  {% set postslist = collections[ tag ] %}
+  {% set articlesList = collections[ tag ] | filterDraft %}
-  {% include "postslist.njk" %}
+  {% include "articlesList.njk" %}
 </div>
 <aside class="right-side">
   {% include "tagslist.njk" %}

src/_pages/feed/json.njk

@@ -1,29 +0,0 @@
----
-# Metadata comes from _data/metadata.json
-permalink: /feed/feed.json
----
-{
-  "version": "https://jsonfeed.org/version/1.1",
-  "title": "{{ metadata.title }}",
-  "language": "{{ metadata.language }}",
-  "home_page_url": "{{ metadata.url | addPathPrefixToFullUrl }}",
-  "feed_url": "{{ permalink | htmlBaseUrl(metadata.url) }}",
-  "description": "{{ metadata.description }}",
-  "author": {
-    "name": "{{ metadata.author.name }}",
-    "url": "{{ metadata.author.url }}"
-  },
-  "items": [
-    {%- for post in collections.posts | reverse %}
-    {%- set absolutePostUrl = post.url | htmlBaseUrl(metadata.url) %}
-    {
-      "id": "{{ absolutePostUrl }}",
-      "url": "{{ absolutePostUrl }}",
-      "title": "{{ post.data.title }}",
-      "content_html": {% if post.templateContent %}{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) | dump | safe }}{% else %}""{% endif %},
-      "date_published": "{{ post.date | dateToRfc3339 }}"
-    }
-    {% if not loop.last %},{% endif %}
-    {%- endfor %}
-  ]
-}

src/_pages/robots/robots.njk

@@ -1,9 +0,0 @@
----
-permalink: '/robots.txt'
-eleventyExcludeFromCollections: true
----
-
-User-agent: *
-Allow: /
-
-Sitemap: {{ site.url }}/sitemap.xml

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,17 +195,31 @@ h2 {
   font-style: normal;
   font-weight: 700;
   letter-spacing: .02rem;
-  line-height: 1.7rem;
+  margin: 3rem 0 2rem;
+}
+
+h3 {
+  color: var(--text-color-secondary);
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 700;
+}
+
+p, li {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
 }
 
 p {
-  font-size: 1.125rem;
+  margin: 0;
-  line-height: 1.5rem;
-  margin: 1.5rem 0;
 }
 
-li {
+p + p {
-  line-height: 1.5;
+  margin-top: 1.5rem;
+}
+
+p ~ ul {
+  margin-top: .5rem;
 }
 
 a {
@@ -174,9 +257,6 @@ hr {
   margin: 4rem 15vw;
 }
 
-p + h2 {
-  margin-top: .5rem;
-}
 figure + h2,
 pre + h2 {
   margin-top: 2rem;
@@ -188,7 +268,7 @@ img {
 
 figure {
   text-align: center;
-  margin: 0;
+  margin: 2rem;
 }
 
 figure img {
@@ -197,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);
 }
 
@@ -228,18 +308,20 @@ figure figcaption {
 
 /*!* Posts list *!*/
 .post-list {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: 1fr 1fr;
-  gap: 3rem;
+  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);
 }
+.post-list-item p {
+  margin: 2rem 0;
+}
 .post-list-header h2 {
-  margin-bottom: .5rem;
+  margin-bottom: 1.5rem;
 }
 .post-list-link {
   flex-basis: calc(100% - 1.5rem);
@@ -251,23 +333,35 @@ figure figcaption {
 }
 
 /* Tags */
+.post-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .5rem;
+  margin: 0.5rem 0;
+  list-style: none;
+  padding: 0;
+}
 .post-tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-color);
-  background: var(--text-color-tertiary);
   padding: 4px;
-  font-size: 0.8125rem; /* 13px /16 */
   border-radius: 5px;
+  background: var(--text-color-tertiary);
+}
+.article-tags {
+  margin: 0;
+}
+.post-tag a {
+  color: var(--text-color);
+  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);
 }
 
@@ -275,44 +369,54 @@ figure figcaption {
   flex-direction: column;
 }
 
-.post-metadata ul {
-  display: flex;
-  gap: .5em;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
 h1 + .post-metadata {
   margin: 0 0 4rem;
 }
 
 .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 */
+  a {
-.direct-link {
+    display: flex;
-  font-family: sans-serif;
+    flex-direction: row;
     text-decoration: none;
-  font-style: normal;
+    align-items: center;
-  margin-left: .1em;
+    padding: 1.5rem;
-}
+    color: var(--text-color);
-a[href].direct-link {
+    height: 100%;
-  color: transparent;
+  }
-}
+  .icon {
-a[href].direct-link:focus,
+    font-size: 36px;
-:hover > a[href].direct-link {
+  }
-  color: var(--color-gray-50);
+  .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 {
@@ -365,6 +469,9 @@ a[href].direct-link:focus,
 .footer-center {
   flex: 0 60%;
   text-align: center;
+  > p {
+    margin-bottom: 12px;
+  }
 }
 
 /*
@@ -374,6 +481,7 @@ pre[class*="language-diff-"] {
   --eleventy-code-padding: 1.25em;
   padding-left: var(--eleventy-code-padding);
   padding-right: var(--eleventy-code-padding);
+  margin: 1.5rem 0;
 }
 .token.deleted {
   background-color: hsl(0, 51%, 37%);
@@ -422,9 +530,15 @@ pre[class*="language-diff-"] {
     max-width: 100%;
   }
   .right-side {
+    position: relative;
     width: 100%;
-    padding-left: 0;
+    padding: 5rem 0;
-    padding-top: 5rem;
+  }
+  .left-side {
+    position: relative;
+    order: 2;
+    width: 100%;
+    padding-right: 0;
   }
   h1 + .post-metadata {
     flex-direction: column;

webpack.config.common.js

@@ -5,8 +5,8 @@ const path = require('path');
 module.exports = {
   // Our "entry" point
   entry: {
-    main: './src/assets/js/index.js',
+    main: './src/blog_assets/js/index.js',
-    print: './src/assets/js/print.js'
+    print: './src/blog_assets/js/print.js'
   },
   output: {
     // The global variable name any `exports` from `index.js` will be available at