Compare commits
45 Commits
866130c60e
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| a47ddc5e1a | |||
| d634c5e67c | |||
|
c2d71ba007 | ||
| 95dfafe7d4 | |||
| 11f7a7e20a | |||
| a6ccfaaea9 | |||
| e2ffd76e6b | |||
| 19abfa9fcd | |||
| f57a50f3a7 | |||
| 81bcf5013a | |||
| 0f554341e5 | |||
| f43a0646f3 | |||
| 923cba4916 | |||
| c58de476f8 | |||
| 18904847aa | |||
| ab229258a5 | |||
| fa5c775e20 | |||
| 70946724ce | |||
| 98a19561ad | |||
| bb668cf356 | |||
| c58ebadaf6 | |||
| 2c5b0c7bde | |||
| e02b0251fe | |||
| 14a4b4f9db | |||
| 086d9fd220 | |||
| 24f8c252ba | |||
| eb04187362 | |||
| 61dc72ae24 | |||
| a19021e20a | |||
| 0d977d8048 | |||
| 1cf20dbf56 | |||
| 3c536d1a94 | |||
| 0739a0e78d | |||
| 2e62db66df | |||
| 1cc7144697 | |||
| 44050ace93 | |||
| a6dc95f890 | |||
| 37a5dd6870 | |||
| 7956b5f392 | |||
| 82a6d3751e | |||
| eec15a77a2 | |||
| a5c4188528 | |||
| 1bf7a69c30 | |||
| ab11e8fc67 | |||
| 6acfc466c6 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -3,5 +3,4 @@
|
||||
_site/
|
||||
dist/
|
||||
node_modules/
|
||||
package-lock.json
|
||||
src/compiled-assets
|
||||
|
||||
@@ -49,6 +49,10 @@ module.exports = function(eleventyConfig) {
|
||||
ul: true,
|
||||
});
|
||||
|
||||
eleventyConfig.addShortcode('getYear', () => {
|
||||
return new Date().getFullYear();
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("env", (key, def="NOT DEFINED") => process.env[key] || def);
|
||||
|
||||
eleventyConfig.addFilter("readableDate", (dateObj, format = "dd LLLL yyyy") => {
|
||||
@@ -81,6 +85,10 @@ module.exports = function(eleventyConfig) {
|
||||
return articles.filter(article => !article.data.draft);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("onlyDraft", articles => {
|
||||
return articles.filter(article => article.data.draft);
|
||||
});
|
||||
|
||||
// Return all the tags used in a collection
|
||||
eleventyConfig.addFilter("getAllTags", collection => {
|
||||
let tags = new Map();
|
||||
|
||||
10000
package-lock.json
generated
Normal file
10000
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,7 @@
|
||||
"del:dist": "rimraf ./dist",
|
||||
"dev": "npm run dev:assets & npm run dev:site",
|
||||
"dev:assets": "webpack --config webpack.config.dev.js",
|
||||
"dev:site": "ELEVENTY_ENV=development npx eleventy --serve",
|
||||
"dev:site": "cross-env ELEVENTY_ENV=development npx eleventy --serve",
|
||||
"prod": "npm-run-all del:dist del:assets build:assets build:site",
|
||||
"serve:prod": "serve ./dist/"
|
||||
},
|
||||
@@ -51,6 +51,7 @@
|
||||
"webpack-merge": "^5.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "^7.0.3",
|
||||
"prettier": "^2.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,4 +23,9 @@
|
||||
</footer>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% if showMore %}
|
||||
<div>
|
||||
<a href="/blog/all_articles">Voir l'ensemble des articles</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -8,9 +8,9 @@ templateClass: tmpl-post
|
||||
</aside>
|
||||
{%- endif %}
|
||||
<div class="main-content">
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
<div class="post-metadata">
|
||||
<h1> {% if draft %} Brouillon - {%- endif %} {{ title }}</h1>
|
||||
<div
|
||||
class="post-metadata">
|
||||
<div class="post-metadata__header">
|
||||
Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
|
||||
</div>
|
||||
|
||||
@@ -11,23 +11,23 @@
|
||||
<link rel="alternate" href="/blog/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
|
||||
<link rel="alternate" href="/blog/feed/feed.json" type="application/json" title="{{ metadata.title }}">
|
||||
<link rel="icon" href="/blog_images/favicon.svg">
|
||||
{% if "ELEVENTY_ENV" | env == "production"%}
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://itsonus.matomo.cloud/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '1']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src='//cdn.matomo.cloud/itsonus.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
{% endif %}
|
||||
{# {% if "ELEVENTY_ENV" | env == "production"%}#}
|
||||
{# <!-- Matomo -->#}
|
||||
{# <script>#}
|
||||
{# var _paq = window._paq || [];#}
|
||||
{# /* tracker methods like "setCustomDimension" should be called before "trackPageView" */#}
|
||||
{# _paq.push(['trackPageView']);#}
|
||||
{# _paq.push(['enableLinkTracking']);#}
|
||||
{# (function() {#}
|
||||
{# var u="https://itsonus.matomo.cloud/";#}
|
||||
{# _paq.push(['setTrackerUrl', u+'matomo.php']);#}
|
||||
{# _paq.push(['setSiteId', '1']);#}
|
||||
{# var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];#}
|
||||
{# g.async=true; g.src='//cdn.matomo.cloud/itsonus.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);#}
|
||||
{# })();#}
|
||||
{# </script>#}
|
||||
{# <!-- End Matomo Code -->#}
|
||||
{# {% endif %}#}
|
||||
</head>
|
||||
<body class="container">
|
||||
<header class="main-header">
|
||||
@@ -47,7 +47,7 @@
|
||||
<div class="footer-contact">
|
||||
<div>
|
||||
<p class="footer-contact-title">IT's on us</p>
|
||||
<p>Copyright © 2022</p>
|
||||
<p>Copyright © {% getYear %}</p>
|
||||
</div>
|
||||
<ul class="footer-links">
|
||||
<li>
|
||||
@@ -65,7 +65,11 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-center">
|
||||
Blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.
|
||||
<p>Blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.</p>
|
||||
{% set absoluteUrl %}{{ page.url | htmlBaseUrl(metadata.url) }}{% endset %}
|
||||
<a href="https://bff.ecoindex.fr/redirect/?url={{ absoluteUrl }}" target="_blank">
|
||||
<img src="https://bff.ecoindex.fr/badge/?theme=light&url={{ absoluteUrl }}" alt="Ecoindex Badge" />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
{# <script src="{% webpackAsset 'main.js' %}"></script> Uncomment if JS is needed#}
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Quel rôle joue un architecte d'entreprise dans une démarche GreenIT ?
|
||||
description: Nous verrons qu'une bonne connaissance de son architecture SI et une connaissance de l'état de l'art du green IT permet de réduire les impacts environnementaux.
|
||||
date: 2023-03-12
|
||||
tags:
|
||||
- architecture d'entreprise
|
||||
- écoconception
|
||||
- greenIT
|
||||
authors:
|
||||
- Damien Marzlin
|
||||
- Margaux Escande
|
||||
draft: false
|
||||
layout: article.njk
|
||||
---
|
||||
|
||||
*Pour y répondre, nous avons interviewé Damien Marzlin, membre du collectif IT's on us. Damien est architecte d'entreprise, il accompagne les organisations dans la réduction des impacts environnementaux du numérique et forme à l'écoconception de services numériques.*
|
||||
|
||||
## Pour commencer, peux-tu nous expliquer ton métier d'architecte d’entreprise ?
|
||||
|
||||
Oui tout à fait. Une de mes premières missions est de cartographier l'existant. L'objectif est d'avoir connaissance de toutes les applications qui composent le système d'information et de connaître les fonctions de chaque application.
|
||||
|
||||
On sait donc, par exemple, qu'on a une application qui gère les commandes et qu'elle a pour fonction de réceptionner une commande web et d'envoyer des informations pour préparer la commande.
|
||||
|
||||
C'est une première vision assez statique, qu'on appelle POS (plan d'occupation des sols). A ce stade, il manque les liens entre les applications.
|
||||
|
||||
Dans la suite de mon exemple, l'étape suivante est de rajouter l'information me permettant de savoir comment je dois aller chercher les commandes web. Ce n'est pas parce qu'une application a la donnée que c'est à elle de les mettre à disposition.
|
||||
|
||||
Une bonne connaissance des applications et des liens entre elles, permet l'urbanisation. Et ainsi, couvrir un maximum de fonctions avec un minimum d'applications.
|
||||
|
||||
L'autre mission importante que j'ai, c'est d'avoir une vision long terme pour détecter les besoins que l'entreprise va avoir en termes de processus, d'applications et de techniques.
|
||||
|
||||
## Peux-tu nous expliquer comment, en tant qu'architecte d'entreprise tu arrives à réduire les impacts environnementaux d'un système d'information ?
|
||||
|
||||
Premièrement, il s'agit de ne pas recréer des fonctions existantes. Je constate assez souvent qu'une équipe projet qui ne connait pas l’architecture du système d'information va développer une nouvelle fonction en dehors du cadre d’architecture de l’entreprise.
|
||||
Le premier lien évident, c'est qu'en ayant une bonne connaissance du système d'information, les architectes d'entreprises peuvent maximiser la réutilisation de l'existant. Au démarrage d'un projet, on liste les fonctions nécessaires et on identifie celles existantes et manquantes.
|
||||
|
||||
Ce qui peut aussi arriver, c'est que les flux de données entre les applications soient nombreux et non optimisés. Cela est dû au manque d'une vue logique des échanges entre les applications. On sait que le transfert de données a plus d'impacts environnementaux que le stockage. On comprend alors l'importance d'optimiser ces transferts.
|
||||
Si on a une démarche d'uniformisation des flux, on va pouvoir extraire une seule fois la donnée, la mettre à disposition à un endroit et avoir plusieurs services qui utilisent l'information.
|
||||
Par ailleurs, il arrive souvent que lorsqu'on met en place un flux, les équipes demandent une VM donc cela ajoute des impacts environnementaux.
|
||||
|
||||
## Comment cela se passe concrètement en entreprise ?
|
||||
|
||||
Souvent, un ou plusieurs architectes sont dédiés à un domaine fonctionnel, selon sa taille et son importance.
|
||||
Il y a des instances pour que les différents architectes de l'entreprise puissent communiquer. Dans ma mission actuelle, cette instance est hebdomadaire. Régulièrement, je constate qu'il y a des liens entre les domaines et qu'il est important de travailler en coopération.
|
||||
|
||||
Par exemple, l'un des domaines cherchait un outil de signature électronique, avant de chercher une solution, ils ont contacté les architectes d'entreprise pour savoir si quelqu'un avait déjà l'application, ce qui état le cas. Cette fonctionnalité a donc été réutilisée.
|
||||
|
||||
Je dois également sensibiliser les personnes qui prennent des décisions qui concerne le système d'information. Je participe donc aux instances où il faut prendre des décisions (Design Authority), pour essayer dès le début d'apporter une vision globale de l'existant et de ce qui peut être fait. Cela est vraiment efficace quand la décision est prise à la suite d'un dialogue entre l'architecte d'entreprise et sa hiérarchie.
|
||||
|
||||
## Quels sont les bénéfices de cette approche ?
|
||||
|
||||
Il y a des gains économiques forts, car on peut mutualiser.
|
||||
|
||||
C'est plus intéressant de connecter 10 services à la même infrastructure que d'avoir 10 infrastructures différentes.
|
||||
La mutualisation facilite le pilotage. Il y a qu'une seule équipe qui gère l'infrastructure et qui a une vision globale de l'existant pour déterminer ce qui peut être fait. C'est donc plus simple d'optimiser. Sans cela, il y a un risque élévé de surdimensionnement de plusieurs infrastructures.
|
||||
|
||||
Par ailleurs, l'uniformisation des flux de données, simplifie la maintenance. Plus il y a de flux, plus il est difficile de détecter des problèmes dans le transport de l’information et donc, de maintenir le système.
|
||||
|
||||
## Peut-on mesurer les gains de cette démarche ?
|
||||
|
||||
L'architecture a un impact indirect, ça n'a pas de matérialité. Pour mesurer les bénéfices, il faut évaluer la matérialité grâce à un inventaire des équipements numériques. Dans les grandes entreprises il y a le CMDB (la base de données de gestion de configuraiton), une base de données qui contient tous les composants d'un système d'information de manière à avoir une vue d'ensemble sur leur organisation. On peut alors constater ce qu'on a évité (l'achat d'une machine virtuelle - VM - par exemple), le matériel qu'on a supprimé...
|
||||
|
||||
Si on veut avoir une idée des impacts environnementaux de façon précise, il faut réaliser une Analyse du Cycle de Vie (ACV) du système d’information. Il est ensuite possible de réaliser un plan d’action, de simuler les gains potentiels. Pour évaluer les bénéfices environnementaux réels, il faut refaire une ACV après la mise en oeuvre des actions.
|
||||
|
||||
## As-tu un conseil pour les organisations qui n'ont pas encore démarré ce chantier ?
|
||||
|
||||
La première chose à faire c'est de cartographier l'existant, cela permettra de prendre des décisions éclairées.
|
||||
Je conseille également de prendre connaissances du référentiel Green IT : [74 bonnes pratiques clés pour un numérique plus responsable](https://club.greenit.fr/doc/2022-06-GREENIT-Referentiel_maturite-v3.pdf) de GreenIT.fr.
|
||||
|
||||
@@ -42,7 +42,7 @@ Par exemple, le benchmark de 2021 était composé de 25 grandes entreprises priv
|
||||
|
||||
Le coût pour participer au Benchmark varie selon le chiffre d'affaires de l'entreprise de 2 000€ HT à 15 000€ HT.
|
||||
|
||||
Vous avez jusqu'à mi-décembre pour rejoindre le Benchmark 2023.
|
||||
Vous avez jusqu'à fin décembre pour rejoindre le Benchmark 2023.
|
||||
|
||||
Si vous souhaitez en savoir plus nous vous invitons à nous contacter : [contact@itsonus.fr](mailto:contact@itsonus.fr) et à vous inscrire à [la dernière session de présentation du Benchmark 2022 et lancement du Benchmark 2023](https://www.eventbrite.fr/e/billets-benchmark-green-it-2022-et-2023-session-3-452610930477)
|
||||
|
||||
|
||||
@@ -69,16 +69,13 @@ réglementation, nous avions 4 objectifs complémentaires.
|
||||
|
||||
* 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.
|
||||
* 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.
|
||||
* 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 :
|
||||
|
||||
75
src/_pages/blog/article/ecoconception_et_datawarehousing.md
Normal file
75
src/_pages/blog/article/ecoconception_et_datawarehousing.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Quelle est la place de l'écoconception dans le datawarehousing ?
|
||||
description: Les organisations manipulent beaucoup de données, est-ce compatible avec l'écoconception ? Quelles sont les bonnes pratiques ?
|
||||
date: 2023-01-09
|
||||
tags:
|
||||
- écoconception
|
||||
- datawarehouse
|
||||
|
||||
authors:
|
||||
- Damien Marzlin
|
||||
- Margaux Escande
|
||||
draft: false
|
||||
layout: article.njk
|
||||
---
|
||||
|
||||
*Pour y répondre, nous avons interviewé Damien Marzlin, membre du collectif IT's on us. Damien est architecte
|
||||
d'entreprise, il accompagne les organisations dans la réduction des impacts environnementaux du numérique et forme à l'écoconception de services numériques.*
|
||||
|
||||
## Pour commencer Damien, peux-tu nous expliquer ce qu'est le datawarehouse ?
|
||||
|
||||
C'est un entrepôt de données : un endroit où une entreprise recueille beaucoup de données qui viennent de différentes sources.
|
||||
Ces données une fois collectées et mélangées, permettent d'en tirer une valeur analytique.
|
||||
|
||||
Les organisations peuvent être amenées à utiliser une datawarehouse pour les aider à prendre des décisions ou parce
|
||||
qu'elles sont contraintes par un cadre légal de fournir des rapports.
|
||||
|
||||
Par exemple, chez Auchan, nous devons produire une déclaration de performance extra-financière (DPEF) , nous croisons
|
||||
donc des données de ventes, RH, RSE, ...
|
||||
|
||||
## Quel est le lien entre datawarehouse et écoconception de services numériques ?
|
||||
|
||||
Le datawarehousing est un service numérique composé de logiciels, d'équipements utilisateurs, de centre de données, d'équipements réseau. Bien souvent, il y a plusieurs applications, car plusieurs domaines métiers,
|
||||
qu'il faut concevoir, développer et héberger.
|
||||
Aussi, dans un datawarehouse il y a plusieurs étages : un premier pour la collecte, un deuxième où on normalise la
|
||||
donnée, un troisième où on transforme la donnée en valeur et un dernier qui permet de visualiser.
|
||||
Ces applications répondent a un ou plusieurs actes métiers qui doivent être écoconçus.
|
||||
|
||||
## À quoi faut-il penser pour les écoconcevoir ?
|
||||
|
||||
### Questionner le besoin
|
||||
|
||||
Le datawarehouse produit des reporting, des KPIs ... qui vont être utilisés par des gens. Il est important de
|
||||
questionner le besoin. Comme pour tous les projets informatiques, il faut donc s'assurer que ce qui est produit répond à
|
||||
un réel besoin utilisateur.
|
||||
|
||||
Bien souvent, je constate lors dans mes missions, que ce qui est produit n'est pas utile pour les équipes. Soit parce que dès le départ le projet est mal cadré, soit parce que le projet a pris trop de temps et l'information n'est plus nécessaire. Parfois, on produit des rapports journaliers alors qu'un rapport hebdomadaire aurait suffi.
|
||||
|
||||
### Correctement requêter
|
||||
|
||||
Avant il fallait réfléchir à la bonne configuration des serveurs, mais depuis qu'on a des environnements cloud ou du On-Premise on n'a plus de contrainte et donc on se pose moins de question. C'est ainsi plus facile, techniquement possible et économiquement viable, de manipuler des téraoctets de données. Ce qui a pour effet de consommer beaucoup de RAM (mémoire vive ou mémoire à court terme) et de CPU (capacité de calcul).
|
||||
|
||||
De manière générale, je constate que les bonnes sources d'information sont récupérées dans le datawarehouse.
|
||||
En revanche, régulièrement je vois des requêtes récupérant une grosse quantité de données pour ensuite les filtrer et/ou
|
||||
les transformer en dehors de la requête : directement dans le code du programme sans utiliser le moteur de requêtage.
|
||||
Ceci charge toutes les données et entraine donc une grosse montée en RAM. Le CPU est fortement utilisé également. Ces lourds traitements peuvent être évités en exploitant les capacités du serveur de base de données ; qui est prévu pour cela.
|
||||
|
||||
|
||||
## Comment éviter la dérive ?
|
||||
|
||||
**Un projet de datawarehousing, n'est pas qu'un projet technique, il faut intégrer dans l'équipe, et dès le début, une
|
||||
personne responsable de l’expérience utilisateur.** Son rôle sera de comprendre ce que vivent les utilisateurs (via des interviews, de l'observation par exemple) et d'identifier la problématique à laquelle il faut répondre. Se contenter de demander quel est le besoin des utilisateurs peut mener à un projet qui finalement ne sera pas utile.
|
||||
Si le projet est terminé, ce qui a été produit lui doit continuer à vivre. Il faut donc penser à mettre en place des points de contrôle après la mise en production, pour s'assurer de l'utilité réelle des évolutions fonctionnelles. Vous pouvez vous appuyer sur les équipes support de l'utilisation du datawarehouse. Quels sont les échanges qu'ils ont avec les utilisateurs? Sont-ils satisfaits ou non ? Vous pouvez également aller sur le terrain pour échanger et observer l'usage qui est fait ou encore envoyer une enquête de satisfaction à intervalle régulier.
|
||||
|
||||
Un autre point clé est d’**avoir un spécialiste en modélisation de données et en requêtage et de le faire intervenir
|
||||
le plus tôt possible.** C'est un savoir qui se perd, car cela attire moins les développeurs et développeuses. Il est
|
||||
important d'entretenir cette compétence. Si ce profil n'existe pas dans votre équipe, rien que le fait de faire des
|
||||
revues de code peut déjà apporter des bénéfices. Dans une équipe agile, on peut, par exemple, ajouter à la Definition Of
|
||||
Done (DOD) un critère comme "les requêtes SQL ne font pas de produit cartésien" ou encore "la manipulation de données
|
||||
parait nominale". Finalement, on parle ici de qualité de code.
|
||||
|
||||
Si vous souhaitez commencer
|
||||
une [démarche de réduction des impacts environnementaux de votre projet de datawarehousing](https://www.itsonus.fr/nos_services/reduire_impacts_numerique/),
|
||||
découvrez notre offre de service et contactez-nous.
|
||||
|
||||
Vous pouvez également vous appuyer sur le [référentiel Green IT : 74 bonnes pratiques clés pour un numérique plus responsable](https://club.greenit.fr/doc/2022-06-GREENIT-Referentiel_maturite-v3.pdf).
|
||||
@@ -9,6 +9,8 @@ authors:
|
||||
- Anne Faubry
|
||||
- Aurélie Baton
|
||||
- Nicolas Doby
|
||||
- Sarah Lemiale
|
||||
- Manuel Moreau
|
||||
draft: false
|
||||
toc: true
|
||||
layout: article.njk
|
||||
@@ -277,7 +279,7 @@ même titre que les autres composantes du projet : médiation, programmation, é
|
||||
**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-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
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: Le numérique au service de la production locale, utile, solidaire et soutenable
|
||||
description : Le numérique peut soutenir des projets à impacts positifs pour l'environnement et la société. La boussole PLUSS en est un exemple, elle permet d'autoévaluer ses projets pour une production plus locale, utile, solidaire et soutanable.
|
||||
date: 2023-03-27
|
||||
tags:
|
||||
- IT for green
|
||||
- écoconception
|
||||
- open source
|
||||
authors:
|
||||
- Margaux Escande
|
||||
draft: true
|
||||
layout: article.njk
|
||||
---
|
||||
|
||||
*Cet article fait suite à l'interview de Olivia Ruel-Mailfert, Pascal Desreumaux Apes et Melia Deplanque. L'APES a soutenu le projet de l'association les Saprophytes de concevoir et mettre à disposition une boussole pour autoévaluer ses projets au regard de la production local, utile, solidaire et soutenable.*
|
||||
|
||||
## Pouvez-vous commencer par une présentation des Saprohytes ? ##
|
||||
|
||||
Nous sommes un collectif dans le Nord qui accompagne les collectivités dans la conception et l'autoconstruction d'espaces publics, nous sommes amenés à construire des espaces et des outils localement.
|
||||
|
||||
Qu'est-ce qui vous a poussé à faire une boussole 'production locale, utile, solidaire et soutenable'
|
||||
|
||||
Nous nous posions des questions sur le monde d'après. Nos échanges ont abouti à une idée, celle de travailler sur la production locale pour qu'elle soit utile, solidaire et soutenable.
|
||||
|
||||
Il nous a semblé pertinent de commencer par la construction d'un référentiel pour aider les projets à s'autoévaluer. Nous avons identifiés 10 catégories.
|
||||
|
||||
Ce référentiel a été présenté à plusieurs personnes. Nous avions d'abord imaginé garder une version très manuelle. Cet outil a été reconnue comme étant utile pour d'autres, nous avons obtenus un financement de la région. Ainsi, aujourd'hui, il existe une version numérique.
|
||||
|
||||
Aujourd'hui, chaque projet peut s'autoévaluer sur les 10 catégories. Nous avons déterminés des questions pour aider à l'évaluation, mais les projets peuvent s'approprier la boussole et modifier les questions pour qu'elles soient plus adaptées. Ainsi, ce n'est pas un outil qui permet de se comparer entre structure, mais plutôt d'évaluer sa structure dans le temps.
|
||||
|
||||
Lors de ce projet, une vigilance a été apportée au respect des bonnes pratiques d'écoconception et d'accessibilité. Qu'en avez vous retenu ?
|
||||
|
||||
Melia : Au début, je pensais que nous devrions être vigilant au stockage des données. Finalement, j'ai compris que ce n'était pas le levier principal pour réduire les impacts environnementaux. Nous avons principalement été vigilant au bon fonctionnement de la boussole sur du matériel ancien.
|
||||
|
||||
|
||||
## Est-ce que cela vous a demandé un effort particulier ?##
|
||||
|
||||
Pascal: Je n'ai pas eu la perception de travailler différemment. Cela s'est fait naturellement. Tout s'est fait avec une efficacité incroyable.
|
||||
|
||||
Finalement en se posant les bonnes questions dès le cadrage et en réduisant le périmètre au maximum, la phase de développement a été réduite.
|
||||
|
||||
## Le projet est sous licence Open Source, quelles ont été vos motivations à cela ? ##
|
||||
|
||||
Par principe nous ne sommes que sur des logiciles libres, nous n'avons même pas réfléchi à le rendre propriétaire.
|
||||
Le fait de savoir que ça peut être réutilisé nous permet d'espérer une mutualisation et donc une réduction des impacts environnementaux.
|
||||
|
||||
Par ailleurs, la boussole a vu le jour grâce à des fincements publics, donc autant éviter de multiplier les financements pour des projets similaires.
|
||||
|
||||
## Si vous deviez donner un conseil à une organisation qui souhaite mettre en place un projet au service des communs et responsable, quel serait-il ? ##
|
||||
|
||||
Melia : J'ai été amabassadrice sur le projet sans réellement savoir ce que cela impliquait. J'avais mal estimé le temps que cela me prendrait, mais j'ai aimé m'impliquer de bout en bout. La coconstruction du contenu a été essentielle. Il ne faut pas sous estimer le temps que cela peut prendre.
|
||||
|
||||
Pascal : Sur ce projet, nous n'avons pas respecté une méthodologie à la lettre. Il me semble que l'essentiel c'est d'avancer pas à pas.
|
||||
|
||||
Olivia : J'ai bien aimé le partenariat avec IT's on us, j'ai appris plein de choses sur le fond, notamment sur l'écoconception. Il me semble qu'il est important de trouver un partenaire avec qui on arrive à se dire les choses avec bienveillance.
|
||||
|
||||
|
||||
Le collectif IT's on us vous accompagne dans [la conception et la réalisation de vos projets à impacts positifs](https://www.itsonus.fr/nos_services/soutenir_developpement_durable/), de bout en bout. Nous veillons au respect des bonnes pratiques permettant de réduire les impacts sociaux et environnementaux négatifs. Parlons-en !
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
title: "Guide d'accessibilité pour développeur·euse web : débuter avec un lecteur d'écran sur une page web"
|
||||
description : Quelques configurations et commandes utiles à connaître pour quiconque souhaite se familiariser avec un lecteur d'écran
|
||||
date: 2024-04-23
|
||||
tags:
|
||||
- accessibilité
|
||||
authors:
|
||||
- Rémi Doolaeghe
|
||||
draft: false
|
||||
layout: article.njk
|
||||
---
|
||||
|
||||
En tant que développeur·euse web, quand on débute en accessibilité, on est rapidement confronté au besoin de pouvoir se plonger en condition réelle. Se mettre à la place de la personne qui a besoin d'un service accessible reste un bon moyen de mettre en place les bonnes conditions d'utilisabilité.
|
||||
|
||||
Parmi le panel d'outils à connaître, le lecteur d'écran est une des solutions utilisées par les personnes en situation de handicap. Mais voilà, la prise en main de ce genre d'outil n'est pas des plus évidentes, et peut même parfois rebuter une personne motivée.
|
||||
|
||||
Un lecteur d'écran est une application capable de restituer le contenu d'une page web (ou toute application d'ailleurs) via une voix synthétique, en s'appuyant sur la structure de la page, pour permettre à une personne en situation de handicap (majoritairement visuel, mais aussi moteur, auditif, cognitif...) de pouvoir comprendre comment l'information est organisée. L'outil permet également de fournir une aide pour interagir avec la page.
|
||||
|
||||
Oui mais voilà : au premier abord, un lecteur d'écran semble produire un flot ininterrompu de paroles de façon incontrôlable, et pourrait en rebuter plus d'un. Je suis passé par cette phase où le lecteur d'écran était une sorte de monstre métamorphe difficile à dompter. Et pourtant, il suffit de pas grand chose pour commencer à comprendre comment s'en servir basiquement, et faire déjà de belles avancées.
|
||||
|
||||
Les quelques conseils qui vont suivre ne prennent que peu de temps à mettre en place, mais devraient déjà changer largement la façon dont vous utilisez le lecteur d'écran. Ce guide est loin d'être exhaustif, mais vous aurez quelques bases utiles pour son utilisation dans la vie quotidienne en tant que producteur de service numérique.
|
||||
|
||||
Cet article se focalise sur NVDA qui est mon outil du quotidien. Il fait généralement partie des lecteurs recommandés, mais n'est pas le seul. Je vais sauter la phase d'installation qui ne devrait pas poser trop de problèmes, et me focaliser sur son utilisation. Je vais également essentiellement me concentrer sur l'utilisation de NVDA dans le cadre d'une page web, bien que l'outil soit capable de bien plus que ça.
|
||||
|
||||
Vouloir tester une page web avec NVDA est une bonne chose. Mais lorsqu'on n'a pas l'habitude de s'en servir, la tâche peut se révéler ardue. Voici donc quelques conseils pour vous aider à rendre l'outil plus facile d'utilisation avant même de se lancer dans le grand bain.
|
||||
|
||||
## Activer la mise en surbrillance du focus
|
||||
|
||||
Quiconque a déjà lancé un lecteur d’écran sans y être habitué·e peut se retrouver rapidement perdu·e sans savoir exactement où le lecteur d’écran en est dans la page. Lorsqu’on n’a pas de handicap visuel, autant profiter des capacités supplémentaires de l’outil pour permettre de mieux s’y retrouver.
|
||||
|
||||
Il est possible de configurer NVDA pour qu’il mette en exergue (via un encadrement coloré) différents types de focus. Ces options se trouvent dans les préférences de NVDA. Pour y accéder, lancez NVDA. Par défaut, il va se retrouver minimisé dans les applications masquées sur Windows (sur Mac, je ne saurais pas dire) :
|
||||
|
||||
|
||||
|
||||
Applications en tâche de fond
|
||||
|
||||
Cliquez sur l’icône NVDA, puis sur le menu **Préférences**, puis sur **Paramètres…**
|
||||
|
||||
Dans la fenêtre qui s’ouvre, allez ensuite dans la section **Vision**, comme suit :
|
||||
|
||||
|
||||
|
||||
Fenêtre de configuration de NVDA pour l’activation des options de focus
|
||||
|
||||
Je recommande de cocher ces options, qui ont les effets suivants :
|
||||
|
||||
- **Mettre en évidence le focus système** : NVDA ajoute une bordure en pointillé bleu autour de l’élément qui a actuellement le focus système. Dans le cadre de la navigation web, le focus système est le focus qui est généralement posé sur les éléments nativement focusable de la page (boutons, liens, éléments de formulaire…).
|
||||
- **Mettre en évidence l’objet navigateur** : NVDA ajoute une bordure rose autour de l’élément qui a actuellement le focus NVDA. Le focus NVDA se pose sur l’élément que NVDA est actuellement en train de vocaliser, ou celui sur lequel il s’est arrêté. Tout élément peut recevoir ce focus, et non uniquement les éléments focusables comme pour le focus système. La façon de déplacer le focus NVDA sera décrite plus tard dans l’article.
|
||||
- **Mettre en évidence le curseur du mode navigation** : NVDA ajoute une bordure jaune autour du première caractère du bloc ou partie de bloc qu’il est en train de vocaliser. Ce curseur peut être utile lorsque NVDA est en train de vocaliser un long paragraphe. Par défaut, NVDA ne lit pas tout le paragraphe d’un coup, mais va le découper en morceaux. Ce curseur indique le début du morceau qu’il est en train de vocaliser ou qui a le focus NVDA.
|
||||
|
||||
Avec tous ces focus actif, outre le beau sapin de Noël que ça produit, vous avez maintenant une meilleure compréhension de l’endroit où se trouve le focus de NVDA.
|
||||
|
||||
## Journal de lecture
|
||||
|
||||
Le journal de lecture est une fenêtre complémentaire qui retranscrit tout ce que la restitution vocalise. Cet outil permet notamment de mieux comprendre ce qui est dit, et de garder une trace de ce qui s’est passé. C’est notamment pratique pour une personne pas encore habituée à la façon dont les éléments sont restitués à l’oral par le lecteur d’écran.
|
||||
|
||||
A noter que l’exemple ci-dessous est un peu brouillon à cause de l’interférence avec l’outil de capture d’écran.
|
||||
|
||||
|
||||
|
||||
Démonstration de la visionneuse de parole sur une page de site e-commerce pour un casque audio
|
||||
|
||||
Pour activer le journal de lecture, cliquez sur NVDA dans les applications masquées (comme pour l’ouverture des paramètres du paragraphe sur le focus), puis **Outils**, puis **Visionneuse de parole**.
|
||||
|
||||
## Vitesse de vocalisation
|
||||
|
||||
Une alternative au journal de vocalisation est de réduire la vitesse de la vocalisation. En effet, en jouant sur la vitesse de prononciation, notamment en la ralentissant, il est plus facile de comprendre ce qui est dit sans avoir à se reposer sur une retranscription écrite, qui peut ne pas être toujours pratique à utiliser dans certains contextes.
|
||||
|
||||
Pour jouer sur la vitesse de la vocalisation, cliquez sur NVDA dans les applications masquées (comme précédemment), puis **Préférences**, puis **Paramètres**, puis **Parole**.
|
||||
|
||||
|
||||
|
||||
Une fois dans cette fenêtre, il ne reste plus qu'à jouer avec le slider correspondant à l'étiquette **Débit**.
|
||||
|
||||
## Prendre le contrôle de la vocalisation
|
||||
|
||||
Maintenant que vous êtes doté·e du bagage utile, il est temps de ne plus subir le lecteur d’écran.
|
||||
|
||||
Par défaut, le lecteur d’écran commencera à vocaliser dès que le contexte change. Par exemple lorsque vous passez d’un onglet à un autre dans votre navigateur, ou que vous changez d’application au premier plan, le lecteur d’écran restituera vocalement ce qui se passe. Cela a pour conséquence qu’il pourrait vous donner l’impression de ne jamais vous laisser en paix. C’est ici qu’interviennent les deux premières commandes à connaître.
|
||||
|
||||
### Pause/Lecture
|
||||
|
||||
Pour mettre en pause une vocalisation en cours, un appui sur la touche **Shift** fera l’affaire. Cette touche agit comme un bouton pause d’une télécommande. Si vous rappuyez sur **Shift**, la vocalisation reprend exactement là où elle en était (même si elle était en plein milieu d’un mot).
|
||||
|
||||
### Stop
|
||||
|
||||
Pour interrompre définitivement une vocalisation en cours, il faudra presser la touche **Ctrl**. La différence avec la pause est qu’il est impossible de reprendre la vocalisation. Cette touche joue le rôle d’un stop. Il faudra ensuite utiliser les commandes de navigation pour relancer une vocalisation.
|
||||
|
||||
Jusqu’ici, on aura appris à pouvoir ne pas subir la vocalisation en étant capable de la démarrer ou l’interrompre. Mais il manque encore la capacité de pouvoir naviguer activement vers les éléments désirés.
|
||||
|
||||
## Naviguer avec le lecteur d’écran
|
||||
|
||||
Avec simplement quelques touches supplémentaires, il devient possible de pouvoir se déplacer à la demande dans la page, de façon linéaire (en parcourant les éléments séquentiellement, les uns après les autres).
|
||||
|
||||
Naturellement, il est possible de laisser le lecteur restituer toute la page, du début à la fin. Mais on se retrouve rapidement à manquer de finesse, surtout s’il faut systématiquement repartir du début de la page pour vocaliser un éléments spécifique qui se trouve en plein milieu du contenu. C’est ici qu’interviennent les quelques touches de navigation basique.
|
||||
|
||||
### Touche NVDA
|
||||
|
||||
Avant d’entrer dans le vif du sujet, il est nécessaire de connaître ce qu’on appelle les **touches NVDA.** Ces touches peuvent être configurées dans l’interface de NVDA dans **Préférences**, **Paramètres, Clavier**.
|
||||
|
||||
|
||||
|
||||
Fenêtre de paramètres pour configurer les touches NVDA du clavier
|
||||
|
||||
Lors de l’appui sur une de ces touches, NVDA considère que vous appuyez sur une **touche NVDA.** Cela servira à exécuter certains raccourcis au clavier.
|
||||
|
||||
Passons maintenant aux commandes concrètes pour naviguer activement dans la page.
|
||||
|
||||
### Lire l’élément suivant
|
||||
|
||||
Un appui sur la touche **flèche du bas** interrompra la vocalisation en cours (s’il y en a une), et déplacera le focus NVDA vers le prochain élément de la page. Cet élément n’est pas nécessairement activable. Il peut s’agir d’un paragraphe, par exemple. Cela peut être pratique pour faire du pas à pas dans la vocalisation.
|
||||
|
||||
### Lire l’élément précédent
|
||||
|
||||
Un appui sur la touche **flèche du haut** fera l’inverse, à savoir déplacera le focus vers l’élément précédent dans la page
|
||||
|
||||
### Redémarrer la lecture de la page à partir du focus
|
||||
|
||||
En combinant un appui sur une **touche NVDA** et la **flèche du bas**, la vocalisation reprend depuis l’élément qui a le focus. Il existe quelques subtilités par rapport à la touche pause/lecture **Shift**, mais ce n’est pas essentiel à connaître pour débuter. La vocalisation finira de restituer la page jusqu’à sa fin, et tant que vous ne l’interromprez pas.
|
||||
|
||||
### Relire l’élément courant
|
||||
|
||||
En appuyant sur une **touche NVDA** et la **flèche du haut**, le lecteur d’écran vocalise à nouveau l’élément qui détient actuellement le focus. Cela permet notamment de lui faire répéter ce qui est focalisé.
|
||||
|
||||
## Conclusion
|
||||
|
||||
Avec ces quelques configurations et touches, il vous sera désormais possible de vous familiariser avec les bases de NVDA. Bien qu’il reste le défi de bien comprendre ce qui est vocalisé (et qui peut parfois apparaître quelque peu cryptique quand on débute), vous serez maintenant en capacité d’être le pilote de votre lecteur d’écran plutôt que de le subir.
|
||||
|
||||
Il existe bien d’autres commandes, mais celles-ci devraient pouvoir couvrir vos besoins essentiels en terme d’utilisation.
|
||||
|
||||
Si vous souhaitez aller plus loin, la [documentation officielle de NVDA](https://www.nvda.fr/doc/userGuide.html) devrait répondre à toutes vos interrogations.
|
||||
@@ -11,6 +11,7 @@ authors:
|
||||
- Anthony Lecerf
|
||||
draft: false
|
||||
layout: article.njk
|
||||
toc: true
|
||||
---
|
||||
Le numérique est au cœur de notre quotidien et bouleverse nos modes de vie et de travail. Il a également des effets
|
||||
négatifs involontaires, entre autres sur notre environnement, qu’il faut absolument chercher à réduire car le numérique
|
||||
@@ -215,3 +216,7 @@ Les membres du collectif IT’s on us [accompagnent les organisations](https://w
|
||||
- é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)
|
||||
|
||||
17
src/_pages/blog/draft.njk
Normal file
17
src/_pages/blog/draft.njk
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
layout: home.njk
|
||||
---
|
||||
<div class="main-content">
|
||||
<h1>Articles en construction</h1>
|
||||
|
||||
{% set articlesList = collections.articles | onlyDraft %}
|
||||
{% if articlesList.length > 0 %}
|
||||
{% include "articlesList.njk" %}
|
||||
{% else %}
|
||||
<p>Tous les articles sont en ligne ! Retournez à <a href="/blog/">l'accueil</a> pour les consulter.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
{% include "tagslist.njk" %}
|
||||
{% include "other_links.njk" %}
|
||||
</aside>
|
||||
@@ -10,7 +10,8 @@ eleventyNavigation:
|
||||
<nav>
|
||||
{% include "tagslist.njk" %}
|
||||
</nav>
|
||||
{% set articlesList = collections.articles | filterDraft | head(-5) %}
|
||||
{% set articlesList = collections.articles | filterDraft | head(-6) %}
|
||||
{% set showMore = true %}
|
||||
{% include "articlesList.njk" %}
|
||||
</div>
|
||||
<aside class="right-side">
|
||||
|
||||
@@ -75,16 +75,21 @@ main {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
align-self: flex-start;
|
||||
width: 320px;
|
||||
}
|
||||
.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: 0.7rem;
|
||||
padding: 1.625rem 0.7rem;
|
||||
}
|
||||
|
||||
.table-of-contents ul {
|
||||
@@ -97,9 +102,8 @@ main {
|
||||
}
|
||||
|
||||
li {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: 17px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
@@ -111,15 +115,32 @@ main {
|
||||
}
|
||||
}
|
||||
}
|
||||
li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-of-contents > ul ul {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.table-of-contents > ul ul li {
|
||||
margin-left: 0.7rem;
|
||||
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;
|
||||
}
|
||||
@@ -174,7 +195,6 @@ h2 {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
letter-spacing: .02rem;
|
||||
line-height: 1.7rem;
|
||||
margin: 3rem 0 2rem;
|
||||
}
|
||||
|
||||
@@ -288,12 +308,11 @@ figure figcaption {
|
||||
|
||||
/*!* Posts list *!*/
|
||||
.post-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
.post-list-item {
|
||||
max-width: 430px;
|
||||
padding: 2rem;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
|
||||
@@ -450,6 +469,9 @@ h1 + .post-metadata {
|
||||
.footer-center {
|
||||
flex: 0 60%;
|
||||
text-align: center;
|
||||
> p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Reference in New Issue
Block a user