Compare commits

..

1 Commits

Author SHA1 Message Date
Nicolas Doby 4b0e7fd23c feat: new article 2022-11-02 17:18:18 +01:00
59 changed files with 400 additions and 11498 deletions

View File

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

1
.gitignore vendored
View File

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

View File

@ -1,6 +1,5 @@
const { DateTime } = require("luxon"); const { DateTime } = require("luxon");
const markdownItAnchor = require("markdown-it-anchor"); const markdownItAnchor = require("markdown-it-anchor");
const pluginTOC = require('eleventy-plugin-toc')
const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginRss = require("@11ty/eleventy-plugin-rss");
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const pluginNavigation = require("@11ty/eleventy-navigation"); const pluginNavigation = require("@11ty/eleventy-navigation");
@ -10,15 +9,10 @@ const htmlmin = require('html-minifier');
let options = { let options = {
// whatever options you have set for the library here // 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 mdfigcaption = require('markdown-it-image-figures');
let figoptions = { let figoptions = {
figcaption: true, figcaption: true
lazy: true,
async: true,
}; };
const mdLib = markdownIt(options).use(mdfigcaption, figoptions); const mdLib = markdownIt(options).use(mdfigcaption, figoptions);
@ -33,25 +27,16 @@ module.exports = function(eleventyConfig) {
//eleventyConfig.addWatchTarget('./src/compiled-assets/main.js'); //eleventyConfig.addWatchTarget('./src/compiled-assets/main.js');
//eleventyConfig.addWatchTarget('./src/compiled-assets/vendor.js'); //eleventyConfig.addWatchTarget('./src/compiled-assets/vendor.js');
// Copy src/compiled-assets to /blog_assets // Copy src/compiled-assets to /assets
eleventyConfig.addPassthroughCopy({ 'src/compiled-assets': 'blog_assets' }); eleventyConfig.addPassthroughCopy({ 'src/compiled-assets': 'assets' });
// Copy all images // Copy all images
eleventyConfig.addPassthroughCopy('src/blog_images'); eleventyConfig.addPassthroughCopy('src/images');
// Add plugins // Add plugins
eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation); eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.addPlugin(EleventyHtmlBasePlugin); 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); eleventyConfig.addFilter("env", (key, def="NOT DEFINED") => process.env[key] || def);
@ -81,41 +66,23 @@ module.exports = function(eleventyConfig) {
return Math.min.apply(null, numbers); 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 // Return all the tags used in a collection
eleventyConfig.addFilter("getAllTags", collection => { eleventyConfig.addFilter("getAllTags", collection => {
let tags = new Map(); let tagSet = new Set();
for(let item of collection) { for(let item of collection) {
if (item.data.draft) { (item.data.tags || []).forEach(tag => tagSet.add(tag));
continue;
} }
(item.data.tags || []).forEach(tag => { return Array.from(tagSet).sort((a, b) => {
let number = tags.get(tag) || 0; return a.localeCompare(b, undefined, {sensitivity: 'base'});
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) { eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
return (tags || []).filter(tag => ["all", "nav", "article", "articles"].indexOf(tag) === -1); return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
// const filters = ["all", "nav", "article", "articles"];
// return new Map([...tags].filter(([k, _]) => filters.indexOf(k) === -1));
}); });
eleventyConfig.addFilter("readableAuthors", (authors) => { eleventyConfig.addFilter("readableAuthors", (authors) => {
if (authors.length > 1) { return authors ? "par " + (authors || []).join(" & ") : "";
return "par " + authors.slice(0, -1).join(", ") + " et " + authors.slice(-1);
}
return "par " + (authors || []);
}); });
eleventyConfig.addFilter("noHome", elements => { eleventyConfig.addFilter("noHome", elements => {
@ -127,6 +94,11 @@ module.exports = function(eleventyConfig) {
// Customize Markdown library and settings: // Customize Markdown library and settings:
eleventyConfig.amendLibrary("md", mdLib => { eleventyConfig.amendLibrary("md", mdLib => {
mdLib.use(markdownItAnchor, { mdLib.use(markdownItAnchor, {
permalink: markdownItAnchor.permalink.ariaHidden({
placement: "after",
class: "direct-link",
symbol: "#",
}),
level: [1,2,3,4], level: [1,2,3,4],
slugify: eleventyConfig.getFilter("slug") slugify: eleventyConfig.getFilter("slug")
}); });

10000
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,31 +0,0 @@
<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>

View File

@ -0,0 +1,26 @@
<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>

View File

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

View File

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

View File

@ -1,57 +0,0 @@
---
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>

View File

@ -6,34 +6,17 @@
<title>{{ title or metadata.title }}</title> <title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}"> <meta name="description" content="{{ description or metadata.description }}">
<meta name="generator" content="{{ eleventy.generator }}"> <meta name="generator" content="{{ eleventy.generator }}">
<link rel="stylesheet" href="/blog_assets/main.css?{{ cacheBust.mainCss }}"/> <link rel="stylesheet" href="/assets/main.css?{{ cacheBust.mainCss }}"/>
<link rel="stylesheet" media="print" href="/blog_assets/print.css?{{ cacheBust.printCss }}" /> <link rel="stylesheet" media="print" href="/assets/print.css?{{ cacheBust.printCss }}" />
<link rel="alternate" href="/blog/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"> <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="/blog/feed/feed.json" type="application/json" title="{{ metadata.title }}"> <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
<link rel="icon" href="/blog_images/favicon.svg"> <link rel="icon" href="/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> </head>
<body class="container"> <body class="container">
<header class="main-header"> <header class="main-header">
<div> <div>
<a class="main-header-logo" href="/blog"> <a class="main-header-logo" href="/">
<img src="/blog_images/logo.svg" alt="IT's on us" width="165" height="33"> <img src="/images/logo.svg" alt="IT's on us" width="165" height="33">
Blog Blog
</a> </a>
</div> </div>
@ -47,7 +30,7 @@
<div class="footer-contact"> <div class="footer-contact">
<div> <div>
<p class="footer-contact-title">IT's on us</p> <p class="footer-contact-title">IT's on us</p>
<p>Copyright © {% getYear %}</p> <p>Copyright © 2022</p>
</div> </div>
<ul class="footer-links"> <ul class="footer-links">
<li> <li>
@ -57,7 +40,7 @@
</a> </a>
</li> </li>
<li> <li>
<a href="/blog/feed/feed.xml" download> <a href="/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 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> </svg>
</a> </a>
@ -65,11 +48,7 @@
</ul> </ul>
</div> </div>
<div class="footer-center"> <div class="footer-center">
<p>Blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.</p> Ceci est le blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.
{% 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> </div>
</footer> </footer>
{# <script src="{% webpackAsset 'main.js' %}"></script> Uncomment if JS is needed#} {# <script src="{% webpackAsset 'main.js' %}"></script> Uncomment if JS is needed#}

View File

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

41
src/_layouts/post.njk Normal file
View File

@ -0,0 +1,41 @@
---
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>

18
src/_pages/404.njk Normal file
View File

@ -0,0 +1,18 @@
---
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 daccueil</a></p>
</div>
<aside class="right-side">
{% include "tagslist.njk" %}
{% include "other_links.njk" %}
</aside>

View File

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

View File

@ -1,69 +0,0 @@
---
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 dentreprise ?
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 larchitecture du système d'information va développer une nouvelle fonction en dehors du cadre darchitecture de lentreprise.
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 linformation 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 dinformation. Il est ensuite possible de réaliser un plan daction, 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.

View File

@ -1,49 +0,0 @@
---
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/)

View File

@ -1,119 +0,0 @@
---
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 didentifier 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/).

View File

@ -1,75 +0,0 @@
---
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 lexpé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).

View File

@ -1,364 +0,0 @@
---
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 dexpé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. Lempreinte environnementale du parcours principal équivaut à 10 g équivalent CO₂ de gaz à effet de serre
et 15 cl deau 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 lorsquelles 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 lordinateur on économise donc de la bande passante tout en accélérant laffichage de la page.
**Problèmes rencontrés :** Comme de nombreux évènement culturels, lexposition "Celtique ?" a une forte identité
et la typographie choisie pour lexposition 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 à lobjectif d'écoconception tout en gardant lidentité de lexposition, nous avons utilisé la
police **Arial** pour le contenu des pages (titres, sous-titres, texte), mais nous avons choisi une **image SVG** pour conserver
lapparence de la typographie dans le titre de lexposition.
![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 limplémentation de JavaScript ou de certaines propriétés CSS à éviter.
**Problèmes rencontrés :**
Pour rendre lexposition 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”. Lidée était donc de conserver ce questionnaire pour la version en ligne de lexposition. Mais comment rendre un test suffisamment interactif tout en limitant lutilisation de ressources ?
Les questions du questionnaire étaient au départ au nombre de 12. Nous avions envisagé une barre de progression afin que lutilisateur ait une indication visuelle de sa progression dans le questionnaire.
**Solutions :**
Après plusieurs tests utilisateurs sur les maquettes il est finalement devenu apparent quil 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 lutilisateur 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 lexpérience, mais aussi afin dexpliquer le contexte et les limites du projet.
**Problèmes rencontrés :** Comme de nombreux projets entamant une démarche décoconception, il y a dun côté,
lobjectif à atteindre, et de lautre, les limites auxquelles nous sommes confrontés. Nous avons pu mettre
en place une grande partie des bonnes pratiques décoconception, mais certaines nont pas pu être mises en place
pour le moment car elles touchent à lécosystème plus global des Champs Libres (par exemple lhé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 dafficher un score EcoIndex en bas de page ou bien une estimation de lempreinte
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 daccessibilité.
![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 quil 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 linstallation 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é dapporter des corrections sur le fond sans “casser” la forme.
Au fur et à mesure des avancées des maquettes, il sest 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 davoir plus de souplesse dans le développement.
Ce changement a induit de former les équipes non-techniques sur ces aspects techniques :
* larchitecture 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 sengager dans un projet écoresponsable, il importe de se fixer des objectifs chiffrés, et pour **cela il faut des
indicateurs précis à atteindre**. Aujourdhui, 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 douverture et de liens vers
des contenus complémentaires sans toutefois proposer sur le site beaucoup plus de ressources que celles de lexposition.
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.

View File

@ -1,58 +0,0 @@
---
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 !

View File

@ -1,131 +0,0 @@
---
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. Lorsquon na pas de handicap visuel, autant profiter des capacités supplémentaires de loutil pour permettre de mieux sy retrouver.
Il est possible de configurer NVDA pour quil 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 licône NVDA, puis sur le menu **Préférences**, puis sur **Paramètres…**
Dans la fenêtre qui souvre, 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 lactivation 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 lobjet 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 sest 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 larticle.
- **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 quil 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 dun coup, mais va le découper en morceaux. Ce curseur indique le début du morceau quil 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 lendroit 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 sest passé. Cest notamment pratique pour une personne pas encore habituée à la façon dont les éléments sont restitués à loral par le lecteur décran.
A noter que lexemple ci-dessous est un peu brouillon à cause de linterférence avec loutil 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 louverture 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 dun onglet à un autre dans votre navigateur, ou que vous changez dapplication au premier plan, le lecteur décran restituera vocalement ce qui se passe. Cela a pour conséquence quil pourrait vous donner limpression de ne jamais vous laisser en paix. Cest ici quinterviennent les deux premières commandes à connaître.
### Pause/Lecture
Pour mettre en pause une vocalisation en cours, un appui sur la touche **Shift** fera laffaire. Cette touche agit comme un bouton pause dune 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 dun mot).
### Stop
Pour interrompre définitivement une vocalisation en cours, il faudra presser la touche **Ctrl**. La différence avec la pause est quil est impossible de reprendre la vocalisation. Cette touche joue le rôle dun stop. Il faudra ensuite utiliser les commandes de navigation pour relancer une vocalisation.
Jusquici, on aura appris à pouvoir ne pas subir la vocalisation en étant capable de la démarrer ou linterrompre. 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 sil 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. Cest ici quinterviennent les quelques touches de navigation basique.
### Touche NVDA
Avant dentrer dans le vif du sujet, il est nécessaire de connaître ce quon appelle les **touches NVDA.** Ces touches peuvent être configurées dans linterface 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 lappui 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 (sil y en a une), et déplacera le focus NVDA vers le prochain élément de la page. Cet élément nest pas nécessairement activable. Il peut sagir dun 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 linverse, à 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 nest pas essentiel à connaître pour débuter. La vocalisation finira de restituer la page jusquà sa fin, et tant que vous ne linterromprez 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 quil 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 dautres commandes, mais celles-ci devraient pouvoir couvrir vos besoins essentiels en terme dutilisation.
Si vous souhaitez aller plus loin, la [documentation officielle de NVDA](https://www.nvda.fr/doc/userGuide.html) devrait répondre à toutes vos interrogations.

View File

@ -1,222 +0,0 @@
---
title: "Impacts environnementaux du numérique en France"
description: "Grâce à létude de lADEME et de lARCEP 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, quil faut absolument chercher à réduire car le numérique
contribue au dépassement de plusieurs limites planétaires, cest-à-dire aux quantités dimpacts 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 lazote et du phosphore, les changements d'utilisation des sols,
l'introduction de nouvelles substances (en 2022) et lutilisation de l'eau douce (en 2022).
## Principes dévaluation environnementale
Contrairement à ce que sous-entend lunivers 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.
Cest bien cette matérialité qui engendre des impacts environnementaux. En effet, un logiciel na pas dimpacts
environnementaux à proprement parler (et ne sécoconçoit pas) alors que les éléments physiques dun 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 deffets négatifs que les seules émissions de gaz à effet de serre. Si lanalyse nest pas
multicritère, le risque que les solutions apportées transfèrent les impacts dun critère vers un autre est réel.
Il est également essentiel davoir une approche multi-étapes et systémique et de considérer lensemble des étapes du
cycle de vie de tous les éléments physique sous-jacents à une unité fonctionnelle. On définit lobjet dune étude par la
fonction quil remplit afin de pouvoir comparer différentes solutions.
Cest là tout lintérêt de **la méthode holistique que représente lanalyse 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 lADEME et lARCEP et publiée en janvier 2022, quantifie et analyse les impacts
environnementaux du numérique en France au travers de lunité 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 lutilisation de plus dun 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 dordinateurs portables et 40 millions dordinateurs fixes ;
- environ 40 millions décrans dordinateur et 60 millions de téléviseurs ;
- plus de 20 millions dimprimantes ;
- environ 245 millions dobjets connectés.
Elle implique également des équipements réseau et des centres informatiques, entre autres :
- environ 30 millions dabonnés (et donc de box internet) à des réseaux fixes ;
- environs 95 millions dabonné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 nont pas pu se baser sur un nombre déquipements et leur durée de vie
car les opérateurs et équipementiers nont pas pu déterminer cette dernière. Linfrastructure réseau na 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 dun 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 dhabitants 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 dhabitants 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
luranium 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 dhabitants 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 dhabitants 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 dunités de toxicité pour des écosystèmes.
Cela correspond à lécotoxicité générée par 6 millions dhabitants du monde.
### Autres impacts
Trois impacts environnementaux, parmi bien dautres, méritent dêtre soulignés. Lacidification, les émissions de
particules fines et la création dozone photochimique sont des effets négatifs significatifs du numérique : leur
quantité est équivalente à ceux générés par un million dhabitants du monde.
__Définitions :__
- Acidification :
"Lacidification 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 dozone 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 :__ "Lindicateur dépuisement de la ressource en eau \[a donné\] des résultats non cohérents du fait dune
surreprésentation de la fin de vie liée aux données utilisées. Ce point a été identifié \[par les auteurs\], mais na 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 leau douce à hauteur de 559 millions de m³ d'eau
douce soit 5 fois la consommation deau des Parisiens."
### Impacts du numérique en France par habitant
Limpact 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 dun 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 lutilisation de ces équipements, et donc la production délectricité pour les alimenter, contribue le
plus, **cest 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 lextraction demande beaucoup
dénergie motrice produite à partir de moteurs à explosion et dhydrocarbures, de ressources et dintrants
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 quune grande force motrice générée par des moteurs à explosion.
### Poids des différents équipements dans lempreinte 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 lempreinte 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 lADEME et de lARCEP 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 ITs on us
La fabrication est la principale source d'impacts pour l'environnement. Cela sexplique notamment par la quantité
importante dénergies fossiles nécessaire à leur production et à l'extraction des minerais. Lutilisation 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 dallonger 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 ITs 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)

View File

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

View File

@ -1,17 +0,0 @@
---
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>

View File

@ -0,0 +1,56 @@
---
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.

View File

@ -0,0 +1,59 @@
---
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.

View File

@ -0,0 +1,51 @@
---
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.

View File

@ -1,29 +0,0 @@
---
# 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 %}
]
}

View File

@ -1,15 +1,14 @@
--- ---
title: Intégrer une vidéo sur une page Web 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. description: Intégrer au mieux une vidéo sur une page Web en prenant en compte les aspects éco-conception, accessibilité et éthique.
date: 2022-11-25 date: 2022-11-02
tags: tags:
- écoconception - écoconception
- accessibilité - accessibilité
- éthique - éthique
authors: authors:
- Nicolas DOBY - Nicolas DOBY
draft: true layout: post.njk
layout: article.njk
--- ---

View File

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

29
src/_pages/feed/json.njk Normal file
View File

@ -0,0 +1,29 @@
---
# 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 %}
]
}

View File

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

View File

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

View File

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

View File

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

View File

@ -15,7 +15,6 @@
--color-green-2: #57c183; --color-green-2: #57c183;
--background-color: #fff; --background-color: #fff;
--background-color-toc: #F2F7F6;
--text-color: rgba(0,0,10,.8); --text-color: rgba(0,0,10,.8);
--text-color-sub: rgba(0,0,10,.55);; --text-color-sub: rgba(0,0,10,.55);;
@ -23,7 +22,6 @@
--text-color-tertiary: var(--color-green-2); --text-color-tertiary: var(--color-green-2);
--text-color-link: var(--color-green-1); --text-color-link: var(--color-green-1);
--text-color-link-active: var(--color-green-1); --text-color-link-active: var(--color-green-1);
--text-color-toc: #1C4852;
} }
/*@media (prefers-color-scheme: dark) {*/ /*@media (prefers-color-scheme: dark) {*/
@ -57,7 +55,6 @@ body {
font-family: var(--font-family); font-family: var(--font-family);
color: var(--text-color); color: var(--text-color);
background-color: var(--background-color); background-color: var(--background-color);
scroll-behavior: smooth;
} }
main { main {
@ -71,77 +68,11 @@ main {
width: 1200px; width: 1200px;
} }
.left-side, .right-side { .right-side {
position: sticky; position: sticky;
top: 1rem; top: 1rem;
align-self: flex-start; 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; padding-left: 60px;
} }
@ -195,31 +126,17 @@ h2 {
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
letter-spacing: .02rem; letter-spacing: .02rem;
margin: 3rem 0 2rem; line-height: 1.7rem;
}
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 { p {
margin: 0; font-size: 1.125rem;
line-height: 1.5rem;
margin: 1.5rem 0;
} }
p + p { li {
margin-top: 1.5rem; line-height: 1.5;
}
p ~ ul {
margin-top: .5rem;
} }
a { a {
@ -257,6 +174,9 @@ hr {
margin: 4rem 15vw; margin: 4rem 15vw;
} }
p + h2 {
margin-top: .5rem;
}
figure + h2, figure + h2,
pre + h2 { pre + h2 {
margin-top: 2rem; margin-top: 2rem;
@ -268,7 +188,7 @@ img {
figure { figure {
text-align: center; text-align: center;
margin: 2rem; margin: 0;
} }
figure img { figure img {
@ -277,7 +197,7 @@ figure img {
figure figcaption { figure figcaption {
margin-top: 6px; margin-top: 6px;
font-size: 0.875rem; font-size: 0.8125rem; /* 13px /16 */
color: var(--text-color-sub); color: var(--text-color-sub);
} }
@ -308,20 +228,18 @@ figure figcaption {
/*!* Posts list *!*/ /*!* Posts list *!*/
.post-list { .post-list {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; flex-wrap: wrap;
grid-gap: 2rem; gap: 3rem;
} }
.post-list-item { .post-list-item {
max-width: 430px;
padding: 2rem; padding: 2rem;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.3); box-shadow: 0 5px 10px rgba(0,0,0,0.3);
} }
.post-list-item p {
margin: 2rem 0;
}
.post-list-header h2 { .post-list-header h2 {
margin-bottom: 1.5rem; margin-bottom: .5rem;
} }
.post-list-link { .post-list-link {
flex-basis: calc(100% - 1.5rem); flex-basis: calc(100% - 1.5rem);
@ -333,35 +251,23 @@ figure figcaption {
} }
/* Tags */ /* Tags */
.post-tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0.5rem 0;
list-style: none;
padding: 0;
}
.post-tag { .post-tag {
padding: 4px; display: inline-flex;
border-radius: 5px; align-items: center;
background: var(--text-color-tertiary); justify-content: center;
}
.article-tags {
margin: 0;
}
.post-tag a {
color: var(--text-color); color: var(--text-color);
font-size: 0.875rem; background: var(--text-color-tertiary);
font-weight: 700; padding: 4px;
font-size: 0.8125rem; /* 13px /16 */
border-radius: 5px;
text-decoration: none; text-decoration: none;
} }
/* Tags list */ /* Tags list */
.post-metadata { .post-metadata {
display: flex; display: flex;
flex-direction: column;
gap: .5em; gap: .5em;
font-size: 0.875rem; font-size: 0.8125rem; /* 13px /16 */
color: var(--text-color-sub); color: var(--text-color-sub);
} }
@ -369,54 +275,44 @@ figure figcaption {
flex-direction: column; flex-direction: column;
} }
.post-metadata ul {
display: flex;
gap: .5em;
list-style: none;
padding: 0;
margin: 0;
}
h1 + .post-metadata { h1 + .post-metadata {
margin: 0 0 4rem; margin: 0 0 4rem;
} }
.post-metadata .post-metadata__header { .post-metadata .post-metadata__header {
flex-grow: 1; flex-grow: 1;
font-size: 0.875rem; font-size: 0.8125rem; /* 13px /16 */
color: var(--text-color-sub); color: var(--text-color-sub);
} }
.post-nav ul { .post-nav ul {
display: flex; display: flex;
gap: 1rem;
margin: 0;
justify-content: space-around; justify-content: space-around;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 2rem 1rem 0 0;
}
a { /* Direct Links / Markdown Headers */
display: flex; .direct-link {
flex-direction: row; font-family: sans-serif;
text-decoration: none; text-decoration: none;
align-items: center; font-style: normal;
padding: 1.5rem; margin-left: .1em;
color: var(--text-color);
height: 100%;
}
.icon {
font-size: 36px;
}
.previous, .next {
flex-basis: 50%;
background: var(--color-gray-20);
border-radius: 8px;
&:hover {
background: var(--color-gray-50);
}
}
.previous {
.icon {
margin-left: 2rem;
}
}
.next {
.icon {
margin-right: 2rem;
} }
a[href].direct-link {
color: transparent;
} }
a[href].direct-link:focus,
:hover > a[href].direct-link {
color: var(--color-gray-50);
} }
.main-footer { .main-footer {
@ -469,9 +365,6 @@ h1 + .post-metadata {
.footer-center { .footer-center {
flex: 0 60%; flex: 0 60%;
text-align: center; text-align: center;
> p {
margin-bottom: 12px;
}
} }
/* /*
@ -481,7 +374,6 @@ pre[class*="language-diff-"] {
--eleventy-code-padding: 1.25em; --eleventy-code-padding: 1.25em;
padding-left: var(--eleventy-code-padding); padding-left: var(--eleventy-code-padding);
padding-right: var(--eleventy-code-padding); padding-right: var(--eleventy-code-padding);
margin: 1.5rem 0;
} }
.token.deleted { .token.deleted {
background-color: hsl(0, 51%, 37%); background-color: hsl(0, 51%, 37%);
@ -530,15 +422,9 @@ pre[class*="language-diff-"] {
max-width: 100%; max-width: 100%;
} }
.right-side { .right-side {
position: relative;
width: 100%; width: 100%;
padding: 5rem 0; padding-left: 0;
} padding-top: 5rem;
.left-side {
position: relative;
order: 2;
width: 100%;
padding-right: 0;
} }
h1 + .post-metadata { h1 + .post-metadata {
flex-direction: column; flex-direction: column;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

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