Coquilles et améliorations typographiques (#549)

Relecture des bonnes pratiques 4xxx_fr.

Author: Julien-Elie

README.md

@@ -125,7 +125,7 @@ Pour simplifier vos recherches, n'oubliez pas d’utiliser les filtres disponibl
 * [Utiliser les compartiments CSS](/chapters/BP_4004_fr.md)
 * [Fournir une alternative textuelle aux contenus multimédias](/chapters/BP_4005_fr.md)
 * [Privilégier HTTP/2 à HTTP/1](/chapters/BP_4006_fr.md)
-* [Économiser de la bande passante grace à un ServiceWorker](/chapters/BP_4007_fr.md)
+* [Économiser de la bande passante grace à un Service Worker](/chapters/BP_4007_fr.md)
 * [Mettre en place un sitemap efficient](/chapters/BP_4008_fr.md)
 * [Assurer la compatibilité avec les plus anciens appareils et logiciels du parc](/chapters/BP_4009_fr.md)
 * [Réduire le volume de données stockées au strict nécessaire](/chapters/BP_4011_fr.md)

chapters/BP_4001_fr.md

@@ -24,8 +24,8 @@
 
 ### Description
 
-Les outils utilisés pour suivre les actions des utilisateurs utilisent souvent beaucoup de ressources coté client : requêtes 
-nombreuses, fichiers javascript supplémentaires chargés, utilisation de plusieurs domaines additionnels, envoi de cookie, ...
+Les outils utilisés pour suivre les actions des utilisateurs utilisent souvent beaucoup de ressources côté client : requêtes
+nombreuses, fichiers JavaScript supplémentaires chargés, utilisation de plusieurs domaines additionnels, envoi de cookie, ...
 
 Si les informations issues de ce suivi ne sont pas indispensables, ne pas en utiliser. Sinon se limiter à un seul outil et privilégier 
 une solution qui consomme peu de ressources.

chapters/BP_4002_fr.md

@@ -27,7 +27,6 @@
 Le gif animé, format image animée datant de 1995, est plus lourd et plus lent que d'autres formats tels que les formats vidéo webm ou le mp4.
 Le webp animé est moindre dans son gain de poids et est actuellement peu supporté par les navigateurs.
 
-
 ### Exemple
 
 |   | .gif (animé)          | .webp (animé) |.webm | .mp4 | 

chapters/BP_4003_fr.md

@@ -35,13 +35,13 @@ Il convient alors de forcer le navigateur à ne rien précharger en définissant
 
 ### Exemple
 
-Vidéo:
+Vidéo :
 
 ```html
 <video src="fichiervideo.webm" preload="none"></video>
 ```
 
-Audio:
+Audio :
 
 ```html
 <audio controls src="fichieraudio.mp3" preload="none"></audio>
@@ -51,4 +51,4 @@ Audio:
 
 | Le nombre ... |     est inférieur ou égal à   |  
 |-------------------|:-------------------------:|
-| d'éléments `<vidéo>` ou `<audio>` sans un attribut `preload="none"` ou `autoplay` | 0 |
+| d'éléments `<video>` ou `<audio>` sans un attribut `preload="none"` ou `autoplay` | 0 |

chapters/BP_4004_fr.md

@@ -27,22 +27,24 @@
 Le CSS Containment (ou compartimentation CSS) indique qu'un nœud et son contenu sont, autant que possible, indépendants du reste de l'arborescence de la page.
 
 En fonction du type d'indépendance (```strict```, ```content```, ```size```, ```layout```, ```style``` et/ou ```paint```) de la propriété ```contain```, le navigateur :
- - recalcule le rendu (les positions, la mise en forme, les dispositions et/ou l'affichage) pour le seul nœud indépendant économisant ainsi, de recalculer l’entièreté du DOM de la page
-- ne fait pas le rendu du contenu des nœuds indépendants hors zone visible
+- recalcule le rendu (les positions, la mise en forme, les dispositions et/ou l'affichage) pour le seul nœud indépendant, économisant ainsi de recalculer l’entièreté du DOM de la page ;
+- ne fait pas le rendu du contenu des nœuds indépendants hors zone visible.
 
 ### Exemples
-- Une architecture DOM complexe dont le contenu de noeuds est modifié à un moment donné
+
+- Une architecture DOM complexe dont le contenu de nœuds est modifié à un moment donné :
 ```css
 article {
    contain: content;
 }
 ```
-- Un widget externe
+- Un widget externe :
 ```css
 .widget-name {
    contain: layout;
 }
 ```
+
 Pour aller plus loin : 
 - [https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Containment](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Containment)
 - [https://www.w3.org/TR/css-contain-2/](https://www.w3.org/TR/css-contain-2/)

chapters/BP_4005_fr.md

@@ -26,17 +26,17 @@
 
 Le texte, même mis en forme en HTML/CSS, utilise beaucoup moins de bande passante que des formats multimédias comme l'audio ou la vidéo. 
 Fournir aux utilisateurs une alternative textuelle à ces contenus leur permet s'ils le souhaitent de lire plutôt que d'écouter ou de visionner, et donc de transférer moins de données.
-Si cette alternative textuelle a elle même une taille importante, elle peut ne pas être chargée par défaut mais suite à une action utilisateur.
+Si cette alternative textuelle a elle-même une taille importante, elle peut ne pas être chargée par défaut mais suite à une action utilisateur.
 
-Cette pratique est également bénéfique pour l'accessibilité : les mal entendants pourront lire le contenu et y auront donc accès, de même pour les mal voyants, si le texte inclut une description des éléments des vidéos qui ne sont que visibles.
+Cette pratique est également bénéfique pour l'accessibilité : les malentendants pourront lire le contenu et y auront donc accès, de même pour les malvoyants, si le texte inclut une description des éléments des vidéos qui ne sont que visibles.
 
 Cette pratique est également bénéfique pour le référencement, les moteurs de recherche pouvant plus facilement analyser le texte que l'audio et la vidéo.
 
-Voir aussi sur le même sujet la pratique « Eviter la lecture automatique des vidéos et des sons »
+Voir aussi sur le même sujet la [bonne pratique « Éviter la lecture et le chargement automatique des vidéos et des sons »](/chapters/BP_4003_fr.md).
 
 ### Exemple
 
-Une video de 30 minutes va typiquement faire 500mo, un podcast de la même durée fera 30mo, et l'équivalent texte moins d'1 mo.
+Une vidéo de 30 minutes va typiquement faire 500 Mo, un podcast de la même durée fera 30 Mo, et l'équivalent texte moins d'1 Mo.
 
 ### Principe de validation
 

chapters/BP_4007_fr.md

@@ -1,4 +1,4 @@
-## Économiser de la bande passante grace à un ServiceWorker
+## Économiser de la bande passante grâce à un Service Worker
 
 ### Identifiants
 
@@ -48,7 +48,7 @@ On concède ici un peu de temps processeur dans le terminal,
 une requête initiale supplémentaire pour le Service Worker,
 puis deux requêtes supplémentaires pour l'entête et le pied de page,
 contre de grosses économies dans les quantités de données échangées pour chaque page.
-Ces coûts concédés sont amortis lors de navigations dans le site (comme pour une SPA),
+Ces coûts concédés sont amortis lors de navigations dans le site, comme pour une SPA (Single Page Application),
 mais également lors de prochaines visites du site,
 tant que le navigateur n'aura pas évincé le Service Worker.
 
@@ -58,7 +58,7 @@ Début 2020, Philip Walton a pu mesurer sur son blog une réduction des échange
 et une amélioration des performances (First Contentful Paint) de plus de 52%
 avec cette technique.
 
-Source: https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
+Source : https://philipwalton.com/articles/smaller-html-payloads-with-service-workers/
 
 ### Principe de validation
 

chapters/BP_4008_fr.md

@@ -25,7 +25,7 @@
 ### Description
 
 Le sitemap (plan du site) permet de faciliter l'indexation des pages et des contenus d'un site web par les moteurs de recherche. 
-Un sitemap non mis à jour peut contenir des urls qui n'ont plus raison d'y être car elles font référence à des pages ou des contenus peu visités et peu utiles.
+Un sitemap non mis à jour peut contenir des URLs qui n'ont plus raison d'y être car elles font référence à des pages ou des contenus peu visités et peu utiles.
 Une telle situation augmente le risque d'avoir des internautes qui arrivent sur des pages sans intérêt via les moteurs de recherche ou même des pages orphelines.
 Ainsi, l'internaute risque de solliciter des ressources informatiques pour rien.
 

chapters/BP_4009_fr.md

@@ -24,14 +24,14 @@
 
 ### Description
 
-Il faut s'assurer de la compatibilité du site avec les plus anciens matériels et logiciels que les utilisateurs peuvent possèder.
+Il faut s'assurer de la compatibilité du site avec les plus anciens matériels et logiciels que les utilisateurs peuvent posséder.
 Les pages doivent être utilisables sur les configurations les plus contraignantes : pas de mises en page cassées, de boutons inactifs,
 d'erreurs affichées ou autre problème empêchant la lecture ou la navigation.
 
 Les configurations les plus contraignantes à choisir comprennent : 
-- Les versions de navigateurs les plus anciennes, ou qui posent le plus de problèmes de compatibilités ;
-- Les versions d'OS les plus anciennes ;
-- Les terminaux les moins puissants que les utilisateurs possèdent : smartphones, ordinateurs ou autres.
+- les versions de navigateurs les plus anciennes, ou qui posent le plus de problèmes de compatibilités ;
+- les versions d'OS les plus anciennes ;
+- les terminaux les moins puissants que les utilisateurs possèdent : smartphones, ordinateurs ou autres.
 
 Le choix des configurations va dépendre de l'état du web au moment de l'implémentation de la solution, ainsi que du contexte 
 projet : des publics différents amèneront des contraintes différentes. 
@@ -42,7 +42,7 @@ est de faire une étude sur le terrain des utilisateurs et de leurs équipements
 
 ### Exemple
 
-Pour différentes raisons (machines trop anciennes pour être mise à jour, manque d'un accès administrateur au système ou 
+Pour différentes raisons (machines trop anciennes pour être mises à jour, manque d'un accès administrateur au système ou
 méconnaissance de l'existence d'alternatives), des utilisateurs sont bloqués sur Internet Explorer.
 Un site développé pour des navigateurs modernes, utilisant par exemple massivement _flexbox_ ou _css grid_ ne s'affichera 
 pas correctement sur ce navigateur.

chapters/BP_4011_fr.md

@@ -23,10 +23,11 @@
 | Stockage  |
 
 ### Description
-Réduire le volume de données stockées au nécessaire consiste à :
-* optimiser la gestion des gros volumes de données.
-* nettoyer les anciennes données, soit en les archivant hors ligne, soit en les supprimant.
-* vérifier que les sauvegardes peuvent être restaurées.
+
+Réduire le volume de données stockées au strict nécessaire consiste à :
+* optimiser la gestion des gros volumes de données ;
+* nettoyer les anciennes données, soit en les archivant hors ligne, soit en les supprimant ;
+* vérifier que les sauvegardes peuvent être restaurées ;
 * superviser la taille des espaces de stockage.
 
 Suivant le type de données et leurs propriétaires, des contraintes légales peuvent amener à stocker dans le temps des données jamais utilisées.
@@ -36,9 +37,10 @@ L’utilisation des données et leur degré d’importance impactent aussi la ma
 Cette bonne pratique s'inscrit dans le cadre de la gestion du cycle de vie de l'information.
 
 ### Exemple
+
 * Définir des processus d'archivage : au moment de sa sortie, un rapport annuel est stocké sur un SSD (zone chaude). Un mois plus tard, il est archivé sur un stockage classique (zone froide). Enfin, dix ans plus tard, il est supprimé.
-* Eviter les doublons entre les tables est un moyen d’optimiser le volume de données stockées.
-* L’utilisation des données peut conduire à une dénormalisation des tables et donc une augmentation de l’espace de stockage.
+* Éviter les doublons entre les tables est un moyen d’optimiser le volume de données stockées.
+* L’utilisation des données peut conduire à une dénormalisation des tables et donc à une augmentation de l’espace de stockage.
 
 ### Principe de validation
 

chapters/BP_4012_fr.md

@@ -23,17 +23,19 @@
 | Stockage / Requêtes |
 
 ### Description
+
 Depuis la mise en place du RGPD par la CNIL, il est obligatoire de supprimer les données personnelles d'un utilisateur
 après une durée définie d'après plusieurs conditions. Il est obligatoire de le faire sur les données personnelles de nos
 utilisateurs, mais nous pouvons également définir une durée de vie pour toute autre donnée. Heureusement, organiser la 
 durée de vie de nos données peut être effectué de manière automatique, sans avoir à purger manuellement les données obsolètes. 
 
-De nombreux systèmes de gestion de bases de données, comme `MongoDB` , `AWS DynamoDB`, `Redis` ou `Oracle` permettent de
+De nombreux systèmes de gestion de bases de données, comme `MongoDB`, `AWS DynamoDB`, `Redis` ou `Oracle` permettent de
 définir un "TTL" sur une table ou sur une donnée.
 Après avoir défini une durée de vie, les données expirées sont purgées et effacées définitivement de la base.
 
 ### Exemple
-Dans cet exemple en Java, sur une base Oracle, la durée de vie de la donnée expirera au bout de 5 jours
+
+Dans cet exemple en Java, sur une base Oracle, la durée de vie de la donnée expirera au bout de 5 jours :
 ```java
 String aKey = "myFirstKey";
 String aData = "myFirstData";
@@ -43,10 +45,10 @@ try {
     DatabaseEntry theData = new DatabaseEntry(aData.getBytes("UTF-8"));
 
     WriteOptions wo = new WriteOptions();
-    wo.setTTL(5); // TTL de 5 jours
-    myDatabase.put(null,             // Transaction 
+    wo.setTTL(5); // TTL de 5 jours.
+    myDatabase.put(null,             // Transaction.
                    theKey,           // Clé.
-                   theData,          // valeur.
+                   theData,          // Valeur.
                    Put.NO_OVERWRITE, 
                    wo);              // Options (incluant la durée de TTL).
 

chapters/BP_4013_fr.md

@@ -24,7 +24,7 @@
 
 ### Description
 
-L'élément HTML `canvas` est initialement conçu pour dessiner des graphiques, réaliser des jeux ou générer des images à la volée via des API JavaScript. Comme chaque script, l'utilisation de `canvas` a un impact significatif sur les besoins de ressources machines (CPU et/ou GPU) augmentant ainsi une mauvaise expérience utilisateur sur les machines les moins puissantes et entraînant également une surconsommation d'énergie.
+L'élément HTML `canvas` est initialement conçu pour dessiner des graphiques, réaliser des jeux ou générer des images à la volée via des API JavaScript. Comme chaque script, l'utilisation de `canvas` a un impact significatif sur les besoins de ressources machines (CPU et/ou GPU), augmentant ainsi une mauvaise expérience utilisateur sur les machines les moins puissantes et entraînant également une surconsommation d'énergie.
 Cet impact est plus important quand le rendu est réalisé de manière répétitive (effet dynamique, animation).
 Il est recommandé d'utiliser d'autres éléments HTML natifs quand cela est possible et à défaut de mettre en place des optimisations pour limiter les besoins en ressources machines.
 
@@ -37,7 +37,7 @@ Il est recommandé d'utiliser d'autres éléments HTML natifs quand cela est pos
 
 ### Sources
 
-- [Element canvas](https://www.w3.org/TR/2011/WD-html5-20110405/the-canvas-element.html)
+- [Élément canvas](https://www.w3.org/TR/2011/WD-html5-20110405/the-canvas-element.html)
 - [Optimiser les canvas](https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)
 
 ### Principe de validation

chapters/BP_4014_fr.md

@@ -24,11 +24,11 @@
 
 ### Description
 
-Des services web permettent de réaliser sans se déplacer des démarches administratives, des ouvertures de contrats, des déclarations de sinistres etc...
+Des services web permettent de réaliser sans se déplacer des démarches administratives, des ouvertures de contrats, des déclarations de sinistres, etc.
 Beaucoup de ces procédures peuvent être complexes à réaliser ou ne pas prendre en compte des cas particuliers.
 Pour valider la connexion à un service bancaire en ligne par exemple, l'installation d'une application mobile et donc un smartphone peuvent être exigés.
 Certains utilisateurs peuvent donc se retrouver bloqués dans l'utilisation du service. 
-La mise en place d'une alternative plus "low tech" (appel téléphonique, SMS, point d'accueil physique) peut pallier à cette situation.
+La mise en place d'une alternative plus "low tech" (appel téléphonique, SMS, point d'accueil physique) peut pallier cette situation.
 
 ### Exemple
 

chapters/BP_4015_fr.md

@@ -1,4 +1,5 @@
 ## Avoir un titre de page et une metadescription pertinents avec le contenu de la page
+
 ### Identifiants
 
 | GreenIT |  V2  |  V3  |  V4  |

chapters/BP_4017_fr.md

@@ -41,7 +41,7 @@ ou utilisée uniquement sous certaines conditions.
 
 Éviter les chargements et mise en cache (ou en stockage local) de données applicatives,
 comme des listes des valeurs et autres référentiels,
-si on n'est pas absoluement certain qu'elles seront utilisées.
+si l'on n'est pas absolument certain qu'elles seront utilisées.
 
 Par extension, découper le code JS, voire les CSS, par portions (_chunks_) relatives à des actions particulières de l'utilisateur,
 et ne charger ces portions que lorsqu'elles sont nécessaires.

chapters/BP_4018_fr.md

@@ -25,19 +25,20 @@
 ### Description
 
 Éliminer les fonctionnalités non utilisées consiste à :
-* Mesurer l'utilisation des fonctionnalités en production.
-* Piloter l’usage des fonctionnalités, et à supprimer celles qui ne sont pas assez utilisées ou qui ont perdu de la valeur.
+* mesurer l'utilisation des fonctionnalités en production ;
+* piloter l'usage des fonctionnalités, et à supprimer celles qui ne sont pas assez utilisées ou qui ont perdu de la valeur.
 
 Supprimer des fonctionnalités allège le poids de l’application, son impact en production et sa maintenance.
 
 Comment supprimer une fonctionnalité ?
-* la désactiver : sur le principe du feature flipping, empêcher qu'elle soit utilisée avec un flag.
+* la désactiver : sur le principe du feature flipping, empêcher qu'elle soit utilisée avec un flag ;
 * la désinstaller : supprimer au maximum le code utilisé puis refactorer le code restant.
 
-En fonction du coût environnemental et économique d’une suppression, l'une ou l'autre solution sera retenue.
+En fonction du coût environnemental et économique d'une suppression, l'une ou l'autre solution sera retenue.
 
 
 ### Exemple
+
 Un site e-commerce utilise deux listes différentes : liste de courses et liste de favoris. Lors de la refonte du site, au lieu de rester iso-fonctionnel, l’équipe mesure la pertinence des fonctionnalités. La mesure montre que la liste de favoris est devenue désuète. Elle est donc supprimée ainsi que toutes les données en base.
 
 Une page d’administration peut être utilisée une fois par an et être très importante (par exemple une purge de cache qui est utilisée uniquement en cas de mise à jour de référentiel). Dans ce cas, elle doit être conservée.

chapters/BP_4019_fr.md

@@ -25,17 +25,17 @@
 ### Description
 
 Lors de la conception d'un service numérique, il est indispensable de définir les supports nécessaires en fonction des utilisateurs.
-Un site internet responsive peut-être tout à fait suffisant et satisfaisant.
+Un site internet responsive peut tout à fait être suffisant et satisfaisant.
 
 Cependant si une application mobile est strictement nécessaire et qu'elle reprend entièrement ou en partie le site internet, alors une PWA (Progressive Web App) est une solution évitant des doubles, voire des triples développements et maintenances qu'occasionnerait le développement d'une application mobile native ou hybride (React native, Flutter).
 
-La PWA n'étant pas liée à un système d'exploitation (OS) et souvent plus légère qu'une application mobile native, permet de réduire le risque d'obsolescence du terminal mobile et une utilisation moindre de la bande passante. C'est ainsi que plusieurs réseaux sociaux ont développé une PWA pour conquérir des marchés avec des réseaux avec de faibles débits.
+N'étant pas liée à un système d'exploitation (OS) et souvent plus légère qu'une application mobile native, la PWA permet de réduire le risque d'obsolescence du terminal mobile et une utilisation moindre de la bande passante. C'est ainsi que plusieurs réseaux sociaux ont développé une PWA pour conquérir des marchés avec des réseaux avec de faibles débits.
 
 ### Exemple
 
 - Des sites e-commerce (Lancôme, Starbucks, etc.)
 - Des médias (L'équipe, Courrier International, Forbes, etc.)
-- Des Software as a Service (Microsoft 365, Gmail, etc.)
+- Des solutions Software as a Service (Microsoft 365, Gmail, etc.)
 - Des réseaux sociaux (Twitter Lite, Telegram, etc.)
 - Des applications métiers (SNCF, etc.)