├── .DS_Store ├── .github └── workflows │ └── pandoc.yml ├── .gitlab-ci.yml ├── CHANGELOG ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── LICENSE_FR.md ├── README.md ├── architecture ├── 000_architecture_AR-00.md ├── 001_architecture_AR-01.md ├── 002_architecture_AR-02.md ├── 003_architecture_AR-03.md ├── 004_architecture_AR-04.md ├── 005_architecture_AR-05.md ├── 006_architecture_AR-06.md ├── 007_architecture_AR-07.md ├── 008_architecture_AR-08.md ├── 009_architecture_AR-09.md ├── 010_architecture_AR-10.md ├── 011_architecture_AR-11.md ├── 012_architecture_AR-12.md ├── 013_architecture_AR-13.md ├── 014_architecture_AR-14.md ├── 015_architecture_AR-15.md ├── 016_architecture_AR-16.md ├── 017_architecture_AR-17.md ├── 018_architecture_AR-18.md ├── 019_architecture_AR-19.md ├── 020_architecture_AR-20.md ├── 021_architecture_AR-21.md └── img │ └── exemple_architecture.jpg ├── backgrounds └── vincent2.jpg ├── build ├── build.sh ├── img │ └── Republique-francaise-logo.jpg ├── md2all.sh ├── styling │ ├── epub-styling.css │ ├── fonts │ │ ├── poppins-latin-400.woff2 │ │ ├── poppins-latin-500.woff2 │ │ ├── poppins-latin-600.woff2 │ │ ├── poppins-latin-700.woff2 │ │ ├── poppins-latin-ext-400.woff2 │ │ ├── poppins-latin-ext-500.woff2 │ │ ├── poppins-latin-ext-600.woff2 │ │ └── poppins-latin-ext-700.woff2 │ ├── html-lazy-images.lua │ ├── html-nav.js │ ├── html-open-links-in-new-tab.lua │ ├── html-styling.css │ ├── html-template.html │ ├── pagebreak.lua │ ├── pdf-center-images.lua │ ├── pdf-print-front-template.tex │ ├── pdf-print-latex-options.sty │ ├── pdf-print-merge.tex │ ├── pdf-standalone-front-template.tex │ ├── pdf-standalone-latex-options.sty │ ├── pdf-standalone-merge.tex │ └── pdf-table-size.lua └── toto.pdf ├── code ├── 000_code_CO-00.md ├── 001_code_CO-01.md ├── 002_code_CO-02.md ├── 003_code_CO-03.md ├── 004_code_CO-04.md ├── 005_code_CO-05.md ├── 006_code_CO-06.md ├── 007_code_CO-07.md ├── 008_code_CO-08.md ├── 009_code_CO-09.md ├── 010_code_CO-10.md ├── 011_code_CO-11.md ├── 012_code_CO-12.md ├── 013_code_CO-13.md ├── 014_code_CO-14.md ├── 015_code_CO-15.md ├── 016_code_CO-16.md ├── 017_code_CO-17.md ├── 018_code_CO-18.md ├── 019_code_CO-19.md ├── 020_code_CO-20.md └── 021_code_CO-21.md ├── img ├── .DS_Store ├── application_de_la_demarche.png ├── composant_numerique.avif ├── eco_conception.png ├── ecoconception_des_services_numeriques.avif ├── exemple_d_utilisation_du_DOM.avif ├── fonctionalites.png ├── intro_004_lazy_loading.avif ├── intro_004_lazy_loading.png ├── message_information.png ├── parcours_utilisateur.png ├── personas.png ├── pilotage.png ├── responsable.png ├── seo.png └── service_tiers.png ├── introduction ├── 000_intro_INT-00.md ├── 001_intro_INT-01.md ├── 002_intro_INT-02.md ├── 003_intro_INT-03.md ├── 004_intro_INT-04.md ├── 005_intro_INT-05.md ├── 006_intro_INT-06.md ├── 007_intro_INT-07.md └── img │ ├── composant_numerique.avif │ ├── composant_numerique.jpg │ ├── convert.sh │ ├── eco_conception.jpg │ ├── eco_conception.png │ ├── ecoconception_des_services_numeriques.avif │ ├── ecoconception_des_services_numeriques.jpg │ ├── intro_004_lazy_loading.avif │ └── intro_004_lazy_loading.jpg ├── pandoc-assets ├── fonts │ ├── Marianne-Bold.otf │ ├── Marianne-BoldItalic.otf │ ├── Marianne-ExtraBold.otf │ ├── Marianne-ExtraBoldItalic.otf │ ├── Marianne-Light.otf │ ├── Marianne-LightItalic.otf │ ├── Marianne-Medium.otf │ ├── Marianne-MediumItalic.otf │ ├── Marianne-Regular.otf │ ├── Marianne-RegularItalic.otf │ ├── Marianne-Thin.otf │ └── Marianne-ThinItalic.otf ├── meta.yml └── templates │ ├── eisvogel.latex │ └── eisvogel.tex ├── strategie ├── 000_strategie_ST-00.md ├── 001_strategie_ST-01.md ├── 002_strategie_ST-02.md ├── 003_strategie_ST-03.md ├── 004_strategie_ST-04.md ├── 005_strategie_ST-05.md ├── 006_strategie_ST-06.md ├── 007_strategie_ST-07.md ├── 008_strategie_ST-08.md ├── 009_strategie_ST-09.md ├── 010_strategie_ST-10.md ├── 011_strategie_ST-11.md ├── 012_strategie_ST-12.md ├── 013_strategie_ST-13.md ├── 014_strategie_ST-14.md ├── 015_strategie_ST-15.md ├── 016_strategie_ST-16.md ├── 017_strategie_ST-17.md ├── 018_strategie_ST-18.md ├── 019_strategie_ST-19.md └── img │ └── exemple_d_utilisation_du_DOM.jpg ├── ui ├── 000_user_interface_UI-00.md ├── 001_user_interface_UI-01.md ├── 002_user_interface_UI-02.md ├── 003_user_interface_UI-03.md ├── 004_user_interface_UI-04.md ├── 005_user_interface_UI-05.md ├── 006_user_interface_UI-06.md ├── 007_user_interface_UI-07.md ├── 008_user_interface_UI-08.md ├── 009_user_interface_UI-09.md ├── 010_user_interface_UI-10.md ├── 011_user_interface_UI-11.md ├── 012_user_interface_UI-12.md ├── 013_user_interface_UI-13.md ├── 014_user_interface_UI-14.md ├── 015_user_interface_UI-15.md ├── 016_user_interface_UI-16.md ├── 017_user_interface_UI-17.md ├── 018_user_interface_UI-18.md ├── 019_user_interface_UI-19.md ├── 020_user_interface_UI-20.md ├── 021_user_interface_UI-21.md ├── 022_user_interface_UI-22.md ├── 023_user_interface_UI-23.md ├── 024_user_interface_UI-24.md ├── 025_user_interface_UI-25.md ├── 026_user_interface_UI-26.md ├── 027_user_interface_UI-27.md └── img │ ├── Image_réduite_opera.jpg │ └── image_originale_opera.png └── ux ├── 000_user_experience_UX-00.md ├── 001_user_experience_UX-01.md ├── 002_user_experience_UX-02.md ├── 003_user_experience_UX-03.md ├── 004_user_experience_UX-04.md ├── 005_user_experience_UX-05.md ├── 006_user_experience_UX-06.md ├── 007_user_experience_UX-07.md ├── 008_user_experience_UX-08.md ├── 009_user_experience_UX-09.md ├── 010.user_experience_UX-10.md ├── 011_user_experience_UX-11.md ├── 012_user_experience_UX-12.md ├── 013_user_experience_UX-13.md ├── 014_user_experience_UX-14.md └── 015_user_experience_UX-15.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/.DS_Store -------------------------------------------------------------------------------- /.github/workflows/pandoc.yml: -------------------------------------------------------------------------------- 1 | name: Generate pdf 2 | 3 | on: push 4 | 5 | jobs: 6 | convert_via_pandoc: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v4 10 | 11 | - name: create file list 12 | id: files_list 13 | run: | 14 | echo "files=$(printf '%s ' ./introduction/*.md && printf '%s ' ./strategie/*.md && printf '%s ' ./ux/*.md && printf '%s ' ./ui/*.md && printf '%s ' ./code/*.md && printf '%s ' ./architecture/*.md)" > "$GITHUB_OUTPUT" 15 | mkdir output 16 | 17 | - uses: docker://pandoc/extra 18 | with: 19 | # args: --output=output/Referentiel-ECOCONCEPTION.pdf --metadata-file pandoc-assets/meta.yml --pdf-engine xelatex --metadata-file pandoc-assets/meta.yml --template pandoc-assets/templates/eisvogel.tex --from markdown+yaml_metadata_block+raw_html+rebase_relative_paths output/introduction/*.md output/strategie/*.md output/ux/*.md output/ui/*.md output/code/*.md output/architecture/*.md 20 | # args: --output=output/Referentiel-ECOCONCEPTION.pdf --metadata-file pandoc-assets/meta.yml --pdf-engine xelatex --metadata-file pandoc-assets/meta.yml --template pandoc-assets/templates/eisvogel.tex --from markdown+yaml_metadata_block+raw_html+rebase_relative_paths introduction/001_intro_INT-01.md 21 | args: --output=output/Referentiel-ECOCONCEPTION.pdf --metadata-file pandoc-assets/meta.yml --pdf-engine xelatex --metadata-file pandoc-assets/meta.yml --template pandoc-assets/templates/eisvogel.tex --from markdown+yaml_metadata_block+raw_html+rebase_relative_paths ${{ steps.files_list.outputs.files}} 22 | 23 | - uses: actions/upload-artifact@v4 24 | with: 25 | name: output 26 | path: output 27 | -------------------------------------------------------------------------------- /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | default: 2 | tags: 3 | - $NOM_EQUIPE 4 | interruptible: true 5 | image: 6 | name: pandoc/extra 7 | entrypoint: ["/bin/sh", "-c"] 8 | stages: 9 | - build 10 | - deploy 11 | 12 | build: 13 | stage: build 14 | script: 15 | - pandoc --pdf-engine xelatex --metadata-file pandoc-assets/meta.yml --template pandoc-assets/templates/eisvogel.tex --from markdown+yaml_metadata_block+raw_html+rebase_relative_paths --output=Referentiel-ECOCONCEPTION.pdf introduction/*.md strategie/*.md ux/*.md ui/*.md code/*.md architecture/*.md 16 | artifacts: 17 | paths: 18 | - Referentiel-ECOCONCEPTION.pdf 19 | 20 | pages: 21 | stage: deploy 22 | tags: 23 | - gitlab-pages 24 | script: 25 | - echo "publication" 26 | - mkdir public 27 | - cp Referentiel-ECOCONCEPTION.pdf public 28 | - echo "

Référentiel d'éco-conception

Référentiel d'écoconception" > public/index.html 29 | artifacts: 30 | paths: 31 | - public 32 | -------------------------------------------------------------------------------- /CHANGELOG: -------------------------------------------------------------------------------- 1 | 2024-07-31 : version initiale intégrant l'introduction du référentiel d'écoconception -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Guide de Contribution 2 | 3 | Merci de votre intérêt pour contribuer à ce projet ! Voici quelques lignes directrices pour vous aider à démarrer. 4 | 5 | ## Comment Contribuer 6 | 7 | 1. **Fork** ce repository. 8 | 2. **Clone** le fork sur votre machine locale : 9 | 10 | ```bash 11 | git clone https://git-scm.pole-emploi.intra/parasit/ecoconception/referentiel-opensource 12 | ``` 13 | 14 | 3. **Créez une nouvelle branche** pour votre contribution : 15 | 16 | ```bash 17 | git checkout -b nom-de-votre-branche 18 | ``` 19 | 20 | 4. Faites vos modifications et **committez** les changements : 21 | 22 | ```bash 23 | git commit -m "Description des modifications" 24 | ``` 25 | 26 | 5. **Pushez** vos modifications sur votre fork : 27 | 28 | ```bash 29 | git push origin nom-de-votre-branche 30 | ``` 31 | 32 | 6. **Créez une merge request** depuis votre branche vers la branche principale (main) de ce repository. 33 | 34 | ## Merge Requests 35 | 36 | Lors de la création d'une merge request, veuillez vous assurer de : 37 | 38 | 1. Donner une description claire de vos modifications et de leur but. 39 | 2. Référencer les issues pertinentes en utilisant des mots-clés comme fixes #numéro-d'issue. 40 | 3. Assurer que votre branche est à jour avec la branche principale (main) : 41 | 42 | ```bash 43 | git fetch origin 44 | git checkout main 45 | git merge origin/main 46 | git checkout nom-de-votre-branche 47 | git rebase main 48 | ``` 49 | 50 | 4. Résoudre tous les conflits de fusion qui pourraient survenir. 51 | 5. Passer tous les tests existants et ajouter des tests pour les nouvelles fonctionnalités. 52 | 53 | ## Normes de contribution 54 | 55 | - Respecter les templates du projet 56 | - Suivez les conventions de nommage du projet. 57 | - Écrivez des commentaires clairs et concis. 58 | - Verifier votre contribution avant de la soumettre. 59 | 60 | ## Problèmes (Issues) 61 | 62 | Si vous rencontrez un bug ou avez une suggestion d'amélioration, veuillez ouvrir un ticket dans la section Issues. 63 | 64 | ## Examen des contribution (Review) 65 | 66 | Toutes les contributions feront l'objet d'un examen par les mainteneurs du projet. Soyez prêt à apporter des modifications en fonction des retours. 67 | 68 | ## Communication 69 | 70 | Si vous avez des questions ou avez besoin de discuter de quelque chose, vous pouvez nous contacter via la section Discussions ou par email à . 71 | 72 | ## Licence 73 | 74 | En contribuant à ce projet, vous acceptez que vos contributions soient sous la même licence que le projet. Voir le fichier LICENSE pour plus d'informations. 75 | 76 | Merci encore pour votre aide et vos contributions ! 77 | -------------------------------------------------------------------------------- /architecture/000_architecture_AR-00.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-00 3 | page-background: backgrounds/vincent2.jpg 4 | --- 5 | ## ARCHITECTURE 6 | 7 | Un service numérique est composé de plusieurs couches techniques (design, code frontend, code backend, etc.). Dans ce chapitre, l’architecture se définit comme l’articulation des composants entre ces différentes couches techniques. 8 | L’architecture se décline en grands principes, lignes directrices qui structurent l’organisation globale du service numérique. Elle est composée de données qui transitent entre les composants applicatifs via le réseau. Le tout repose sur une infrastructure matérielle (serveurs, unités de stockage, équipements de réseau et de télécommunication, etc.). 9 | 10 | ![Image exemple d'architecture](img/exemple_architecture.jpg) 11 | *Exemple d'architecture* 12 | 13 | L’objectif des bonnes pratiques d’architecture est, avant tout, de : 14 | 15 | - **Rationnaliser et rallonger la durée de vie de l’infrastructure matérielle**, pour limiter l’impact environnemental associé à la fabrication de nouveaux équipements. 16 | - **Minimiser le volume de données et optimiser leur échange**, pour limiter les impacts liés à leur transport, transformation, stockage, etc. 17 | 18 | Sous familles traitées dans ce chapitre : 19 | 20 | - Principes d’architecture 21 | - Données 22 | - Réseau 23 | 24 | | AR-00 | BONNES PRATIQUES TRAITEES DANS CE CHAPITRE | 25 | | ----- | ------------------------------------------------------------------------------------------------------ | 26 | | AR-01 | Cartographier et classifier les données  | 27 | | AR-02 | Vérifier l'existence des données avant de créer une structure de données ad hoc | 28 | | AR-03 | Réutiliser les datasets | 29 | | AR-04 | Définir une politique de cycle de vie des données et l'appliquer | 30 | | AR-05 | Optimiser la structure du modèle de données | 31 | | AR-06 | Optimiser les requêtes et les accès aux données nécessaires aux stricts nécessaire | 32 | | AR-07 | Utiliser un format de données adapté | 33 | | AR-08 | Utiliser un système de stockage adapté au besoin | 34 | | AR-09 | Utiliser des mécanismes de déduplication des données | 35 | | AR-10 | Centraliser les données de log, de trace et de monitoring | 36 | | AR-11 | Privilégier une architecture cloud native | 37 | | AR-12 | Opter pour une architecture capable de passer à l'échelle automatiquement | 38 | | AR-13 | Utiliser les bons outils hardware | 39 | | AR-14 | Modifier le workload pour qu’il fonctionne avec des CPU et quantités de mémoire différent | 40 | | AR-15 | Maximiser l'utilisation des caches HTTP | 41 | | AR-16 | Compresser les flux HTTP | 42 | | AR-17 | Protocole de transport | 43 | | AR-18 | Utiliser un protocole d'échange adapté au contenu transféré | 44 | | AR-19 | Limiter les données stockées | 45 | | AR-20 | Privilégier les technologies standard interopérables  | 46 | | AR-21 | Utiliser la CI/CD de manière responsable | 47 | -------------------------------------------------------------------------------- /architecture/001_architecture_AR-01.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-01 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Data steward / administrateur des données 6 | benefice: Environnement 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-01 - Cartographier et classifier les données 10 | 11 | ## Description 12 | 13 | La classification des données est une action de catégorisation des données, en fonction du type et du contenu du fichier. Elle permet notamment de définir comment une donnée va être exploitée (durée de vie, duplication, etc.) en fonction de la catégorie à laquelle elle appartient. 14 | La cartographie des données est une plateforme qui recense les données, leur origine et leur usage. Elle donne une vision globale et en temps réel des données d’une entreprise, permettant ainsi de faciliter leur gestion. 15 | La cartographie et la classification des données sont un support nécessaire pour assurer la protection des données personnelles et, plus généralement, elles permettent aux entreprises de maitriser leur patrimoine de données. 16 | 17 | ## Mise en œuvre 18 | 19 | En tant que Data steward / administrateur des données : 20 | 21 | - Je cartographie et classifie les données de mon service numérique : 22 | - Classer les données signifie catégoriser les données selon leur type et contenu pour définir leur utilisation, durée de vie, et duplication. 23 | - Cartographier les données signifie recenser les données, leur origine, et usage pour offrir une vision globale et en temps réel, facilitant la gestion. 24 | - Je consulte le catalogue de données pour eviter la duplication et je l'enrichie avec les données crées 25 | 26 | ## Tests d’acceptance 27 | 28 | - Il y a une utilisation du catalogue des données par toutes les parties prenantes 29 | 30 | - La classification des données est utilisée lors d’un cadrage de nouveau produit en fonction de la criticité des données qui pourront être utilisées 31 | -------------------------------------------------------------------------------- /architecture/002_architecture_AR-02.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-02 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Maitre d’ouvrage / chef de projet 6 | benefice: Environnement 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-02 - Vérifier l’existence des données avant de créer une structure de données ad hoc 10 | 11 | ## Description 12 | 13 | Lors de l’étape de conception d’un projet numérique, une structure de données ad hoc est souvent créée sans s’assurer que les données soient déjà disponibles par ailleurs. Cela induit une redondance de données et donc des impacts environnementaux supplémentaires qui auraient pu être évités en se questionnant sur la disponibilité ou non des données dans le panorama actuel. 14 | 15 | ## Mise en œuvre 16 | 17 | Si les données existent déjà dans le panorama actuel, il est préférable de les réutiliser. Avant de créer une structure de données de toutes pièces, il y a plusieurs façons de vérifier leur disponibilité : 18 | 19 | - L’équipe data doit consulter le catalogue de données. Il va offrir l’avantage de proposer une vue exhaustive des données du patrimoine de l’Etablissement, quelles que soient les sources. Il s’adosse à l’ensemble des dictionnaires de données (Lac, SISP…) pour apporter d’avantage d’information; ainsi qu’une approche sémantique, reflet des concepts métier manipulant ces données. Ainsi, la recherche de l’existence d’une donnée peut se faire simplement via le moteur de recherche qui intègre les objets tant applicatifs que fonctionnels et métier. Enfin, il permet d’identifier les points de contact, responsables des données. 20 | - Consulter les dictionnaires de données, d’une approche plus technique que le catalogue. 21 | - Questionner les architectes fonctionnels et applicatifs pour une approche organisationnelle des objets applicatifs. 22 | 23 | ## Tests d’acceptance 24 | 25 | La disponibilité des données a été vérifiée dans le dictionnaire de données, le catalogue de données ou auprès d’un architecte -------------------------------------------------------------------------------- /architecture/003_architecture_AR-03.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-03 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Maitre d’ouvrage / chef de projet 6 | benefice: Environnement 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-03 - Réutiliser les datasets 10 | 11 | ## Description 12 | 13 | Un dataset (ou jeu de données) est un « container » qui stocke des données, du code ainsi que la documentation associée et qui est décrit par des métadonnées. 14 | Souvent, les données nécessaires aux cas d’usages sont dupliquées dans des datasets. Or, différents cas d’usages peuvent nécessiter des données communes. Au lieu de recréer des datasets pour chaque cas d’usage et ainsi dupliquer les données, il faut réutiliser les datasets existants. La réutilisation de datasets peut concerner les datasets d’entrée d’un cas d’usage (CU) ou des datasets « enrichis » en cours de CU : 15 | 16 | - **Réutilisation de datasets d’entrée** 17 | Chaque cas d’usage est documenté par une fiche qui liste l’ensemble des tables nécessaires à sa réalisation. Ces CU sont passés en revue lors d'un Comité de Suivi des Cas d’Usage, qui peut détecter une adhérence entre des projets et ainsi les mettre en relation pour un partage des tables consommées en entrée. 18 | Afin d’éviter de nombreuses duplications et stockages inutiles, les tables du Datalake ne sont ni importées ni copiées, mais sont consultables en lecture. Seul le résultat des requêtes adressées est transporté et écrit dans le lac. 19 | 20 | - **Réutilisation de datasets « enrichis »** 21 | Dans un groupe de cas d’usages ayant un périmètre ou une finalité proche, l’un des CU peut avoir à utiliser un ou plusieurs dataset(s) généré(s) par un autre CU. Cette identification se fait souvent par connaissance de ces projets. 22 | Ces datasets peuvent aussi être facilement identifiables pour les CU accompagnés par le Datalab. En effet lors des formations, la fonction « Catalog » de Dataiku est mise en avant, permettant ainsi de visualiser l’ensemble des datasets des cas d’usage d’un groupe. 23 | Le partage de ces datasets est ensuite encadré afin de protéger et de sécuriser l’accès aux données. Ainsi, une demande doit être faite à l’équipe support aux dév du Datalab qui, une fois la légitimité vérifiée lors d’un CSCU, configure les accès à ces datasets. 24 | Au-delà du seul aspect de partage d’un dataset unique, le partage de datasets enrichis induit une économie liée aux autres datasets intermédiaires et aux traitements nécessaires à son obtention. 25 | A noter : la multiplication des datasets peut engendrer une redondance des données. 26 | 27 | ## Mise en œuvre 28 | 29 | En tant que MOA ou chef de projet, selon les cas : 30 | 31 | - Je documente les tables nécessaires à la réalisation d’un cas d’usage et je partage ces tables avec les projets ayant des adhérences identifiées en CSCU 32 | - Je vérifie via le catalogue de donnée l'existance ou non des datasets de mes CU 33 | 34 | ## Tests d’acceptance 35 | 36 | - Une fiche cas d’usage avec les tables consommées a été documentée pour revue CSCU 37 | - Les datasets produits ont été partagés avec les cas d’usage d’un même groupe 38 | - Les datasets existants des CU du groupe ont été vérifiés via le catalogue de donnée 39 | -------------------------------------------------------------------------------- /architecture/004_architecture_AR-04.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-04 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Architecte logiciel / Développeur / Métier 6 | benefice: Environnement 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-04 - Définir une politique de cycle de vie des données et l’appliquer 10 | 11 | ## Description 12 | 13 | Le cycle de vie d’une donnée correspond à l’enchainement des étapes par lesquelles va passer une donnée tout au long de son existence (de sa collecte / création à sa suppression). 14 | 15 | La réglementation RGPD actuelle impose de maîtriser la gestion des données pour certaines catégories (données personnelles encadrées par le RGPD). La gestion du cycle de vie des autres catégories de données n’est pas forcément maîtrisée par les entreprises. Ces données, sans délais de péremption, sont alors accumulées, ce qui contribue donc à un accroissement du volume de données, des volumes de sauvegardes, de ressources consommées pour accéder aux données. 16 | 17 | Les équipes doivent donc impérativement définir une politique de cycle de vie des données et l’appliquer. Cela implique notamment de définir une durée de conservation pour chaque catégorie de données. Des outils permettent d’automatiser la suppression des données. 18 | 19 | La gestion du cycle de vie des données peut être réalisée de la façon suivante : 20 | 21 | - Le métier définit des règles de conservation des données utilisées pour les cas d’usages 22 | - Les règles de conservation des données dans le Lac sont les mêmes que celles des cas d’usages métiers associés 23 | - Des outils sont mis en place afin de supprimer automatiquement les données une fois leur date de conservation expirée 24 | 25 | Cependant, le métier ne définit pas toujours les règles de conservation des données. 26 | 27 | ## Mise en œuvre 28 | 29 | En tant que collaborateur côté métier,  je définis des règles de conservation pour les données que j'ajoute/j'utilise dans le Lac de données. 30 | 31 | ## Tests d’acceptance 32 | 33 | Des règles de gestion du cycle de vie sont définies pour chaque catégorie de données -------------------------------------------------------------------------------- /architecture/005_architecture_AR-05.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-05 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Architecte logiciel / Développeur / Métier 6 | benefice: Environnement 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-05 - Optimiser la structure du modèle de données 10 | 11 | ## Description 12 | 13 | Un modèle de données décrit la manière dont sont représentées les données dans une base de données. La modélisation de données permet de comprendre les données et de faire les bons choix technologiques de stockage et de gestion de ces données (un système de gestion de base de données peut prendre en charge un ou plusieurs modèles de base de données). 14 | 15 | Un mauvais modèle de données complexifie fortement l’accès à la donnée, et de ce fait induit des problèmes de performances et affecte l’évolutivité du service numérique. Cela va à l’encontre des principes d’écoconception. 16 | 17 | ## Mise en œuvre 18 | 19 | En tant qu’architecte logiciel / développeur, l’équipe BDD m’accompagne dans la structuration du modèle de données. 20 | 21 | ## Tests d’acceptance 22 | 23 | La structure du modèle de données a été validée par l’équipe BDD. 24 | -------------------------------------------------------------------------------- /architecture/006_architecture_AR-06.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-06 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Architecte logiciel / Développeur / Ops produit 6 | benefice: Environnement 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-06 - Optimiser les requêtes et les accès aux données au strict nécessaire 10 | 11 | ## Description 12 | 13 | Les mauvaises performances d’une base de données peuvent par exemple être causées par : 14 | 15 | - Des requêtes mal rédigées (problème le plus récurrent) 16 | - Une mauvaise structure de données 17 | - Un problème d'indexation 18 | 19 | Or, de mauvaises performances induisent des surconsommations d’énergie et accélèrent l’obsolescence du matériel. 20 | 21 | ## Mise en œuvre 22 | 23 | En tant qu’architecte logiciel / développeur, je choisis une structure de modèle de données appropriée (cf fiche pratique AR-05). 24 | 25 | En tant qu’architecte logiciel / développeur, j’identifie les requêtes ayant un temps d’exécution important. Pour ces requêtes : 26 | 27 | - Je combine les requêtes pour lesquelles des données redondantes sont récupérées 28 | - Je permets le chargement progressif (lazy-load) des composants des requêtes 29 | 30 | L'optimisation manuelle des requêtes peut s'avérer difficile et fastidieuse, c'est pourquoi il peut s’avérer intéressant d’utiliser un optimiseur de requêtes  ou d’externaliser les efforts d'optimisation. 31 | 32 | En tant qu’architecte logiciel / développeur, je mène une opération de défragmentation de ma base de données (opération visant à réorganiser le stockage des données et permettant ainsi un accès plus rapide aux données) lorsque mes outils m’en indiquent la nécessité. 33 | 34 | En tant qu’Ops produit, je m'assure que les serveurs hébergeant les bases de données disposent à tout moment de suffisamment de ressources en vérifiant la charge CPU, la mémoire et l'espace disque des serveurs associés en cas de problèmes de performance. 35 | 36 | ## Tests d’acceptance 37 | 38 | Rien ne permet à date de valider la bonne forme d'une requête. 39 | Pour la partie lazy-loading, se référer à la fiche lazy-loading des images (fiche du référentiel numéro UI-01) 40 | -------------------------------------------------------------------------------- /architecture/008_architecture_AR-08.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-08 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Architecte logiciel / Développeur / Ops produit 6 | benefice: Environnement 7 | --- 8 | # AR-08 - Utiliser un système de stockage adapté au besoin 9 | 10 | ## Description 11 | 12 | Une base de données est un ensemble d'informations organisé de manière à être facilement accessible, géré et mis à jour. Elle est utilisée comme méthode de stockage, de gestion et de récupération de l’information. Il existe différents types de bases de données (relationnelle, orientée objets, NoSQL, cloud, etc.). Un système de gestion de base de données (SGBD) est un ensemble de logiciels permettant de manipuler le contenu des bases de données. 13 | Un mauvais choix de système de stockage peut entraîner des problèmes de performance, de maintenabilité, d’évolutivité, etc. Ainsi, dans le cadre de l’écoconception, il est essentiel de choisir le SGBD le plus performant et le plus adapté vis-à-vis du cas d’usage. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant qu’architecte logiciel / développeur, je me réfère à un outil d’aide au choix de l’équipe BDD pour choisir le système de stockage adapté. 18 | En cas de difficultés, l’équipe BDD m’accompagne dans ce choix. 19 | 20 | ## Tests d’acceptance 21 | 22 | Le choix du système de stockage a été réalisé selon les préconisations de l’outil d’aide au choix ou de l’équipe BDD directement. -------------------------------------------------------------------------------- /architecture/009_architecture_AR-09.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-09 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Architecte logiciel 6 | benefice: Environnement 7 | --- 8 | # AR-09 - Utiliser des mécanismes de déduplication des données 9 | 10 | ## Description 11 | 12 | La déduplication est une technique de stockage de données, consistant à factoriser des séquences de données identiques afin d'économiser l'espace utilisé. 13 | En effet : 14 | Chaque bloc de données entrant reçoit une valeur de hachage unique 15 | Si un nouveau bloc écrit sur le disque a la même valeur de hachage qu’un bloc existant, il est remplacé par un identifiant qui pointe vers le bloc de données existant 16 | Cela économise l’espace disque que les blocs de données redondants auraient autrement utilisé dans le pool de stockage. La déduplication des données permet donc de minimiser les impacts environnementaux liés au stockage des données. 17 | 18 | ## Mise en œuvre 19 | 20 | En tant qu'architecte logiciel, j'utilise une solution de déduplication des données, comme Veeam, pour réduire le stockage redondant et optimiser les ressources en éliminant les doublons. 21 | 22 | ## Tests d’acceptance 23 | 24 | Une solution de déduplication des données est utilisée 25 | -------------------------------------------------------------------------------- /architecture/010_architecture_AR-10.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-10 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: DevOps 6 | benefice: Environnement 7 | --- 8 | # AR-10 - Centraliser les données de log, de trace et de monitoring 9 | 10 | ## Description 11 | 12 | Un log est une notification créée par un système à l’occasion d’un événement (tel qu’un échec, une erreur ou une transformation d’état, etc.).  13 | Une trace représente le trajet de bout en bout d’une requête dans un système distribué. Les traces permettent de comprendre les parcours utilisateur, trouver les goulots d’étranglement et identifier les erreurs afin qu’elles puissent être corrigées et optimisées. 14 | 15 | Les données de monitoring mesurent les performances du service numérique (disponibilité du système, le temps de réponse, utilisation de la mémoire, consommation de temps CPU, bande passante, etc.) 16 | 17 | La centralisation des données de logs, de traces et de monitoring consiste à rassembler chacune de ces catégories de données sur des plateformes dédiées. Toutes les informations deviennent ainsi accessibles via une interface unique, simple d’accès et d’exploitation. Ainsi, l’entreprise sera plus à même d’identifier rapidement les comportements anormaux, les accès non autorisés et les anomalies au niveau du service numérique, augmentant ainsi sa résilience et sa durabilité 18 | 19 | ## Mise en œuvre 20 | 21 | En tant que devops, dans le processus de déploiement dans un environnement, je m’assure que ma chaine de déploiement CD paramètre correctement la centralisation des logs, traces et données de monitoring. 22 | 23 | ## Tests d’acceptance 24 | 25 | - Les logs sont systématiquement centralisés 26 | - Les traces sont systématiquement centralisées sur les cartes d'appels 27 | - Les données de monitoring sont systématiquement centralisées sur  des outils comme AppDynamics et/ou Prometheus. 28 | -------------------------------------------------------------------------------- /architecture/011_architecture_AR-11.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-11 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Principes Architecture 5 | responsable: Equipe produit 6 | benefice: Environnement 7 | --- 8 | # AR-11 - Privilégier une architecture Cloud native 9 | 10 | ## Description 11 | 12 | Le Cloud native est une approche de développement logiciel dans laquelle les applications sont conçues pour être hébergées/utilisées sur le Cloud. 13 | 14 | Les caractéristiques emblématiques d’une architecture Cloud native sont les suivantes  : 15 | 16 | - Un service numérique repose sur des microservices individuels qui peuvent être rassemblés dans des conteneurs tels que Docker 17 | - La communication entre les microservices est effectuée par des API standardisées 18 | - Une culture Devops déployée qui facilite la collaboration entre développeurs et administrateurs système 19 | - Une méthodologie agile appliquée aux projets de build/run des services numériques 20 | - L’utilisation d’une plateforme d’hébergement Cloud (Microsoft Azure, AWS, Google Cloud, etc) 21 | - L'existence d'une chaîne de CI/CD 22 | 23 | Cette architecture garantit notamment la résilience, l’évolutivité et la réutilisabilité des systèmes développés et assure donc leur durabilité, pilier de l’écoconception. 24 | 25 | ## Mise en œuvre 26 | 27 | En tant qu’équipe produit, lorsque je conçois un nouveau produit, je me base sur les [twelve factors](https://12factor.net/), liste des bonnes pratiques à appliquer pour mettre en place une architecture cloud native. 28 | Des outils comme Cloud Suitability Analyzer me permettent de mesurer la maturité Cloud native d’un service numérique. 29 | 30 | ## Tests d’acceptance 31 | 32 | Le nombre de mauvaises pratiques affiché par l’outil Cloud Suitability Analyzer est égal à 0. 33 | -------------------------------------------------------------------------------- /architecture/012_architecture_AR-12.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-12 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Principes Architecture 5 | responsable: Architecte / équipe de run 6 | benefice: Environnement / Performance / Coûts 7 | --- 8 | # AR-12 - Opter pour une architecture capable de passer à l'échelle automatiquement 9 | 10 | ## Description 11 | 12 | Dans la plupart des cas la charge subie par une application n'est pas constante au cours du temps. Par exemple il peut n'y avoir que peu, voire pas du tout d'utilisateurs connectés la nuit. Dans ce cas, il n'est pas nécessaire d'utiliser des infrastructures techniques aussi importantes aux heures creuses qu'aux heures de plus forte demande. 13 | 14 | L’autoscaling ou « mise à l’échelle automatique » est l’allocation ou la désallocation dynamique des ressources matérielles en fonction de la charge utilisateur : des ressources sont ajoutées lorsque l’activité s’intensifie et elles sont retirées lorsqu’elle diminue. C’est un moyen rapide et simple d’optimiser les performances, les coûts et l’empreinte environnementale d’un service numérique. 15 | 16 | Deux approches sont envisageables en cas de sur-approvisionnement ou de sous-approvisionnement : 17 | 18 | - **Vertical scaling** : Modification des capacités d’une ressource (ex: ajout de CPU ou de RAM) 19 | - **Horizontal scaling** : Ajout ou diminution des instances d’une ressource 20 | 21 | Un système d’autoscaling est composé : 22 | 23 | - d’un **système de monitoring**, qui fournit des informations sur la charge utilisateur et l’état de l’application (nombre de sessions utilisateur actuelles, utilisation du processeur, etc.) 24 | - d’un **service de dimensionnement**, qui planifie la mise à l’échelle des ressources 25 | - d’un **service de load balancing**, qui répartit la charge de travail entre les ressources 26 | 27 | ## Mise en œuvre 28 | 29 | La mise à l’échelle automatique des ressources peut être mise en œuvre de différentes manières, notamment : 30 | 31 | - par les **fournisseurs de Cloud** comme Google, Microsoft ou AWS, qui proposent des services d’autoscaling, mais cela nécessite d’héberger ses données dans le Cloud 32 | - via l’outil d’orchestration **Kubernetes**, qui fournit une fonctionnalité d’autoscaling. -------------------------------------------------------------------------------- /architecture/013_architecture_AR-13.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-13 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Principes Architecture 5 | responsable: Data scientist / Ops produit 6 | benefice: Performance 7 | --- 8 | # AR-13 - Utiliser les bons outils hardware 9 | 10 | ## Description 11 | 12 | Il existe différentes ressources techniques sur le marché (CPU, GPU, FPGA,TPU, ASIC, etc.), chacune ayant ses caractéristiques propres et adaptée pour une activité précise. Fournir les instances les plus adaptées au besoin permet d’optimiser l’exploitation des ressources. Ce faisant, on limite les impacts environnementaux induits lors de leur sollicitation. 13 | 14 | - **CPU** est l'acronyme de Central Processing Unit. Il désigne l’unité centrale de l’ordinateur, qui exécute des instructions et effectue en temps réel un nombre important de calculs pour permettre aux programmes informatiques de fonctionner correctement. Il assure également l'échange de données entre différents composants de la machine : disque dur, carte graphique, mémoire vive, carte de son… 15 | - **GPU** est l'acronyme de Graphical Processing Unit. Il s'agit d'une unité de calcul qui permet d'optimiser l'affichage et le rendu des images 2D et 3D ainsi que des vidéos. Il effectue des calculs mathématiques très rapides qui sont entièrement dédiés au traitement de données graphiques. Le GPU se révèle particulièrement efficace dans les travaux répétitifs, comme les phases d’apprentissage d’une IA. 16 | 17 | ## Mise en œuvre 18 | 19 | En tant que data scientist, je demande des capacités techniques qui satisfont raisonnablement mes besoins. 20 | En tant qu’Ops produit, je détermine le juste milieu entre la simplicité et la performance en termes d’outils hardware de sorte à minimiser le coût environnemental du produit. 21 | 22 | ## Tests d’acceptance 23 | 24 | Le processus de fourniture des capacités techniques a pris en compte la notion de sobriété et d’efficacité 25 | -------------------------------------------------------------------------------- /architecture/014_architecture_AR-14.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-14 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Principes Architecture 5 | responsable: Ops produit 6 | benefice: Performance 7 | --- 8 | # AR-14 - Modifier le workload pour qu’il consomme des quantités de CPU de manière adaptée 9 | 10 | ## Description 11 | 12 | Un workload désigne une quantité de traitement qu’un ordinateur doit effectuer à un moment donné. Modifier le workload pour qu’il marche avec des CPU et quantités de mémoire différents signifie modifier le nombre d’instances d’un conteneur. Cela permet d’améliorer les performances de calcul et donc d’optimiser la consommation énergétique et l’empreinte environnementale associée. 13 | 14 | Lors de la phase de build, les Ops Produit réalisent un benchmark afin de déterminer le nombre de composants à mobiliser pour répondre au besoin métier. 15 | Les Ops Produit mènent un travail d’optimisation et de profiling en build et en run afin de respecter les limites de CPU et de RAM imposées par Kubernetes. 16 | 17 | | Workload | Limites de ressources en prod | 18 | | ------------------- | ------------------------------------------- | 19 | | Standard (non java) | CPU : 1000 m ; mémoire : 2Gi | 20 | | Java avec heap size | CPU : 1500 m ; mémoire : requête + 128 Mi | 21 | | Weblogic SLDNG | CPU : 2000 m ; mémoire : 1500 Mi | 22 | | Quarkus | CPU : 750 m ; mémoire : 512 Mi | 23 | 24 | En tant qu’Ops Produit, lors du build, je réalise un benchmark des composants du service numérique. Je mène un travail de profiling avec Grafana (ou équivalent) pour vérifier que les limites de ressources imposées par Kubernetes (ou équivalent) sont respectées et optimiser le service numérique lorsque nécessaire, par exemple en le divisant en plusieurs morceaux. 25 | 26 | ## Tests d’acceptance 27 | 28 | - Un benchmark des composants du service numérique a été réalisé 29 | - Un suivi de la consommation énergétique des capacités techniques est réalisé 30 | -------------------------------------------------------------------------------- /architecture/015_architecture_AR-15.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-15 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Réseau 5 | responsable: Developpeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-15 - Maximiser l’utilisation des caches HTTP 10 | 11 | ## Description 12 | 13 | La mise en cache est un processus de stockage local des données afin que les requêtes futures relatives à ces dernières soient plus rapidement accessibles. Dans le cadre de l’écoconception, la mise en cache est particulièrement intéressante parce qu’elle permet notamment de réduire le volume de ressources nécessaire aux opérations répétitives. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, je m’assurer que : 18 | 19 | - Au niveau du livrable, les ressources statiques soient versionnées 20 | - Au niveau du serveur d’application, les entêtes HTTP permettent aux mécanismes de cache de connaitre la durée de rétention de l’objet 21 | 22 | ## Tests d’acceptance 23 | 24 | Vérifier que : 25 | 26 | - Si le fichier est "versionné" : Est-ce que la ressource est de type nom_fichier.ext ou nom_fichier.[^.] [^.] [^.] [^.] [^.] [^.]^.ext 27 | - Les entêtes de cache : 28 | - Si le fichier est « versionné », max-age doit être supérieur à 10 jours 29 | - Si le fichier n’est pas versionné, le max-age doit être inférieur à 900s 30 | - Dans tous les cas, il ne doit pas y avoir d’entête « etag » 31 | -------------------------------------------------------------------------------- /architecture/016_architecture_AR-16.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-16 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Réseau 5 | responsable: Developpeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-16 - Compresser les flux HTTP 10 | 11 | ## Description 12 | 13 | La compression des flux HTTP est un moyen simple de réduire la bande passante utilisée. 14 | Elle fonctionne de la manière suivante : 15 | 16 | - Le serveur compresse les données (code HTML, CSS, JavaScript...) 17 | - Les fichiers transitent par le réseau via HTTP 18 | - Le navigateur décompresse à la volée les données avant de les interpréter 19 | 20 | ## Mise en œuvre 21 | 22 | En tant que développeur, je : 23 | 24 | - m’assurer que les ressources statiques CSS et JS soient minifiées (suppression des éléments de mise en page pour faciliter la lecture pour les développeurs, retours chariots, indentations). Des outils existent pour traiter cette minification au niveau du Studio ou à la fabrication 25 | - configurer le serveur pour qu’il retourne un contenu zippé au navigateur, s’il le supporte 26 | 27 | ## Tests d’acceptance 28 | 29 | Les points suivants sont controlés : 30 | 31 | - La compression : Les entêtes de fichiers de type ASCII doivent contenir content-encoding "gzip" ou "br" 32 | - La minification : 33 | 34 | - le contenu contient moins de 15 retours chariot 35 | - La minification du fichier donne un gain de poids supérieur à 10% du poids du fichier 36 | -------------------------------------------------------------------------------- /architecture/017_architecture_AR-17.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-17 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Réseau 5 | responsable: Architecte 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # AR-17 - Protocole de transport 10 | 11 | ## Description 12 | 13 | Le protocole HTTP2 se base notamment sur : 14 | 15 | - une représentation binaire des requêtes et réponses (plus efficient qu’HTTP1 qui se base sur une représentation textuelle) 16 | - un mécanisme de compression des entêtes HTTP 17 | - le multiplexage des échanges, permettant de n'utiliser qu'une seule connexion TCP avec le serveur (alors qu’HTTP1 génère des allers-retours entre le navigateur et le serveur pour chaque ressource) 18 | 19 | Les gains en bande passante d’HTTP2, comparé à HTTP1, s’évaluent à plus de 50% sur les requêtes et de 1% à 15% sur les réponses, en fonction de la nature des échanges. 20 | 21 | 22 | HTTP3 est disponible depuis 2019. Il est supporté par la plupart des navigateurs existants. Il repose sur le protocole de transport de données UDP*, et non TCP* comme c’est le cas pour HTTP2 et HTTP1. L’avantage du protocole UDP est que, tout en permettant d’assurer l’intégrité des données, il ne prévoit pas de contrôle des messages tel que TCP le fait, ce qui le rend bien plus performant. 23 | 24 | Les avantages d’HTTP3 sont, entre autres : 25 | 26 | - Un temps de réponse plus rapide pour la première requête (en moyenne 12,6% plus rapide par rapport à HTTP2 d’après Cloudflare) 27 | - La réduction de la congestion 28 | - L’amélioration de la sécurité 29 | 30 | D’une manière générale, HTTP3 offre dans la plus part des cas de meilleures performances qu’HTTP2 (et à minima des performances similaires). 31 | 32 | ## Mise en œuvre 33 | 34 | - HTTP2 est supporté par les navigateurs depuis 2014 35 | - HTTP2 se met en place au niveau du serveur, en installant un certificat SSL ou TLS (car tous les navigateurs l’imposent). 36 | - Les principaux serveurs HTTP du marché ont déjà ajouté le support natif d’HTTP2 depuis 2014/2015. Mettre à jour, configurer et tester les serveurs pour prendre en charge HTTP2 37 | 38 | A date, HTTP3 n'est pas supporté nativement par Apache et Nginx. HTTP3 peut néanmoins être utilisé via un patch. 39 | 40 | ## Tests d’acceptance 41 | 42 | Le nombre de requêtes utilisant HTTP1 ou HTTP2 est égal à 0. 43 | -------------------------------------------------------------------------------- /architecture/018_architecture_AR-18.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-18 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Réseau 5 | responsable: Equipe produit 6 | benefice: Performance 7 | --- 8 | # AR-18 - Utiliser un protocole d'échange adapté au contenu transféré 9 | 10 | ## Description 11 | 12 | Aujourd’hui, 3 technologies sont populaires pour mettre en place une API : REST, GraphQL et gRCP.  13 | 14 | REST (Representational state transfer) est l’architecture la plus utilisée aujourd’hui. Elle est basée sur les règles originelles du protocole HTTP. Son inconvénient principal est sa verbosité et donc l’impact environnemental que cela peut générer par rapport à l’utilisation d’une autre architecture. 15 | 16 | GraphQL est un langage de requête de données qui permet aux clients de demander uniquement les données spécifiques dont ils ont besoin. Le principal avantage de GraphQL est d’optimiser les requêtes. En effet, GraphQL permet de filtrer les requêtes de façon très fine : 17 | 18 | - Le client peut dynamiquement expliciter les informations qui l’intéressent 19 | - L’ensemble des requêtes est centralisé en une seule et unique requête 20 | Cela induit ainsi des temps de réponse plus court et une moindre consommation de ressources. 21 | 22 | gRCP est un framework RPC (Remote procedure call) créé par Google. Le gRPC traite le transport de flux de données via HTTP/2, et les données sont sérialisées. De cette manière, les besoins en mémoire et donc les impacts environnementaux sont réduits.  23 | 24 | 25 | ## Mise en œuvre 26 | 27 | En tant qu’équipe produit, je choisis le protocole d’échange à utiliser en fonction de la solution à réaliser : 28 | 29 | - GraphQL est un bon choix architectural si l’application et sa structure de donnée font appel à de nombreuses requêtes. 30 | - Pour une communication rapide et transparente entre les services internes, gRPC est la meilleure option. Le gRCP est particulièrement adapté au sein d’interfaces (API) et de services complexes 31 | - Pour des systèmes simples et/ou ne disposant pas de mécanisme de cache, REST sera plus adapté 32 | -------------------------------------------------------------------------------- /architecture/019_architecture_AR-19.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-19 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Données 5 | responsable: Data scientist / chef de projet / développeur, métier 6 | benefice: Environnement 7 | --- 8 | # AR-19 - Limiter les données stockées 9 | 10 | ## Description 11 | 12 | Les données génèrent des impacts environnementaux tout au long de leur cycle de vie. En effet, les données mobilisent toute une infrastructure pour leur traitement et leur stockage. Cette infrastructure nécessite d’être hébergée, alimentée électriquement, refroidie et sécurisée. Ainsi, réduire la quantité de données à stocker permet de diminuer les impacts environnementaux liés à ces activités. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que développeur, data scientist, collaborateur côté métier ou encore chef de projet, je réduis le volume de données stockées au nécessaire en : 17 | 18 | **Stockant le minimum de données possible** : 19 | 20 | - Je ne garde que les données susceptibles de servir à un cas d’usage présent ou futur 21 | - Je ne sauvegarde pas les données faciles à recréer 22 | - Je supervise la taille des espaces de stockage 23 | 24 | **Optimisant les données stockées** : 25 | 26 | - J'élimine les doublons 27 | - Je supprime ou j'archive les données obsolètes (ex : une donnée peut être rendue obsolète par la récolte d’une nouvelle donnée) 28 | - Je vérifie que les sauvegardes peuvent être restaurées 29 | 30 | ## Tests d’acceptance 31 | 32 | - Seules les données utiles sont stockées 33 | - Un nettoyage des données est effectué de manière régulière 34 | -------------------------------------------------------------------------------- /architecture/020_architecture_AR-20.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-20 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Principes d’architecture 5 | responsable: Equipe produit 6 | benefice: Environnement 7 | bonne-pratique-essentielle: oui 8 | --- 9 | 10 | # AR-20 - Privilégier les technologies standard interopérables 11 | 12 | ## Description 13 | 14 | Les technologies spécifiques et propriétaires sont des technologies développées par et pour une entreprise spécifique. Souvent, une technologie propriétaire n’est pas interopérable et peut donc induire l’obsolescence des équipements utilisés. L’idéal serait alors d’opter pour des technologies standards, ouvertes, et utilisées de tous, de sorte à maximiser capacité d’un système à être compatible avec des systèmes extérieurs. 15 | 16 | Des exemples : 17 | 18 | - Les applications natives ont besoin des dernières versions de système d'exploitation ou même les dernières versions des équipements pour fonctionner ce qui induit une obsolescence des matériels. Au contraire, des services numériques web sont a priori disponibles dans tout navigateur et pour tout type d'équipement. 19 | Dans le cadre du web, les technologies interopérables sont par exemple HTML, HTTP, SVG, JPG, les APIs Javascript, etc. 20 | - Construire son service à partir de composants open source permet de garder la main sur la maintenance du code utilisé, par conséquent améliorer la durabilité du code et de réduire le risque d'obsolescence induite par le logiciel sur le matériel. 21 | 22 | ## Mise en œuvre 23 | 24 | En tant qu’équipe produit et en coordination avec les architectes, lors de la phase de conception, j’évalue la faisabilité des technologies standard pour répondre aux besoins. 25 | 26 | ## Tests d’acceptance 27 | 28 | En tant qu’équipe produit et en coordination avec les architectes, lors de la phase de conception, j’évalue la faisabilité des technologies standard pour répondre aux besoins. 29 | -------------------------------------------------------------------------------- /architecture/021_architecture_AR-21.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: AR-21 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Principes d’architecture 5 | responsable: Equipe produit 6 | benefice: Performance 7 | --- 8 | 9 | # AR-21 - Utiliser la CI/CD de manière responsable 10 | 11 | ## Description 12 | 13 | L’adoption du Devops peut entrainer une consommation de ressources largement supérieure au besoin si elle n’est pas encadrée. Optimiser l’utilisation des ressources informatiques est nécessaire afin de limiter leur consommation. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que devops, plusieurs bonnes pratiques me permettent d’utiliser la CI/CD de manière responsable : 18 | 19 | - Optimiser la taille des images Docker (fichier utilisé pour exécuter du code dans un conteneur Docker) utilisées afin de limiter les transits réseaux, le stockage et la latence lors du déploiement d’une nouvelle instance d’image. Plusieurs techniques permettent de réduire la taille des images Docker. Cette bonne pratique est préconisée dans TMJ, un mode opératoire a même été rédigé à ce sujet 20 | - Mettre en cache les fichiers et dossiers tout au long de la CI/CD afin d’éviter de retélécharger les fichiers à chaque build. 21 | - Surveiller la durée des jobs, leur nombre, et le trafic réseau et les événements dans Grafana par exemple et surveiller vos services afin de détecter et remédier au plus tôt aux défauts fonctionnels, bugs et surconsommations d’énergie, et ainsi améliorer l’efficience des workflows 22 | Privilégier les forges mutualisées (solutions permettant de centraliser les informations d’un projet et intègrant un processus d’intégration continue permettant de compiler, tester et déployer un ou plusieurs projets) -par exemple, l’outil Concourse peut être utilisé afin de mutualiser et donc d’augmenter le taux d’utilisation des serveurs. D’autres outils sont utilisés : GCLp, Proven, ARA, Gitlab CI et Jenkins 23 | - Assurer une cohérence globale à l’ensemble des outils de manière à optimiser l’espace disque. 24 | 25 | ## Tests d’acceptance 26 | 27 | - La taille des images Docker est optimisée 28 | - Un mécanisme de mise en cache optimisé est intégré à la CI/CD 29 | - Les métriques de pilotage sont surveillées quotidiennement 30 | - Les données sont supprimées dès qu’elles deviennent obsolètes 31 | -------------------------------------------------------------------------------- /architecture/img/exemple_architecture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/architecture/img/exemple_architecture.jpg -------------------------------------------------------------------------------- /backgrounds/vincent2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/backgrounds/vincent2.jpg -------------------------------------------------------------------------------- /build/build.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | content="introduction/*.md strategie/*.md ux/*.md" 4 | 5 | #pandoc $content -o toto.pdf --from markdown+yaml_metadata_block+raw_html --template templates/eisvogel.latex --table-of-contents --toc-depth 6 --number-sections --top-level-division=chapter 6 | pandoc $content -o toto.pdf --from markdown+yaml_metadata_block+raw_html --template templates/eisvogel.latex --table-of-contents --toc-depth 6 --number-sections --top-level-division=chapter -V documentclass=book -V papersize:a4 7 | -------------------------------------------------------------------------------- /build/img/Republique-francaise-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/img/Republique-francaise-logo.jpg -------------------------------------------------------------------------------- /build/md2all.sh: -------------------------------------------------------------------------------- 1 | #content="../*.md ../strategie/*.md ../equipe/*.md ../ux/*.md ../ui/*.md ../code/*.md ../architecture/*.md" 2 | content="../*.md ../strategie/*.md ../equipe/*.md ../architecture/*.md ../code/*.md ../ux/*.md ../ui/*.md" 3 | 4 | pandoc -s $content -o ../output/ebh.html --toc --section-divs --lua-filter styling/pagebreak.lua --lua-filter styling/html-open-links-in-new-tab.lua --lua-filter styling/html-lazy-images.lua --template styling/html-template.html 5 | 6 | pandoc -s $content -o ../output/ebh-standalone-content.pdf --columns 55 -H styling/pdf-standalone-latex-options.sty --lua-filter styling/pdf-center-images.lua --lua-filter styling/pdf-table-size.lua --toc 7 | 8 | pdflatex -job-name=ebh-standalone -output-directory=../output/ styling/pdf-standalone-merge.tex 9 | -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-400.woff2 -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-500.woff2 -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-600.woff2 -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-700.woff2 -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-ext-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-ext-400.woff2 -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-ext-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-ext-500.woff2 -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-ext-600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-ext-600.woff2 -------------------------------------------------------------------------------- /build/styling/fonts/poppins-latin-ext-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/styling/fonts/poppins-latin-ext-700.woff2 -------------------------------------------------------------------------------- /build/styling/html-lazy-images.lua: -------------------------------------------------------------------------------- 1 | function lazyload_images(img) 2 | img.attr["attributes"]["loading"] = "lazy" 3 | return pandoc.Image(img.caption, img.src, img.title, img.attr) 4 | end 5 | 6 | return { { Image = lazyload_images } } -------------------------------------------------------------------------------- /build/styling/html-open-links-in-new-tab.lua: -------------------------------------------------------------------------------- 1 | function set_link_targets_to_blank(link) 2 | link.attr["attributes"]["target"] = "_blank" 3 | return pandoc.Link(link.content, link.target, link.title, link.attr) 4 | end 5 | 6 | return { { Link = set_link_targets_to_blank } } -------------------------------------------------------------------------------- /build/styling/pdf-center-images.lua: -------------------------------------------------------------------------------- 1 | function center_image(image) 2 | if (pandoc.List.includes(image.attr["classes"], 'not-centered')) then 3 | return nil 4 | end 5 | 6 | if (image.caption and #image.caption > 0) then 7 | local notes = {} 8 | local captionText = pandoc.walk_inline(pandoc.Span(image.caption), { 9 | Note = function(note) 10 | table.insert(notes, pandoc.Span(pandoc.utils.blocks_to_inlines(note.content))) 11 | return pandoc.RawInline('latex', '\\footnotemark{}') 12 | end 13 | }) 14 | 15 | if (notes and #notes > 0) then 16 | return { 17 | pandoc.RawInline('latex', '\\begin{figure}[H]'), 18 | pandoc.RawInline('latex', '\n\\centering\n'), 19 | image, 20 | pandoc.RawInline('latex', '\n\\begin{footnotesize}'), 21 | captionText, 22 | pandoc.RawInline('latex', '\n\\end{footnotesize}'), 23 | pandoc.RawInline('latex', '\n\\end{figure}'), 24 | pandoc.RawInline('latex', '\n\\footnotetext'), 25 | table.unpack(notes) 26 | } 27 | else 28 | return { 29 | pandoc.RawInline('latex', '\\begin{figure}[H]'), 30 | pandoc.RawInline('latex', '\n\\centering\n'), 31 | image, 32 | pandoc.RawInline('latex', '\n\\begin{footnotesize}'), 33 | captionText, 34 | pandoc.RawInline('latex', '\n\\end{footnotesize}'), 35 | pandoc.RawInline('latex', '\n\\end{figure}') 36 | } 37 | end 38 | else 39 | return { 40 | pandoc.RawInline('latex', '\\begin{figure}[H]'), 41 | pandoc.RawInline('latex', '\n\\centering\n'), 42 | image, 43 | pandoc.RawInline('latex', '\n\\end{figure}') 44 | } 45 | end 46 | end 47 | 48 | return { { Image = center_image } } -------------------------------------------------------------------------------- /build/styling/pdf-print-latex-options.sty: -------------------------------------------------------------------------------- 1 | \usepackage{arev} 2 | \usepackage[onehalfspacing]{setspace} 3 | \usepackage[paperwidth=5in,paperheight=8in,twoside,bindingoffset=0.35in,margin=.5in,footskip=.25in]{geometry} 4 | \usepackage{float} 5 | \usepackage{sectsty} 6 | \allsectionsfont{\centering} 7 | \subsectionfont{\centering\LARGE} 8 | \subsubsectionfont{\centering\Large} 9 | \interfootnotelinepenalty=10000 -------------------------------------------------------------------------------- /build/styling/pdf-print-merge.tex: -------------------------------------------------------------------------------- 1 | \documentclass{article} 2 | \usepackage[paperwidth=5in,paperheight=8in,margin=0in,footskip=0in]{geometry} 3 | \usepackage{pdfpages} 4 | \begin{document} 5 | \includepdf[pages=-]{../output/ebh-print-front.pdf} 6 | \includepdf[pages=-]{../output/ebh-print-content.pdf} 7 | \end{document} -------------------------------------------------------------------------------- /build/styling/pdf-standalone-latex-options.sty: -------------------------------------------------------------------------------- 1 | \usepackage{arev} 2 | \usepackage[onehalfspacing]{setspace} 3 | \usepackage[paperwidth=5in,paperheight=8in,margin=.5in,footskip=.25in]{geometry} 4 | \usepackage{float} 5 | \usepackage{sectsty} 6 | \allsectionsfont{\centering} 7 | \subsectionfont{\centering\LARGE} 8 | \subsubsectionfont{\centering\Large} 9 | \interfootnotelinepenalty=10000 10 | -------------------------------------------------------------------------------- /build/styling/pdf-standalone-merge.tex: -------------------------------------------------------------------------------- 1 | \documentclass{article} 2 | \usepackage[paperwidth=5in,paperheight=8in,margin=0in,footskip=0in]{geometry} 3 | \usepackage{pdfpages} 4 | \begin{document} 5 | \includepdf[pages=-]{../output/ebh-standalone-front.pdf} 6 | \includepdf[pages=-]{../output/ebh-standalone-content.pdf} 7 | \end{document} -------------------------------------------------------------------------------- /build/styling/pdf-table-size.lua: -------------------------------------------------------------------------------- 1 | function size_table(table) 2 | return { 3 | pandoc.RawBlock('latex', '\\begin{tiny}'), 4 | table, 5 | pandoc.RawBlock('latex', '\\end{tiny}'), 6 | } 7 | end 8 | 9 | return { { Table = size_table } } -------------------------------------------------------------------------------- /build/toto.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/build/toto.pdf -------------------------------------------------------------------------------- /code/000_code_CO-00.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-00 3 | page-background: backgrounds/vincent2.jpg 4 | --- 5 | ## CODE 6 | 7 | Dans ce chapitre, nous traiterons l’aspect du développement, en se focalisant sur les langages suivants : HTML, CSS, Javascript, Python et Java. Les pratiques principales seront avant tout : 8 | 9 | * **D’écrire un code de qualité**, afin de faciliter sa maintenance et ainsi limiter son obsolescence 10 | * **D’optimiser le code**, de sorte à ce qu’il mobilise moins de ressources informatiques pour fonctionner 11 | 12 | | CO-00 | BONNES PRATIQUES TRAITEES DANS CE CHAPITRE | 13 | | ----- | --------------------------------------------------------------------------------- | 14 | | CO-01 | Concaténer les fichiers CSS | 15 | | CO-02 | Utiliser seulement les portions indispensables des frameworks CSS | 16 | | CO-03 | Utiliser des sélecteurs CSS efficaces | 17 | | CO-04 | DOM - Grouper les déclarations CSS similaires | 18 | | CO-05 | DOM - Modifier plusieurs propriétés CSS en une seule fois | 19 | | CO-06 | Ne pas réécrire les getter et setter natifs | 20 | | CO-07 | Concaténer les fichiers Javascript | 21 | | CO-08 | Utiliser seulement les portions indispensables des bibliothèques JavaScript | 22 | | CO-09 | Utiliser un framework javascript adapté et efficient | 23 | | CO-10 | Ne pas copier des tableaux via des boucles Java for, while, do..while et foreach | 24 | | CO-11 | SQL- Éviter d'utiliser SELECT * FROM | 25 | | CO-12 | SQL - Eviter d’utiliser « EXECUTE IMMEDIATE » | 26 | | CO-13 | SQL - Eviter de faire des requêtes SQL à l’intérieur d’une boucle | 27 | | CO-14 | Vérifier les erreurs de code dans la console | 28 | | CO-15 | Privilégier les variables locales | 29 | | CO-16 | Supprimer le code inutilisé | 30 | | CO-17 | Minifier le code | 31 | | CO-18 | Optimiser l’écriture du code | 32 | | CO-19 | Utiliser des outils d'analyse de code dynamique | 33 | | CO-20 | Réutiliser le code développé en interne | 34 | | CO-21 | Utiliser l'open source de manière responsable | 35 | -------------------------------------------------------------------------------- /code/001_code_CO-01.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-01 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: CSS 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # CO-01 - Concaténer les fichiers CSS 10 | 11 | ## Description 12 | 13 | La combinaison de feuilles de style CSS permet de réduire le nombre de requêtes HTTP et donc les impacts environnementaux associés. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, j’utilise le plugin webpack-merge-and-include-globally de l’outil Webpack pour fusionner les fichiers CSS. 18 | 19 | ## Tests d’acceptance 20 | 21 | Il y a au maximum **3 fichiers CSS.** 22 | -------------------------------------------------------------------------------- /code/002_code_CO-02.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-02 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: CSS 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # CO-02 - Utiliser uniquement les portions indispensables des frameworks CSS 10 | 11 | ## Description 12 | 13 | Les frameworks CSS prêts à l’emploi (Bootstrap, skeleton, gumby, foundation…) sont d’excellents outils pour réaliser rapidement des sites, car ils répondent à presque tous les besoins les plus courants. Revers de la médaille, on n’utilise généralement qu’une petite portion de ces frameworks. Or, ces frameworks ne s’appuient pas tous sur une architecture modulaire, ce qui contraint l’internaute à télécharger la librairie entière pour n’utiliser qu’un faible pourcentage de ses fonctionnalités. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, dans la mesure du possible, je n’ai pas recours à des frameworks ou je n’en conserve que les portions réellement utilisées (voir [https://getbootstrap.com/customize](https://getbootstrap.com/customize)). 18 | Si une contrainte m’oblige à utiliser des librairies ou framework pour mon projet, j’opte pour les alternatives légères qui répondent au mieux à mon besoin. 19 | 20 | ## Tests d’acceptance 21 | 22 | Le nombre de frameworks utilisés **est inférieur ou égal à 1** 23 | -------------------------------------------------------------------------------- /code/003_code_CO-03.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-03 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: CSS 5 | responsable: Développeur 6 | benefice: Performance 7 | --- 8 | # CO-03 - Utiliser des sélecteurs CSS efficaces 9 | 10 | ## Description 11 | 12 | Un sélecteur est une expression qui indique au navigateur à quelle entité HTML applique la règle CSS correspondante. Toute règle CSS commence par un sélecteur. CSS propose une grande diversité de sélecteurs (sélecteurs de type, de classe, d’ID, d’attributs, etc.), offrant ainsi une précision très fine dans la façon de cibler les éléments. 13 | Afin de limiter l’impact environnemental généré par les sélecteurs, il est recommandé de privilégier les sélecteurs basés sur des ID ou des classes. En effet, ces sélecteurs permettent de filtrer très rapidement les éléments HTML, économisant ainsi des cycles CPU à la machine interprétant les règles et donc les impacts environnementaux. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, 18 | A la place de treeitem[mailfolder="true"] > treerow > treecell {…} 19 | J’écris .treecell-mailfolder {…} 20 | 21 | A la place de treehead > treerow > treecell {…} 22 | j’écris .treecell-header {…} 23 | 24 | ## Tests d’acceptance 25 | 26 | Le nombre de sélecteurs CSS qui n'utilisent ni d'id, ni de class et ni d'attribut est égal à 0. 27 | -------------------------------------------------------------------------------- /code/004_code_CO-04.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-04 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: CSS 5 | responsable: Développeur 6 | benefice: Performance 7 | --- 8 | # CO-04 - DOM - Grouper les déclarations CSS similaires 9 | 10 | ## Description 11 | 12 | Lorsque plusieurs éléments du DOM (Document Object Model) ont des propriétés CSS communes, il est recommandé de les déclarer ensemble dans la même feuille de styles. Cette méthode permet de réduire le poids de la CSS, et donc l’impact environnemental induit par le traitement, le transport et le stockage des données. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que développeur, à la place de : 17 | h1 { 18 | background-color: gray; color: navy; 19 | } 20 | h2 { 21 | background-color: gray; color: navy; 22 | } 23 | h3 { 24 | background-color: gray; color: navy; 25 | } 26 | J’écris : 27 | h1, h2, h3 { 28 | background-color: gray; color: navy; 29 | } 30 | Pour s’assurer que cette règle soit bien respectée, il est possible de mettre en place le module [stylelint](https://stylelint.io/) dans le projet (devDependencies) et utiliser la règle shorthand-property-no-redundant-values 31 | 32 | ## Tests d’acceptance 33 | 34 | Le nombre de déclaration CSS similaires non regroupées est inférieur ou égal à 1. 35 | -------------------------------------------------------------------------------- /code/005_code_CO-05.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-05 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: CSS 5 | responsable: Développeur 6 | benefice: Environnement 7 | --- 8 | # CO-05 - DOM - Modifier plusieurs propriétés CSS en une seule fois 9 | 10 | ## Description 11 | 12 | Lorsque le navigateur reçoit la page HTML, il propose en 1ère intention une 13 | Le repaint est le changement d’apparence d’un élément du DOM (Document Object Model), tandis que le reflow est le changement/recalcul de la position des éléments dans le DOM. Ces deux opérations sont coûteuses en ressources énergétiques, notamment en cycles CPU : il faut donc éviter de les déclencher. 14 | Pour limiter le nombre de repaint/reflow, il est conseillé de ne pas modifier des propriétés une à une. Préférer l’ajout/la suppression de classes CSS, ce qui permet de modifier en une seule fois plusieurs propriétés, tout en ne générant qu’un repaint/reflow. 15 | 16 | ## Mise en œuvre 17 | 18 | En tant que développeur, je favorise ce type d’écriture : 19 | 20 | ``` 21 | 25 | . 31 | ``` 32 | 33 | ## Tests d’acceptance 34 | 35 | Le nombre de déclarations CSS pouvant être regroupées en une seule (margin, padding, ...) n'utilisant pas la version d’écriture courte est égal à 0 36 | -------------------------------------------------------------------------------- /code/006_code_CO-06.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-06 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Transverse 5 | responsable: Développeur 6 | benefice: Performance 7 | --- 8 | # CO-06 - Ne pas réécrire les getter et setter natifs 9 | 10 | ## Description 11 | 12 | La plupart des langages objet proposent des getter et des setter standards que le développeur n’a pas besoin d’écrire. Réécrire à sa manière les getter et setter standards rajoute des lignes de code qui auraient pu facilement être évitées. Cela allonge les temps de compilation et d’exécution de ces méthodes, qui sont généralement bien mieux optimisées par le langage que par le développeur. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que développeur, j’utilise les méthodes natives get et set, et j’évite à tout prix de les réécrire. Des exemples sont présentés ci dessous : 17 | 18 | ``` 19 | class Car { 20 |   constructor(name) {this.name = name;} 21 |   get name() {return this._name;} 22 |   set name(newName) {this._name = newName;} 23 | 24 |   /* non native */ 25 |   getName() {return this._name;} 26 |   setName() {return this.name;}} 27 | let my_first_car = new Car(“Ferrari"); 28 | 29 | /* getter */ 30 | console.log('My car\'s name with non native getter : ', my_car.getName())  // non natif 31 | console.log('My car\'s name with native getter : ', my_car.name)  // correct 32 | console.log('My car\'s name : ', my_car._name)  // correct 33 | 34 | /* setter */ 35 | my_car.setName("Mercedes"); // non natif 36 | console.log('My car\'s name setted with non native getter : ', my_car.name)  // non natif 37 | 38 | my_car.name = "Renault"; 39 | console.log('My car\'s name setted with native getter : ', my_car.name)  // natif 40 | ``` 41 | 42 | ## Tests d’acceptance 43 | 44 | Le nombre de getter et setter natifs réécrit est égal à 0. 45 | -------------------------------------------------------------------------------- /code/007_code_CO-07.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-07 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Javascript 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # CO-07 - Concaténer les fichiers Javascript 10 | 11 | ## Description 12 | 13 | La combinaison de bibliothèques Javascript permet de réduire le nombre de requêtes HTTP et donc les impacts environnementaux associés. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, j’utilise le plugin webpack-merge-and-include-globally de l’outil Webpack pour fusionner les fichiers Javascript 18 | 19 | ## Tests d’acceptance 20 | 21 | Il y a au maximum **10 fichiers Javascript** 22 | -------------------------------------------------------------------------------- /code/008_code_CO-08.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-08 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Javascript 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # CO-08 - Utiliser uniquement les portions indispensables des librairies JavaScript 10 | 11 | ## Description 12 | 13 | Les bibliothèques JavaScript telles que jQuery sont d’excellents outils pour réaliser rapidement des sites, car ils répondent à presque tous les besoins les plus courants. Revers de la médaille, on n’en utilise généralement qu’une petite portion. Or ces bibliothèques ne s’appuient pas tous sur une architecture modulaire, ce qui contraint l’internaute à télécharger toute la librairie pour n’utiliser qu’un faible pourcentage de ses fonctionnalités. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, dans la mesure du possible, je n’ai pas recours à des bibliothèques (ex : je peux me baser sur le code de [https://youmightnotneedjquery.com](https://youmightnotneedjquery.com/) à la place d’utiliser jquery) ou je n’en conserve que les portions réellement utilisées. 18 | Si une contrainte m’oblige à utiliser des librairies pour mon projet, j’opte pour les alternatives légères qui répondent au mieux à mon besoin. 19 | 20 | ## Tests d’acceptance 21 | 22 | Le nombre de bibliothèques dont des portions non indispensables sont utilisées est inférieur ou égal à 1. 23 | -------------------------------------------------------------------------------- /code/009_code_CO-09.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-09 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Javascript 5 | responsable: Equipe produit 6 | benefice: Performance 7 | --- 8 | # CO-09 - Utiliser un framework javascript adapté et efficient 9 | 10 | ## Description 11 | 12 | En 2021, le poids médian d’un site web représente 1 923 KB. Les images et le code JavaScript sont les éléments qui contribuent en majeure partie à ce poids. La plupart des projets qui utilisent de grandes quantités de JavaScript utilisent une bibliothèque ou un framework. 13 | Il existe une multitude de frameworks Javascript, chacun ayant ses caractéristiques propres. Chaque framework ne répond pas forcément aux mêmes critères et besoins. Afin de maximiser l’efficience d’un framework vis-à-vis d’un besoin, et donc limiter ses impacts environnementaux, il faut choisir un framework qui est conçu pour répondre à ce besoin. 14 | Parmi les framework adaptés au besoin et maîtrisés par l’équipe, il conviendra d’utiliser le plus efficient 15 | 16 | ## Mise en œuvre 17 | 18 | En tant qu’équipe produit, lors du cadrage d’architecture, je détermine le framework à utiliser en prenant en compte sa performance, le contexte du produit et les compétences de l’équipe 19 | 20 | Des classements de frameworks les plus populaires en fonction de leur performance environnementale existent. Parmi les frameworks étudiés, [Vanilla JS](http://vanilla-js.com/) semble être le plus performant, suivi de près par Solid, Lit et Svelte. Angular et React sont les moins performants des frameworks étudiés. 21 | 22 | ## Tests d’acceptance 23 | 24 | * Le critère de performance a été pris en compte dans le choix du framework lors du cadrage d’architecture 25 | * L’adéquation au besoin a été pris en compte dans le choix du framework lors du cadrage d’architecture. 26 | -------------------------------------------------------------------------------- /code/010_code_CO-10.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-10 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Java 5 | responsable: Développeur 6 | benefice: Performance 7 | --- 8 | # CO-10 - Ne pas copier des tableaux via des boucles Java for, while, do..while et foreach 9 | 10 | ## Description 11 | 12 | Utiliser une boucle pour copier un tableau ou une partie d’un tableau rajoute des lignes de code qui auraient pu être évitées en utilisant des fonctions natives, naturellement optimisées par le langage. Ce code supplémentaire induit une consommation non nécessaire de ressources techniques, qui se traduit par une augmentation de l’empreinte environnementale du service numérique. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que développeur, j’utilise les méthodes natives pour copier les tableaux : 17 | 18 | * Si je veux copier un tableau dans un autre tableau, j’utilise la méthode **Arrays.copyOf** 19 | * Si je veux copier une partie d’un tableau dans un autre tableau, j’utilise la méthode **System.arraycopy** 20 | * Si je veux alimenter une liste à partir d’un tableau existent, j’utilise la méthode **Arrays.asList**. Des étapes supplémentaires sont à prévoir si une liste à taille variable est désirée 21 | 22 | ## Tests d’acceptance 23 | 24 | Pour copier un tableau, l’une des méthodes suivantes a été utilisée : **Arrays.copyOf**, **System.arraycopy** ou **Arrays.asList** 25 | -------------------------------------------------------------------------------- /code/011_code_CO-11.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-11 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Transverse 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # CO-11 - SQL - Éviter d'utiliser SELECT * FROM 10 | 11 | ## Description 12 | 13 | Bien souvent, seuls certains champs du tableau sont réellement nécessaires pour un cas d’usage. Cependant, une requête du type SELECT * récupère l’ensemble des données d’un tableau.  Ainsi, ce type de requêtes collecte souvent plus de champs de la base de données que ce dont le service numérique a réellement besoin pour fonctionner. Cela entraîne une augmentation du volume de données à déplacer du serveur de base de données vers le client, ce qui ralentit l'accès et augmente la charge des machines, tout en prenant plus de temps pour traverser le réseau.  14 | Dès lors, si les champs utiles sont connus, il est vivement recommandé de nommer les champs dans la requête et de détailler au maximum la requête pour récupérer un minimum d’informations. 15 | 16 | ## Mise en œuvre 17 | 18 | En tant que développeur, à la place de : 19 | 20 | SELECT * FROM clients; 21 | J'écris : 22 | SELECT raison_social, adresse, code_postal, telephone FROM clients; 23 | 24 | Les clauses telles que WHERE, LIMIT ou encore LIKE par exemple peuvent aussi permettre d’affiner une requête. 25 | 26 | ## Tests d’acceptance 27 | 28 | Le nombre d’occurrence de « SELECT * FROM » dans le code est égal à 0 sauf cas exceptionnel (par 29 | exemple si une table contient peu de lignes et de colonnes). 30 | -------------------------------------------------------------------------------- /code/012_code_CO-12.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-12 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Transverse 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # CO-12 - SQL - Éviter d’utiliser « EXECUTE IMMEDIATE » 10 | 11 | ## Description 12 | 13 | EXECUTE IMMEDIATE prépare et exécute immédiatement un ordre SQL spécifié dynamiquement, sans récupérer les enregistrements du résultat. Les résultats doivent donc être recalculés à chaque fois qu’ils sont utilisés. Cela induit des consommations de ressources et donc des impacts environnementaux supplémentaires. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, je remplace les instructions SQL dynamiques par des instructions statiques. 18 | 19 | ## Tests d’acceptance 20 | 21 | La fonction SQL « EXECUTE IMMEDIATE » n’est pas utilisée. 22 | -------------------------------------------------------------------------------- /code/013_code_CO-13.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-13 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Transverse 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # CO-13 - SQL - Eviter de faire des requêtes SQL à l’intérieur d’une boucle 10 | 11 | ## Description 12 | 13 | Les requêtes SQL à l’intérieur d’une boucle posent des problèmes importants de performance, et ce d’autant plus si le(s) serveur(s) SQL n’est (ne sont) pas sur la machine locale. En effet, ces serveurs sont optimisés pour traiter plusieurs sélections, insertions ou modifications dans une seule requête ou une seule transaction. Ainsi, envoyer un grand nombre de petites requêtes constitue le meilleur moyen de consommer inutilement des cycles CPU, de la mémoire vive et de la bande passante, et ainsi induire des impacts environnementaux non négligeables. Cela peut par ailleurs saturer un serveur. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, à la place d'écrire : 18 | 19 | ``` 20 | for (var user in userList) { 21 | const query = "INSERT INTO users (first_name,last_name) VALUES("+user.first_name+","+user.last_name+")"; 22 | const res = db.exec(query); 23 | } 24 | ``` 25 | 26 | J'écris : 27 | 28 | ``` 29 | var sql = "INSERT INTO Test (first_name, last_name) VALUES ?"; 30 | var values = [ 31 | ['demian', 'smith'], 32 | ['john', 'doe'], 33 | ['mark', 'lee'], 34 | ['pete', 'buler'] 35 | ]; 36 | conn.query(sql, [values], function(err) { 37 | if (err) throw err; 38 | conn.end(); 39 | }); 40 | ``` 41 | 42 | ## Tests d’acceptance 43 | 44 | Le nombre de requêtes SQL à l’intérieur d’une boucle est égal à 0. 45 | -------------------------------------------------------------------------------- /code/014_code_CO-14.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-14 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Méthodes et outils 5 | responsable: Développeur 6 | benefice: Environnement 7 | --- 8 | # CO-14 - Vérifier les erreurs de code dans la console 9 | 10 | ## Description 11 | 12 | Le code peut contenir des erreurs de syntaxe ou de logique. Il peut parfois être difficile d’identifier et de comprendre ces erreurs. Heureusement, la plupart des navigateurs disposent d’un outil pour gérer les erreurs de code Javascript, CSS et HTML. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que développeur, dans l’outil d’aide aux développeurs (F12), je me rends sur l’onglet « Console » pour afficher les erreurs présentes sur la page web. 17 | 18 | ## Tests d’acceptance 19 | 20 | * Le nombre d’erreurs est vérifié régulièrement dans la console 21 | * Le nombre d’erreurs dans la console est égal à 0. 22 | -------------------------------------------------------------------------------- /code/015_code_CO-15.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: CO-15 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Transverse 5 | responsable: Développeur 6 | benefice: Performance 7 | --- 8 | # CO-15 - Privilégier les variables locales 9 | 10 | ## Description 11 | 12 | En informatique, les variables sont des symboles qui associent un nom à une valeur. Une variable globale est définie en dehors de toute fonction et est par conséquent accessible et partagée par toutes les fonctions. A contrario, une variable locale est définie à l'intérieur d'un bloc (en général d’une fonction) et a une durée de vie limitée à l’exécution du bloc (de fonction), elle est visible uniquement dans ce bloc, inconnue en dehors.  13 | En JavaScript, lorsqu’on fait appel à une variable globale, le moteur d’interprétation doit vérifier : 14 | 15 | * qu’elle existe dans le scope actuel, dans celui du dessus, etc. ; 16 | * que la variable dispose d’une valeur, etc. 17 | 18 | Pour éviter toutes ces vérifications, il est souvent envisageable de passer les variables utiles en arguments des routines, les rendant locales. Ce procédé permet ainsi d’économiser du temps de calcul (cycles CPU), et donc les impacts environnementaux qui en découlent. 19 | 20 | ## Mise en œuvre 21 | 22 | En tant que développeur, à la place de : 23 | 24 | ``` 25 | var global_variable = 0; 26 | function foo(){ 27 | global_variable = 0; 28 | for (var i=0; i (hors usage API) | CO-11/ CO-12/ CO-13/ AR-06 | 8 | 21 | | 3 | Maximiser l’utilisation des caches | AR-15 | 6 | 22 | | 4 | Utiliser un format de données adapté | AR-7 | 5 | 23 | | 5 | Utiliser les flux HTTP de manière responsable | AR-16/ AR-17 | 4 | 24 | -------------------------------------------------------------------------------- /introduction/007_intro_INT-07.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: INT-07 3 | page-background: backgrounds/vincent2.jpg 4 | --- 5 | # SOMMAIRE 6 | 7 | 1. Stratégie 8 | - Démarche 9 | - Pilotage 10 | 2. UX 11 | - Personas 12 | - Fonctionnalités 13 | - Messages d'informations 14 | - SEO 15 | 3. UI 16 | - Interface 17 | - Contenue 18 | 4. Code 19 | - CSS 20 | - Javascript 21 | - Java 22 | - Transverse 23 | - Methodes et outils 24 | 5. Architecture 25 | - Infrastructure 26 | - Données 27 | - Réseau 28 | -------------------------------------------------------------------------------- /introduction/img/composant_numerique.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/composant_numerique.avif -------------------------------------------------------------------------------- /introduction/img/composant_numerique.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/composant_numerique.jpg -------------------------------------------------------------------------------- /introduction/img/convert.sh: -------------------------------------------------------------------------------- 1 | convert -resize 800\> -background white -alpha remove -alpha off -quality 80 -strip eco_conception.png eco_conception.jpg 2 | convert -resize 800\> -background white -alpha remove -alpha off -quality 80 -strip composant_numerique.avif composant_numerique.jpg 3 | convert -resize 800\> -background white -alpha remove -alpha off -quality 80 -strip ecoconception_des_services_numeriques.avif ecoconception_des_services_numeriques.jpg 4 | convert -resize 800\> -background white -alpha remove -alpha off -quality 80 -strip intro_004_lazy_loading.avif intro_004_lazy_loading.jpg 5 | -------------------------------------------------------------------------------- /introduction/img/eco_conception.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/eco_conception.jpg -------------------------------------------------------------------------------- /introduction/img/eco_conception.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/eco_conception.png -------------------------------------------------------------------------------- /introduction/img/ecoconception_des_services_numeriques.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/ecoconception_des_services_numeriques.avif -------------------------------------------------------------------------------- /introduction/img/ecoconception_des_services_numeriques.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/ecoconception_des_services_numeriques.jpg -------------------------------------------------------------------------------- /introduction/img/intro_004_lazy_loading.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/intro_004_lazy_loading.avif -------------------------------------------------------------------------------- /introduction/img/intro_004_lazy_loading.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/introduction/img/intro_004_lazy_loading.jpg -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-Bold.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-BoldItalic.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-ExtraBold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-ExtraBold.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-ExtraBoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-ExtraBoldItalic.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-Light.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-LightItalic.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-Medium.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-MediumItalic.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-Regular.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-RegularItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-RegularItalic.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-Thin.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-Thin.otf -------------------------------------------------------------------------------- /pandoc-assets/fonts/Marianne-ThinItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/pandoc-assets/fonts/Marianne-ThinItalic.otf -------------------------------------------------------------------------------- /pandoc-assets/meta.yml: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Référentiel des bonnes pratiques d’écoconception" 3 | subtitle: "Appliqué aux services numériques" 4 | author: "Auteur: France Travail" 5 | date: "2024-10-01" 6 | subject: "Bas carbone" 7 | keywords: [Bas carbone, éco-conception] 8 | lang: fr-FR 9 | titlepage: true 10 | titlepage-color: "FFFFFF" 11 | titlepage-text-color: "393F7F" 12 | titlepage-rule-color: "393F7F" 13 | titlepage-rule-height: 2 14 | #titlepage-logo: img/Republique-francaise-logo.jpg 15 | page-background: 16 | page-background-opacity: 17 | links-as-notes: true 18 | lot: false 19 | lof: false 20 | toc: false 21 | book: false 22 | classoption: oneside 23 | geometry: a4paper,margin=2cm 24 | mainfont: Marianne-Regular.otf 25 | mainfontoptions: 26 | - Path=./pandoc-assets/fonts/ 27 | - Scale=1.0 28 | - BoldFont=Marianne-Bold.otf 29 | - ItalicFont=Marianne-RegularItalic.otf 30 | - BoldItalicFont=Marianne-BoldItalic.otf 31 | header-left: 32 | header-center: 33 | header-right: 34 | footer-left: "France Travail" 35 | footer-center: "License: GNU Free Documentation License 1.3" 36 | footer-right: 37 | subparagraph: true 38 | listings-disable-line-numbers: true 39 | listings-no-page-break: false 40 | disable-header-and-footer: false 41 | header-includes: | 42 | \usepackage{sectsty} 43 | \sectionfont{\clearpage} 44 | --- 45 | -------------------------------------------------------------------------------- /strategie/001_strategie_ST-01.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-01 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Équipe produit 6 | benefice: Environnement 7 | --- 8 | # ST-01 - Sensibiliser et former les parties prenantes à l’écoconception 9 | 10 | ## Description 11 | 12 | Dans un contexte où la transformation digitale des entreprises est en plein essor, chaque geste compte. 13 | Aujourd’hui, **73% des français ne réalisent pas l’impact du digital sur l’environnement**, il est donc essentiel de provoquer dès à présent une prise de conscience chez eux et leur donner les clés pour agir. 14 | Une fois les collaborateurs sensibilisés et formés aux enjeux et bonnes pratiques clés de l’écoconception, il est nécessaire de leur fournir les moyens de mettre en œuvre ce qu’ils ont appris. Réaliser le plan de formation à l’écoconception est un moyen simple et efficace pour y parvenir 15 | Par ailleurs, une documentation compréhensible, claire et détaillée sur la mise en œuvre concrète des bonnes pratiques d’écoconception doit être mise à disposition des collaborateurs. 16 | Un accompagnement de proximité peut aussi être mis en place pour guider les équipes qui le souhaitent et approfondir les bonnes pratiques. 17 | 18 | ## Mise en œuvre 19 | 20 | En tant qu’équipe produit, je participe à des formations à l’écoconception de services numériques en sensibilisant les différentes parties prenantes du projet: 21 | 22 | - **Les PO/PM** 23 | - **Les UX/UI designers** 24 | - **Les intégrateurs et développeurs** 25 | - **Les Ops** 26 | 27 | J’implémente l’utilisation des outils présentés lors des formations dans mon activité professionnelle. 28 | 29 | ## Tests d’acceptance 30 | 31 | 100% des membres de l’équipe ont assisté à une session de formation à l’écoconception 32 | -------------------------------------------------------------------------------- /strategie/002_strategie_ST-02.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-02 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Équipe produit 6 | benefice: Environnement 7 | --- 8 | # ST-02 - Désigner un référent écoconception 9 | 10 | ## Description 11 | 12 | Il est essentiel qu’une personne soit désignée au sein de l’équipe pour porter le sujet de l’écoconception. Cela permet notamment de s’assurer que la dimension écoconception sera bel et bien prise en compte dans le projet. Le référent écoconception n’a pas besoin d’avoir de connaissances techniques sur l’écoconception. 13 | Tous les métiers peuvent porter cette responsabilité. D’usage, nous avons plutôt observé les profils associés à la conduite de projet (PO, PM, etc.) s’emparer de ce rôle, mais dans certains cas, des profils techniques (développeur) peuvent tout à fait le faire. L’important est que la personne référente soit sensible au sujet de l’écoconception. 14 | Cette bonne pratique s’est d’ailleurs révélée très importante lors des POCs d’écoconception menés fin 2022. 15 | 16 | ## Mise en œuvre 17 | 18 | En tant qu’équipe produit, je me concerte pour désigner un référent écoconception. 19 | 20 | ## Tests d’acceptance 21 | 22 | Un référent d’écoconception a été désigné par l’équipe 23 | -------------------------------------------------------------------------------- /strategie/003_strategie_ST-03.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-03 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Product Owner 6 | benefice: Environnement 7 | --- 8 | # ST-03 - Questionner la valeur du service numérique au vu de son impact environnemental 9 | 10 | ## Description 11 | 12 | La création de projets numériques ou l’ajout de fonctionnalités provient généralement d’une demande métier ou de la stratégie de l’entreprise. Un projet numérique est validé ou non selon des contraintes de budget, disponibilité des ressources, stratégie, etc. La dimension environnementale n’est pas prise en compte dans cette évaluation. Or, un service numérique induit intrinsèquement des impacts environnementaux. Dès lors, il est nécessaire de **prendre en compte les impacts environnementaux** (en plus des autres critères) de ce nouveau service numérique / nouvelle fonctionnalité et de les confronter à la valeur réelle apportée. Cela permettra de statuer de la création ou non d’un projet. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que Product Owner, j’utilise l’outil du Cigref afin d'[estimer, en avance de phase, le futur impact environnemental de mon service](https://www.cigref.fr/wp/wp-content/uploads/2023/05/Outil-devaluation-RSE-et-projet-IT_VF-1.xlsx).  17 | Cet outil sous forme d’une grille d’évaluation sur Excel, a pour objectif d’aider à la maîtrise de l'impact environnemental, économique et de gouvernance d'une initiative et de permettre aux parties prenantes de s'orienter vers la conception de solutions plus durables. Il intervient en amont de la réalisation du projet et a pour objectif de juger de la cohérence d’un projet IT avec votre politique RSE. 18 | La grille d’évaluation délivre un score RSE qui vous aidera à orienter vos choix. 19 | 20 | ## Tests d’acceptance 21 | 22 | - La grille d’évaluation du **Coût RSE d’un projet** a été utilisée 23 | - La création ou non du projet numérique a pris en compte le résultat obtenu dans la grille d’évaluation. 24 | -------------------------------------------------------------------------------- /strategie/004_strategie_ST-04.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-04 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Product Owner 6 | benefice: Obsolescence 7 | --- 8 | # ST-04 - Documenter le produit tout au long de son cycle de vie 9 | 10 | ## Description 11 | 12 | Afin de comprendre le service numérique, son écosystème et d'en maitriser les impacts, une documentation claire, cohérente, précise et standardisée doit être rédigée par l’équipe produit. Ces éléments devront à la fois être transmis aux équipes de réalisation et archivés pour documenter le produit dans sa globalité. Cela facilitera la prise en main et l'évolution du service numérique par tout collaborateur non initié. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’équipe produit, je renseigne, tout au long du cycle de vie du service numérique : 17 | 18 | - Le contexte dans lequel le service numérique a été créé (objectif, équipe, etc.)  19 | - Les dépendances du service numérique (services tiers utilisés, source des données, etc.) 20 | - Les choix techniques réalisés 21 | - L’ensemble des choix et arbitrages effectués vis-à-vis de l’écoconception ainsi que leurs justifications (ex : stratégie de décommissionnement) 22 | 23 | ## Tests d’acceptance 24 | 25 | - L’écosystème du service numérique ainsi que les technologies utilisées sont renseignés dans un outil 26 | - Les choix et arbitrages effectués vis-à-vis de l’écoconception et leurs justifications sont renseignés dans un outil 27 | -------------------------------------------------------------------------------- /strategie/005_strategie_ST-05.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-05 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Equipe produit 6 | benefice: Coûts 7 | --- 8 | # ST-05 - Définir une stratégie de décommissionnement 9 | 10 | ## Description 11 | 12 | Afin de ne pas laisser actifs des données, composants ou matériels utilisés par le service numérique non utilisé, il est important d'identifier et de prévoir les dépendances entre matériels et fonctionnalités déployés. L'identification des scénarios de fin d'usage ou de vie pour les composants matériels, logiciels et les données décommissionnés doit aussi être anticipée. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’équipe produit, je définis une stratégie de fin de vie : 17 | 18 | - des données : décider de conserver les données en l'état, les détruire, les réaffecter à un autre usage, ou les archiver lors du décommissionnement du service sur politique de vie des données 19 | - des composants logiciels : pourra-t-on les réutiliser en interne ou les mettre à disposition en Open source ? 20 | - du matériel : le matériel pourrait être réemployé au sein de l’entreprise après le décommissionnement du service numérique 21 | - des données, composants, matériel que le nouveau service en place va permettre de décommissionner 22 | Je rédige cette stratégie dans la documentation opérationnelle de la démarche. Je peux m’appuyer sur les éléments partagés dans démarche produit. 23 | 24 | ## Tests d’acceptance 25 | 26 | - Une stratégie de décommissionnement a été élaborée, rédigée dans la documentation opérationnelle et partagée à toute l’équipe. 27 | -------------------------------------------------------------------------------- /strategie/006_strategie_ST-06.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-06 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Product Owner 6 | benefice: Environnement 7 | --- 8 | # ST-06 - Intégrer l'écoconception dans la backlog de l'équipe 9 | 10 | ## Description 11 | 12 | Afin de garantir la prise en compte des enjeux d’écoconception par les équipes, il est conseillé d’ajouter les activités d’écoconception directement dans **la backlog de l’équipe**. Cela peut être réalisé de plusieurs façons : 13 | Créer des features ou US spécifiques à l’écoconception 14 | Ajouter une dimension écoconception à la formulation des US : « en tant que … je veux … afin de …» + « en veillant à… » ou « en se limitant à …» ou « en autorisant… » 15 | Intégrer des critères d’écoconception dans la Definition of Done 16 | 17 | ## Mise en œuvre 18 | 19 | En tant que Product Owner, je détermine la manière la plus adaptée d’intégrer l’écoconception à la backlog et construis la backlog en conséquence. 20 | Les features/US écoconception intégrées pourront être priorisées en fonction de leur impact sur le service. 21 | 22 | ## Tests d’acceptance 23 | 24 | La backlog contient features/US incluant l’écoconception. 25 | -------------------------------------------------------------------------------- /strategie/007_strategie_ST-07.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-07 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Equipe produit 6 | benefice: Environnement 7 | --- 8 | # ST-07 - Prévoir des temps/de la CAF dédié(e)s à l’écoconception 9 | 10 | ## Description 11 | 12 | Afin de faciliter la prise en compte de l’écoconception par l’équipe, et de piloter la mise en œuvre de la démarche, il est essentiel d’organiser des créneaux ou prévoir de la CAF dédié(e)s à l’écoconception réunissant toute l’équipe. 13 | Des revues du services numériques sont également à prévoir. Elles sont l’occasion pour l’équipe de vérifier la qualité du service numérique. 14 | Dans le cadre de l’écoconception, elles permettent également de vérifier l’application des bonnes pratiques. Aussi, il conviendra d’organiser des revues régulières, par exemple à la fin de chacune des étapes du cycle de vie du service numérique (conception, développement, déploiement et fin de vie). 15 | 16 | ## Mise en œuvre 17 | 18 | - **En tant que Scrum Master :** je m’assure que la thématique de l’écoconception soit abordée dans les cérémonies de l’équipe 19 | - **En tant que Tech lead :** j’inclus un temps relatif à l’écoconception dans les cérémonies que j’anime. 20 | - **En tant que Scrum Master :** j’organise des points réguliers avec le référent écoconception pour lui présenter l’état d’avancement de la démarche et identifier d’autres leviers d’écoconception et m’assure que de la CAF est prévue pour inclure le sujet d’écoconception. 21 | - **En tant qu’équipe produit :** j’organise régulièrement des instances de revues de mon service numérique, au cours desquelles je vérifie les erreurs de code, j’anticipe les éventuels problèmes et les corrige. Je prends également un temps dédié pour vérifier que les choix de conception ont été respectés. 22 | 23 | ## Tests d’acceptance 24 | 25 | * L’équipe aborde la thématique de l’écoconception à chaque sprint ou autre instance projet 26 | * Des points réguliers sont organisés avec le référent écoconception 27 | * Une CAF est réservée pour l’écoconception lors du PI Planning 28 | * Des revues du service numérique ont été organisées à chaque étape du cycle de vie du service numérique 29 | -------------------------------------------------------------------------------- /strategie/008_strategie_ST-08.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-08 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Service tiers 5 | responsable: Equipe produit 6 | benefice: Performance Environnement 7 | --- 8 | # ST-08 - Choisir un service tiers écoconçu 9 | 10 | ## Description 11 | 12 | Les services tiers sont des services proposés par des fournisseurs externes. Il peut s’agir, par exemple des publicités, analytics, tracking, contenus (image, texte, vidéo, etc.), chat, fonctionnalités avancées, scripts d’A/B testing… 94 % des sites web contiennent des scripts tiers, alors qu’ils alourdissent les pages, induisant ainsi des impacts environnementaux non négligeables. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’équipe produit, lorsque plusieurs alternatives sont possibles pour un même service tiers, je choisis le service tiers le moins consommateur. Les critères à comparer sont par exemple : 17 | 18 | - Je choisis un éditeur respectant les principes d’écoconception ( arborescence frugale, format vidéo <720p, quantité limitée de scripts tiers…) 19 | - L’empreinte environnementale du service tiers, communiquée par le fournisseur ou évaluée au moyen d’outils de mesure par l’équipe produit 20 | - Je privilégie les hébergeurs notés PUE (Power Usage Effectiveness) <1,5, respectant les normes ISO 14001 ou 50001. 21 | 22 | ## Tests d’acceptance 23 | 24 | - Une analyse comparative a été menée pour chaque service tiers utilisé. 25 | -------------------------------------------------------------------------------- /strategie/009_strategie_ST-09.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-09 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Editeurs de contenus, PO/PM 6 | benefice: Environnement 7 | --- 8 | # ST-09 - Définir une stratégie d'archivage et de suppression des contenus obsolètes 9 | 10 | ## Description 11 | 12 | 91% de toutes les pages du web n’ont aucun trafic sur Google (Ahrefs, 2018). Dès lors, on peut s’interroger sur la valeur du contenu produit, et d’une manière plus générale, sur la stratégie éditoriale adoptée. 13 | Une stratégie éditoriale sobre consiste à : 14 | 15 | - Réduire la production de contenus à l’essentiel 16 | - Éviter le green washing 17 | - Adopter une diffusion raisonnée des contenus 18 | - Piloter le cycle de vie des contenus 19 | 20 | ## Mise en œuvre 21 | 22 | En tant qu’éditeur de contenus : 23 | 24 | - Avant de concevoir et publier du contenu, j’évalue si cette publication va réellement apporter quelque chose à l’utilisateur / à mon entreprise. Je me demande également si cette publication ne relève pas du green washing (Quel est l’objectif de cette publication : servir l’utilisateur ou bien récolter l’adhésion des utilisateurs en communiquant sur des sujets environnementaux ?) 25 | - Je diffuse mon contenu sur les plateformes adaptées et à une fréquence raisonnée 26 | - Tout au long du cycle de vie du contenu, je surveille son utilisation et l’archive et/ou supprime s’il n’est pas ou peu consulté, ou obsolète. Cette stratégie peut être automatisée en définissant une date d’expiration et un processus d'archivage et/ou de purge automatique. 27 | 28 | En tant que PO/PM je m’assure qu’une stratégie d’archivage et de suppression des contenus obsolète a bien été définie dans le cadre de mon produit. 29 | 30 | ## Tests d’acceptance 31 | 32 | - Une stratégie éditoriale sobre a été définie 33 | - Cette stratégie est appliquée par tous les contributeurs à l’échelle du service numérique 34 | -------------------------------------------------------------------------------- /strategie/010_strategie_ST-10.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-10 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Acheteurs 6 | benefice: Environnement 7 | --- 8 | # ST-10 - Imposer des exigences d’écoconception aux fournisseurs de services numériques 9 | 10 | ## Description 11 | 12 | Un projet est rarement réalisé en totalité avec des ressources internes : de nombreuses ressources externes sont bien souvent mobilisées. Dans ce contexte, elles se doivent d’être également alignées avec une démarche d’écoconception 13 | L'inclusion de clauses environnementales par les départements des achats dans les appels d'offres de services numériques est une démarche essentielle, pour réduire l'impact environnemental des entreprises. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant qu’acheteur/prescripteur, lorsque je lance un appel d’offres de service numérique, j’y inclus les critères d’écoconception. Un clausier qui intègre les dimensions /critères/ acceptances a été rédigé et est accessible par les parties prenantes. 18 | 19 | ## Tests d’acceptance 20 | 21 | Les critères d’écoconception ont été intégrés au processus d’achats. 22 | -------------------------------------------------------------------------------- /strategie/011_strategie_ST-11.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-11 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Application de la démarche 5 | responsable: Equipe produit 6 | benefice: Environnement 7 | --- 8 | # ST-11 - Fixer des objectifs de réduction de l’empreinte environnementale du service 9 | 10 | ## Description 11 | 12 | La démarche d’écoconception vise à réduire l’empreinte environnementale des services numériques sur lesquels elle est appliquée. Afin de définir une trajectoire d’optimisation, il est nécessaire de se fixer des objectifs de réduction de l’empreinte environnementale du service. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’équipe produit, après avoir mesuré ma maturité d’écoconception, j’identifie les bonnes pratiques d’écoconception que je peux appliquer et estime (travail en cours par l’équipe écoconception), à partir de ce résultat, un objectif de réduction de l’empreinte environnementale du service ou de la page en question. 17 | 18 | ## Tests d’acceptance 19 | 20 | - Un objectif de réduction de l’empreinte environnementale du service ou de la page concernée a été défini. 21 | - Un objectif de bonnes pratiques à mettre en oeuvre a été défini 22 | -------------------------------------------------------------------------------- /strategie/012_strategie_ST-12.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-12 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: Equipe produit 6 | benefice: Environnement 7 | --- 8 | # ST-12 - Mesurer les impacts environnementaux du service tout au long de son cycle de vie 9 | 10 | ## Description 11 | 12 | Il est nécessaire d’avoir une vision globale des impacts du service numérique, à chaque phase de son cycle de vie afin : 13 | 14 | - d’identifier les leviers d’amélioration 15 | - de pouvoir mesurer le gain environnemental obtenu par la mise en œuvre des bonnes pratiques d’écoconception 16 | - d’éviter les transferts d’impacts 17 | 18 | Les indicateurs d'impacts environnementaux les plus courants sont : 19 | 20 | - la consommation électrique 21 | - les émissions de gaz à effet de serre (GES) 22 | - la consommation d'eau 23 | 24 | ## Mise en œuvre 25 | 26 | En tant qu’équipe produit, j’utilise un outil de mesure de l’empreinte environnementale. Cet outil alimente un dashboard qui me permet de suivre l’impact environnemental du service tout au long de son cycle de vie. 27 | 28 | ## Tests d’acceptance 29 | 30 | Un dashboard des impacts environnementaux existe et est alimenté tout au long du cycle de vie du service numérique. 31 | -------------------------------------------------------------------------------- /strategie/013_strategie_ST-13.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-13 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: Développeur / référenceur SEO 6 | benefice: Performance 7 | --- 8 | # ST-13 - Suivre les métriques fournies par les Core Web Vitals 9 | 10 | ## Description 11 | 12 | Les métriques de performance et de consommation d’un service numérique permettent d’identifier au plus tôt les problèmes (lenteur, surconsommation, etc.) liés à une fonctionnalité. 13 | Les Core Web Vitals, ou Signaux Web Essentiels, sont 4 indicateurs définis par Google et mesurant la performance d’une page en fonction de données d'utilisation réelles : 14 | 15 | - LCP (Largest Contentful Paint) : temps nécessaire pour afficher le plus grand élément visible. 16 | - FID (First Input Delay) : temps nécessaire pour que la page réponde aux actions des utilisateurs. 17 | - CLS (Cumulative Layout Shift) : fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus. 18 | - INP (interaction to Next Paint) : réactivité globale d’une page aux interactions des utilisateurs en observant le délai pour répondre à chacune d’entre elle au cours d’une visite sur la page 19 | 20 | Les standards définis par Google sont les suivants : 21 | 22 | | | Bon | Amelioration nécessaire | Médiocre | 23 | | :-- | :------ | ------------------------ | --------- | 24 | | LCP | <2,5s | <=4s | >4s | 25 | | FID | <100ms | <=300ms | >300ms | 26 | | CLS | 0,25 | 27 | | INP | <=200ms | <= 500ms | >500ms | 28 | 29 | Pour en savoir plus, se référer à la [documentation Google associée](https://support.google.com/webmasters/answer/9205520?#status_explanation). 30 | 31 | ## Mise en œuvre 32 | 33 | En tant que développeur, plusieurs outils sont à ma disposition pour surveiller les Core Web Vitals, par exemple la [Google Search Console](https://search.google.com/search-console/about) ou encore l’outil [WebPageTest](https://www.webpagetest.org/). Cet outil alimente un dashboard qui me permet de suivre les Core Web Vitals du service tout au long de son cycle de vie. 34 | 35 | ## Tests d’acceptance 36 | 37 | Les Core Web Vitals sont suivis tout au long du cycle de vie du service numérique 38 | 39 | - Le LCP est inférieur ou égal à 4 secondes, sinon, une alerte est remontée 40 | - Le FID est inférieur ou égal à 300 millisecondes, sinon, une alerte est remontée 41 | - Le CLS est inférieur ou égal à 0,25, sinon, une alerte est remontée 42 | - Le INP est inférieur ou égal à 500 milisecondes, sinon, une alerte est remontée 43 | -------------------------------------------------------------------------------- /strategie/014_strategie_ST-14.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-14 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: Equipe produit 6 | benefice: Performance 7 | --- 8 | # ST-14 - Mesurer l’expérience utilisateur 9 | 10 | ## Description 11 | 12 | L’UX a pour objectif d’offrir une expérience utilisateur fluide, agréable et intuitive. 13 | Certains indicateurs permettent de mesurer le niveau d’écoconception du produit ou service numérique, en vue de l’améliorer : 14 | 15 | - Le temps moyen passé par un utilisateur sur un parcours (temps de session...) 16 | - Le taux d’abandon 17 | - Le taux de clics, etc... 18 | 19 | ## Mise en œuvre 20 | 21 | A mettre en oeuvre avec un plan de taguage avec l’équipe Audience et mesures 22 | En tant qu’équipe produit (PM, PO, data analyst, UX designer) 23 | Je m’assure que : 24 | 25 | - le TTI (Time to interactive) est inférieur à 7,3 s (Mesure côté STUDIO A&M) 26 | - le FCP (First Contentful paint) est inférieur ou égal à 4s (Mesure côté STUDIO A&M) 27 | Je surveille et mesure les parcours utilisateurs : le temps passé par page / parcours , le taux d’abandon, taux de clics (Mesure côté STUDIO A&M) 28 | En tant qu’UX designer 29 | - Je réalise des tests utilisateurs pour m’assurer qu’ils peuvent effectuer leurs tâches en un minimum de temps. 30 | 31 | ## Tests d’acceptance 32 | 33 | - Les indicateurs d’UX sont vérifiés tout au long du cycle de vie du service numérique 34 | - Le TTI est inférieur à 7,3s 35 | - Le FCP est inférieur à 4s 36 | - Le temps moyen passé par l’utilisateur sur un parcours n’a pas varié de manière anormale depuis la dernière modification 37 | - La distribution des clics ne laisse pas entrevoir des éléments inutilisés 38 | - Le taux d’abandon n’a pas subi une forte augmentation depuis la dernière modification 39 | -------------------------------------------------------------------------------- /strategie/015_strategie_ST-15.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-15 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: PO/ AMOA 6 | benefice: Performance 7 | --- 8 | # ST-15 - Être attentif aux besoins des utilisateurs et vérifier l’apport de valeur du produit 9 | 10 | ## Description 11 | 12 | Lors de la phase d’utilisation, l’utilité de chaque fonctionnalité doit être réinterrogée au vu des usages et de leurs évolutions. Il s'agit ici de prendre du recul sur le service, et de valider l'intérêt réel et l’apport réel de chaque fonctionnalité dans le contexte actuel. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que Product Owner ou AMOA, je mesure et j’analyse régulièrement : 17 | 18 | - La satisfaction des utilisateurs de mon service numérique (par exemple via des questionnaires, des indicateurs comme le NPS, etc.), la solution peut être définie lors de la session de travail sur les indicateurs 19 | - Les données d’analytics/traffic pour mieux comprendre le besoin des utilisateurs et leur comportement 20 | - L’utilisation des fonctionnalités d’analytics (ex: Piano…) afin d’identifier les fonctionnalités qui tendent à être plus ou moins utilisées 21 | 22 | ## Tests d’acceptance 23 | 24 | - La satisfaction des utilisateurs est mesurée tout au long du cycle de vie du service numérique 25 | - Les données d’analytics sont surveillées tout au long du cycle de vie du service numérique 26 | - L’utilisation des fonctionnalités est surveillée tout au long du cycle de vie du service numérique 27 | -------------------------------------------------------------------------------- /strategie/016_strategie_ST-16.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-16 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: Equipe Produit 6 | benefice: Performance 7 | --- 8 | # ST-16 - Maîtriser la taille du DOM 9 | 10 | ## Description 11 | 12 | Le DOM peut se définir de façon simplifiée comme un ensemble de balises HTML ou XML décrivant la structure de la page chargée par le navigateur. Plus le DOM est complexe, c’est-à-dire plus il comporte de balises, plus il faut de puissance (RAM et CPU) pour l'afficher. Ainsi, plus la puissance pour afficher la page est importante et plus cela contribue à raccourcir la durée de vie de l'ordinateur sur lequel il s'exécute et plus la consommation d’énergie associée à l’utilisation du service numérique est importante. Ces deux conséquences entrainent des impacts environnementaux non négligeables. Limiter la complexité de la page est donc la taille du DOM est donc primordial. 13 | 14 | A ce sujet, selon le [guide des développeurs web de Google](https://web.dev/dom-size/), un arbre de DOM optimal inclut les caractéristiques suivantes : 15 | 16 | - Moins de 1500 éléments au total (voire, si possible, moins de 800 éléments) 17 | - Une profondeur maximale de 32 éléments 18 | - N’a pas d’élément parent avec plus de 60 éléments enfants 19 | 20 | ## Mise en œuvre 21 | 22 | En tant qu’équipe produit, je définis le nombre maximum d’éléments du DOM que ma page ne doit pas dépasser lors de la session de travail sur les indicateurs. 23 | 24 | En tant que développeur, j'utilise un outil en capacité de m’informer sur le nombre d’éléments du DOM .  25 | 26 | L’application de certaines bonnes pratiques de ce référentiel contribuent à minimiser le nombre d’éléments du DOM (ex : supprimer les éléments décoratifs, utiliser des spritesheets CSS, combiner les fichiers javascript et CSS, etc.) 27 | 28 | ![Exemple d'utilisation du DOM](img/exemple_d_utilisation_du_DOM.jpg) 29 | *Exemple d'utilisation du DOM* 30 | 31 | ## Tests d’acceptance 32 | 33 | - Un nombre d’éléments maximal par page (ex : 600 éléments maximum) a été défini en fonction des contraintes du service numérique 34 | - Le nombre d’éléments du DOM est inférieur à la limite définie pour chaque page 35 | -------------------------------------------------------------------------------- /strategie/017_strategie_ST-17.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-17 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: Equipe Produit 6 | benefice: Performance 7 | --- 8 | # ST-17 - Limiter le nombre de requêtes 9 | 10 | ## Description 11 | 12 | Lorsque le navigateur affiche une page, il doit émettre une requête vers un serveur HTTP pour chaque fichier à télécharger. Plus le nombre de requêtes est important, plus les mécanismes de traitements et d'échanges vont consommer des ressources et donc augmenter les impacts environnementaux associés. Dès lors, il convient de limiter au maximum le nombre de requêtes. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’équipe produit, je définis un nombre de requêtes maximum par écran lors de la session de travail sur les indicateurs et suis ce nombre avec l’outil préconisé (Green IT Analysis). Le nombre de requêtes doit tenir compte de toutes les ressources téléchargées (composants d'interface, données, contenus, scripts, feuilles de style...). 17 | 18 | ## Tests d’acceptance 19 | 20 | - Un nombre de requêtes maximal par écran (ex : 40 requêtes maximum) a été défini en fonction des contraintes du service numérique 21 | - Le nombre de requêtes par écran est inférieur à la limite définie 22 | 23 | ## Mesures 24 | 25 | Utiliser les outils pour réaliser les diagnostics (plugin disponibles dans les extensions de navigateur : 26 | GreenIT Analysis et Lighthouse.) 27 | -------------------------------------------------------------------------------- /strategie/018_strategie_ST-18.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-18 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: Equipe Produit 6 | benefice: Environnement 7 | --- 8 | # ST-18 - Établir et respecter un budget environnemental 9 | 10 | ## Description 11 | De la même façon qu’un projet numérique est contraint par un budget financier ou un planning, il pourrait être contraint par un budget environnemental. Par exemple, des contraintes sur le poids des pages pourraient être imposées (en Mo). 12 | 13 | ## Mise en œuvre 14 | 15 | En tant qu’équipe produit, lors de la session de travail sur les indicateurs, j’établis un budget environnemental. Les différentes étapes de cet atelier sont les suivantes : 16 | 17 | - Définir les conditions de connexion les plus difficiles pour l’usager et pour lesquelles la DSI souhaite que le service numérique puisse fonctionner (exemple : mauvaise connexion 3G) 18 | - Décider le temps de chargement possible dans ces conditions (exemple : 6 secondes) 19 | - Une fois ces critères définis, l’outil [PerformanceBudget](https://www.performancebudget.io/) renvoie le poids de page cible à atteindre. Si l’équipe trouve ce poids trop contraignant, des ajustements peuvent être réalisés (augmentation maximum à hauteur de 25% du budget) 20 | - Pour obtenir un budget global pour le service numérique, il faut multiplier le budget obtenu pour une page par le nombre de pages du produit. On obtient ainsi un budget global qu’il est possible de répartir entre les différentes pages. Tout dépassement du budget doit être justifié (comparaison avec un site concurrent écoconçu, etc.) 21 | 22 | *Par exemple, si je veux que chaque page du service puisse se charger en 6 secondes avec une mauvaise connexion 3G, l’outil PerformanceBudget préconise un budget de 573 ko par page. 23 | Sachant que la page d’accueil la plus légère du site concurrent est Indeed et que son poids est 1285 ko, soit plus de 2 fois le budget recommandé, je peux me permettre d’augmenter le budget préconisé, dans la limite des 25%. 24 | Admettons que je choisisse 25%, mon budget s’élève maintenant à 716 ko. 25 | Supposons que le service numérique soit composé de 10 pages. Le budget global du service numérique est 7,16 Mo. Je peux choisir de répartir ce budget entre les différentes pages de mon service numérique. Par exemple; j’alloue davantage de budget à ma page d’accueil (ex : 1 Mo), qui est souvent plus lourde que les autres pages.* 26 | 27 | ## Tests d’acceptance 28 | 29 | - Un budget environnemental doit être défini et suivi avec l’outil préconisé (cf page 11) 30 | - Chaque page créée doit respecter le budget environnemental défini 31 | -------------------------------------------------------------------------------- /strategie/019_strategie_ST-19.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: ST-19 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Pilotage 5 | responsable: Equipe Produit 6 | benefice: Obsolescence 7 | --- 8 | # ST-19 - Vérifier la compatibilité du service numérique avec des faibles débits 9 | 10 | ## Description 11 | 12 | Lorsqu’un service numérique s'adresse à un large public, il est impossible de maîtriser le niveau de connectivité. Cependant, il est essentiel de veiller à ne pas exclure certains publics qui n'ont pas accès à des hauts débits (débit inférieur à 512 kbit/s, équivalent à de la 3G). Dès lors, il est nécessaire d'avoir un service numérique nécessitant peu de débit pour éviter les fractures numériques. Minimiser le débit nécessaire au fonctionnement d’un service numérique sera aussi bénéfique pour l’environnement, car moins de données seront transférées sur le réseau. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’équipe produit, je définis les pires conditions dans lesquelles mon service numérique doit pouvoir fonctionner (3G/4G, sur un terminal ancienne génération, etc.). 17 | En phase de conception et en phase de recette d'un service numérique, je teste les fonctionnalités critiques du service en simulant ces conditions dégradées. 18 | 19 | ## Tests d’acceptance 20 | 21 | - Les conditions dégradées dans lesquelles le service numérique doit pouvoir fonctionner ont été définies 22 | - Tout au long du cycle de vie du service numérique, des tests sont réalisés sur les fonctionnalités essentielles du service numérique pour déterminer si elles sont réalisables dans des conditions dégradées 23 | -------------------------------------------------------------------------------- /strategie/img/exemple_d_utilisation_du_DOM.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/France-Travail/referentiel-ecoconception/fbcb767f464ca527f6a26369a253d38e9a779b05/strategie/img/exemple_d_utilisation_du_DOM.jpg -------------------------------------------------------------------------------- /ui/001_user_interface_UI-01.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-01 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Interface 5 | responsable: Développeur 6 | benefice: Performance 7 | bonne-pratique-essentielle: oui 8 | --- 9 | # UI-01 - Utiliser un mécanisme de lazy loading 10 | 11 | ## Description 12 | 13 | Le lazy loading consiste à charger et afficher les images situées sous la ligne de flottaison lorsque celles-ci entrent dans l’écran. Cette technique permet de ne pas charger les images tant que l’utilisateur ne les voit pas (ex: les images se situant plus bas sur la page). Ainsi, le lazy loading garantit que les images ne soient chargées que lorsque cela est nécessaire. Cela permet d'économiser de la puissance de traitement, et donc la consommation d’énergie associée étant donné que les utilisateurs ne scrollant pas ne téléchargent pas les images concernées. 14 | 15 | ## Mise en œuvre 16 | 17 | En tant que développeur, j’ajoute l’attribut loading="lazy" sur les éléments `` ou ``` 20 | 21 | ## Tests d’acceptance 22 | 23 | L’attribut ```` est présent sur les contenus le nécessitant 24 | -------------------------------------------------------------------------------- /ui/002_user_interface_UI-02.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-02 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Contenus 5 | responsable: UX/ UI Designer 6 | benefice: Utilisabilité 7 | --- 8 | # UI-02 - Éviter le défilement de contenus 9 | 10 | ## Description 11 | 12 | L’infinit scroll est une technique qui permet aux utilisateurs de faire défiler le contenu sans apercevoir la fin de la page sur un site internet. Lorsqu’elle est utilisée, cette technique entraine une augmentation de l’utilisation (et donc la consommation) de la mémoire de l’utilisateur et donc du processeur, ce qui affecte directement l’impact environnemental associé.  13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’UX/UI Designer, je propose une solution de pagination ou un bouton « voir plus » sur les pages présentant une liste dont le nombre de contenus est supérieur à 10. 17 | 18 | ## Tests d’acceptance 19 | 20 | * Aucune page n’est constituée d’un scroll infini 21 | * Une page/liste est limitée à 10 éléments maximum 22 | -------------------------------------------------------------------------------- /ui/003_user_interface_UI-03.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-03 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Contenus 5 | responsable: Développeur 6 | benefice: Environnement 7 | --- 8 | # UI-03 - Fournir des CSS print optimisés 9 | 10 | ## Description 11 | 12 | Les CSS print permettent de proposer une version imprimable d’une page web. Les pages web sont composées d’éléments (headers, footers, etc) qui ne sont pas forcément pertinents pour l’utilisateur et qui induiraient donc du gaspillage de ressources à l’impression. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant que Product Owner, je sélectionne les pages pour lesquelles des CSS print doivent être mis à disposition (les pages importantes et destinées à être imprimées). 17 | En tant que développeur ou intégrateur, je réalise un CSS print optimisé en utilisant 18 | 19 | * Un fond blanc 20 | * Uniquement le contenu pertinent pour l’utilisateur. Ainsi, le header, le footer, le menu, le sidebar, etc. doivent être masqués. Toutes les images sauf celles du contenu doivent être supprimées. 21 | 22 | Un exemple de CSS print optimisé : 23 | 24 | body { background-color :#fff; font-family :Serif; font-size :15pt; } 25 | #page { margin :0; border :none; } 26 | #banner, #menuright, #footer { display :none; } 27 | h1#top { margin :0; padding :0; text-indent :0; line-height :25pt; font-size :25pt; } (...) 28 | 29 | ## Tests d’acceptance 30 | 31 | Les pages disposent d’un CSS print optimisé. 32 | -------------------------------------------------------------------------------- /ui/004_user_interface_UI-04.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-04 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Contenus 5 | responsable: Editeurs de contenus 6 | benefice: Performance 7 | --- 8 | # UI-04 - Minimiser le nombre de médias par page 9 | 10 | ## Description 11 | 12 | Les flux liés aux médias : vidéo, audio, génèrent un volume de données important. Ainsi, réduire le nombre de médias mis en ligne en les remplaçant par une alternative (images, schéma, texte descriptif, etc…) est un réel levier de réduction de l’empreinte environnementale d’un service numérique. 13 | 14 | ## Mise en œuvre 15 | 16 | En tant qu’éditeur de contenus, je limiter au maximum le recours au format vidéo et audio pour présenter du contenu. Par exemple, une vidéo peut être remplacée par des images, un schéma ou encore un texte explicatif. 17 | 18 | ## Tests d’acceptance 19 | 20 | Il n’y a pas de vidéo ou d’audio sur la page. 21 | -------------------------------------------------------------------------------- /ui/005_user_interface_UI-05.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-05 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Contenus 5 | responsable: Editeurs de contenus 6 | benefice: Performance 7 | --- 8 | # UI-05 - Raccourcir la durée des vidéos 9 | 10 | ## Description 11 | 12 | L'impact des flux vidéo est principalement lié à la durée de la vidéo, à la qualité des images et du son, ainsi qu’au nombre de diffusion. Réduire la durée d’une vidéo est l'un des leviers faciles de mise en œuvre pour réduire son impact, d’autant plus que si la vidéo est longue, il y a de grandes chances pour que les utilisateurs ne la visionnent pas en entier. 13 | Il est recommandé de réaliser des vidéos courtes et synthétiques : de 2 minutes à idéalement 1 minute. 14 | Les vidéos proposant un contenu thématique ou explicatif, qui traitent de sujets plus complexes, peuvent quant à elles durer plus longtemps. 15 | 16 | ## Mise en œuvre 17 | 18 | En tant qu’éditeur de contenus, je limite au maximum la durée d’une vidéo selon les règles suivantes : 19 | 20 | * Aller à l’essentiel dans le discours et le contenu de la vidéo 21 | * Découper la vidéo avec un logiciel dédié pour n’en garder que les extraits pertinents 22 | * Diviser la vidéo en plusieurs vidéos, qui pourront alimenter chacune une page différente 23 | * Augmenter la vitesse de la vidéo si son contenu le permet 24 | 25 | ## Tests d’acceptance 26 | 27 | * La durée d’une vidéo de présentation ne dépasse pas 2 minutes 28 | * La durée d’une vidéo proposant un contenu thématique ou explicatif ne dépasse pas 15 minutes 29 | -------------------------------------------------------------------------------- /ui/006_user_interface_UI-06.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-06 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Contenus 5 | responsable: Editeurs de contenus 6 | benefice: Performance 7 | --- 8 | # UI-06 - Optimiser la définition des vidéos 9 | 10 | ## Description 11 | 12 | La définition d’une image correspond au nombre de pixels qu’elle peut afficher. Le poids (en octets) d’une image se calcule en multipliant le nombre de pixels qui la composent par leur poids. Ainsi, plus le nombre de pixels est important, et donc plus la définition d’une image est haute, plus son poids est élevé. Or, chaque octet transféré ou stocké sollicite des terminaux et des infrastructures gourmandes en énergie. 13 | 14 | La définition à choisir dépend de la taille de l’écran du terminal utilisateur et du contenu proposé. Une définition supérieure à 1080p n’est pas nécessaire : une définition de 720p offre un rendu suffisant sur la plupart des écrans. Ainsi, imposer une définition inférieure ou égale à 720p aux vidéos proposées sur les services numériques permettra de réduire l’empreinte environnementale liée à la consultation de celui-ci. 15 | 16 | Le nombre d’images par seconde (framerate) et le nombre de bits par secondes (bitrate) influent aussi sur la taille et donc l’impact environnemental du fichier. La compression des vidéos permet d’ajuster ces deux paramètres. 17 | 18 | Une multitude d’outils est disponible sur le marché pour ajuster la définition des vidéos et les compresser, par exemple [veed.io](https://www.veed.io/fr-FR/outils/compresser-video), [video2edit](https://www.video2edit.com/fr/compresser-video), [clideo](https://clideo.com/fr/compress-video), etc… 19 | 20 | ## Mise en œuvre 21 | 22 | En tant qu’éditeur de contenus, j’ajuste la compression et la définition des vidéos que je publie aux moyens d’outils d’édition vidéo.  23 | 24 | Je teste ensuite la lecture des vidéos sur différents terminaux afin de vérifier que la qualité choisie est bien suffisante. Si ce n’est pas le cas, je réajuste les paramètres de la vidéo. 25 | 26 | ## Tests d’acceptance 27 | 28 | * Le niveau de compression de la vidéo a été adapté en fonction de son usage 29 | * La définition des vidéos ne dépasse pas 720p sauf exceptions 30 | -------------------------------------------------------------------------------- /ui/007_user_interface_UI-07.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-07 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Contenus 5 | responsable: Intégrateur + dev front 6 | benefice: Performance 7 | Utilisabilité 8 | --- 9 | # UI-07 - Arrêter la lecture des vidéos hors du cadre de visualisation 10 | 11 | ## Description 12 | 13 | Les vidéos lancées par l'utilisateur peuvent au cours de la navigation ne plus être visibles sur la zone écran présentée à l'utilisateur. La poursuite de la diffusion de ces contenus devient inutile et entraîne une consommation de ressources (et donc un impact environnemental) non nécessaire, ils doivent donc être arrêtés. 14 | 15 | ## Mise en œuvre 16 | 17 | 1. **Ecrire une fonction qui récupère les vidéos et les stoppe si elles sont hors du cadre** 18 | 19 | function checkScroll() { 20 | var videos = document.getElementsByTagName("video"); 21 | 22 | function isInView(el) { 23 |   var rect = el.getBoundingClientRect();           // absolute position of video element 24 |   return !(rect.top > $(window).height() || rect.bottom < 0);   // visible? 25 | } 26 | 27 | for(const video of videos){ 28 |    if(isInView(video)){ 29 |         video.pause() 30 |     } 31 |   } 32 | } 33 | Cas d'une iframe Youtube : 34 | Ajouter un paramètre enablejsapi=1 à l'url source de l'iframe. 35 | Dans le JS, envoyer la commande pauseVideo lorsque l'iframe est hors du cadre : 36 | iframeElement.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*') 37 | 38 | 2. **Appeler cette fonction lors d'un scroll** 39 | 40 | Exemple en javascript: window.addEventListener('scroll', checkScroll, false); 41 | Exemple en jQuery: $(window).on('scroll', checkScroll); 42 | 43 | ## Tests d’acceptance 44 | 45 | Lorsqu’un événement de scroll est observé, la fonction .pause() est appelée. 46 | -------------------------------------------------------------------------------- /ui/008_user_interface_UI-08.md: -------------------------------------------------------------------------------- 1 | --- 2 | code: UI-08 3 | page-background: backgrounds/vincent2.jpg 4 | sous-famille: Contenus 5 | responsable: Développeur 6 | benefice: Performance 7 | Utilisabilité 8 | --- 9 | # UI-08 - Ne pas jouer les vidéos en boucle 10 | 11 | ## Description 12 | 13 | Les contenus actifs nécessitent des ressources techniques, et donc une consommation d’énergie pour fonctionner. 14 | Les clips musicaux ont tendance à être lus à plusieurs reprises par les utilisateurs. C’est rarement le cas pour les contenus informatifs. Afin d’éviter un gaspillage d’énergie et donc induire des impacts environnementaux supplémentaires sans aucune finalité, une vidéo ne doit pas recommencer au début une fois que sa lecture est terminée. 15 | 16 | ## Mise en œuvre 17 | 18 | En tant que développeur, lorsque je veux désactiver la lecture en boucle des vidéos, plusieurs situations se présentent à moi : 19 | 20 | * **Intégration d’une vidéo Youtube** 21 | 22 | Dans le code `