Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area
author: SphinxKnight <SphinxKnight@users.noreply.github.com> 2021-11-14 14:23:22 +0100
committer: GitHub <noreply@github.com> 2021-11-14 14:23:22 +0100
commit: d596e86a4f13b04981f51d327af257b07e6d21c3 (patch)
tree: 63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/javascript/client-side_web_apis
parent: 55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff)
download: translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.gz
translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.bz2
translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.zip
8 files changed, 120 insertions, 127 deletions
diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
index 7bae8cbfe8..60cc11cd4a 100644
--- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 <div></div>
 
-<p class="summary">Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.</p>
+<p>Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis:</th>
@@ -36,7 +36,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 <h2 id="Stockage_côté_client">Stockage côté client ?</h2>
 
-<p>Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites statiques</a> et les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dynamiques</a> — ces derniers stockent des données <a href="/fr/docs/Learn/Server-side">côté serveur</a> en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.</p>
+<p>Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les <a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites statiques</a> et les <a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dynamiques</a> — ces derniers stockent des données <a href="/fr/docs/Learn/Server-side">côté serveur</a> en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.</p>
 
 <p>Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :</p>
 
@@ -50,7 +50,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 <p>Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.</p>
 
 <div class="note">
-<p><strong>Note </strong>: La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a> pour plus d'informations.</p>
+<p><strong>Note :</strong> La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a> pour plus d'informations.</p>
 </div>
 
 <h3 id="À_lancienne_les_cookies">À l'ancienne : les cookies</h3>
@@ -59,14 +59,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage
 
 <p>De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de <a href="/fr/docs/Web/HTTP/Cookies#EU_cookie_directive">directive Cookie</a>.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15734/cookies-notice.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="cookies-notice.png"></p>
 
 <p>Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les <a href="/fr/docs/Web/HTTP/Cookies#Security">problèmes de sécurité</a> qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.</p>
 
 <p>Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.</p>
+<p><strong>Note :</strong> Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.</p>
 </div>
 
 <h3 id="La_nouvelle_école_Web_Storage_et_IndexedDB">La nouvelle école : Web Storage et IndexedDB</h3>
@@ -169,7 +169,7 @@ myName</pre>
 
 <p>Le HTML de l'exemple est disponible à <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="web-storage-demo.png"></p>
 
 <p>Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.</p>
 
@@ -260,16 +260,16 @@ function nameDisplayCheck() {
 <p>Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">version terminée en direct ici</a> (ou le <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/index.js">code JavaScript terminé</a>).</p>
 
 <div class="note">
-<p><strong>Note </strong>: Vous pouvez trouver un exemple un peu plus complexe dans l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API de stockage web</a>.</p>
+<p><strong>Note :</strong> Vous pouvez trouver un exemple un peu plus complexe dans l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API de stockage web</a>.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: Dans la ligne <code>&lt;script src="index.js" defer&gt;&lt;/script&gt;</code> de notre version finie, l'attribut <code>defer</code> spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.</p>
+<p><strong>Note :</strong> Dans la ligne <code>&lt;script src="index.js" defer&gt;&lt;/script&gt;</code> de notre version finie, l'attribut <code>defer</code> spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.</p>
 </div>
 
 <h2 id="Stocker_des_données_complexes_—_IndexedDB">Stocker des données complexes — IndexedDB</h2>
 
-<p>L'<a href="/en-US/docs/Web/API/IndexedDB_API">API IndexedDB</a> (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.</p>
+<p>L'<a href="/fr/docs/Web/API/IndexedDB_API">API IndexedDB</a> (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.</p>
 
 <p>Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.</p>
 
@@ -279,7 +279,7 @@ function nameDisplayCheck() {
 
 <p>L'application ressemble à ceci :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="idb-demo.png"></p>
 
 <p>Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.</p>
 
@@ -333,7 +333,7 @@ let request = window.indexedDB.open('notes', 1);</pre>
   <p>Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle <code>request</code> pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.</p>
 
   <div class="note">
-  <p><strong>Note </strong>: Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement <code>onupgradeneeded</code>. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.</p>
+  <p><strong>Note :</strong> Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement <code>onupgradeneeded</code>. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.</p>
   </div>
  </li>
  <li>
@@ -396,11 +396,11 @@ request.onupgradeneeded = function(e) {
 
 <p>Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :</p>
 
-<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{
-  </span><span class="nodeName">title</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Acheter du lait"</span>,
-  <span class="nodeName">body</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Lait de vache et de soja."</span>,
-  <span class="nodeName">id</span><span class="objectEqual">: </span><span class="objectBox objectBox-number">8</span></span></span></span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectRightBrace">
-}</span></span></span></span></span></pre>
+<pre class="brush: js">{
+  title: "Acheter du lait",
+  body: "Lait de vache et de soja.",
+  id: 8
+}</pre>
 
 <h3 id="Ajouter_des_données_à_la_base_de_données">Ajouter des données à la base de données</h3>
 
@@ -608,7 +608,7 @@ function deleteItem(e) {
 <p>Et voilà ! L'exemple devrait maintenant fonctionner.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Si vous rencontrez des difficultés, n'hésitez pas à consulter <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">notre exemple en direct</a> (ou voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">le code source</a>).</p>
+<p><strong>Note :</strong> Si vous rencontrez des difficultés, n'hésitez pas à consulter <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">notre exemple en direct</a> (ou voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">le code source</a>).</p>
 </div>
 
 <h3 id="Stocker_des_données_complexes_avec_IndexedDB">Stocker des données complexes avec IndexedDB</h3>
@@ -729,7 +729,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 <p>L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p>
+<p><img alt="" src="ff-offline.png"></p>
 
 <p>C'est là qu'interviennet les <a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a> et l'API étroitement liée, <a href="/fr/docs/Web/API/Cache">Cache</a>.</p>
 
@@ -742,7 +742,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 <p>L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.</p>
+<p><strong>Note :</strong> Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.</p>
 </div>
 
 <h3 id="Un_exemple_service_worker">Un exemple service worker</h3>
@@ -769,7 +769,7 @@ if('serviceWorker' in navigator) {
 </ul>
 
 <div class="note">
-<p><strong>Note </strong>: Le chemin du fichier <code>sw.js</code> est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.<br>
+<p><strong>Note :</strong> Le chemin du fichier <code>sw.js</code> est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.<br>
  Le service worker est sur <code>https://mdn.github.io/learning-area/.../sw.js</code>. L'origine est <code>https://mdn.github.io</code>. Le chemin donné doit donc être <code>/learning-area/.../sw.js</code>.<br>
  Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.</p>
 </div>
@@ -872,11 +872,11 @@ if('serviceWorker' in navigator) {
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
 </ul>
diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html
index 0af7689eaa..95c9f7f8e4 100644
--- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html
@@ -16,9 +16,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</p>
+<p>Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis:</th>
@@ -50,7 +50,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics
 <p>Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel <a href="/fr/Apprendre/WebGL">WebGL</a>, qui couvre le code WebGL brut.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.</p>
+<p><strong>Note :</strong> Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.</p>
 </div>
 
 <h2 id="Apprentissage_actif_Débuter_avec_un_&lt;canvas>">Apprentissage actif: Débuter avec un &lt;canvas&gt;</h2>
@@ -112,7 +112,7 @@ var height = canvas.height = window.innerHeight;</pre>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.</p>
+<p><strong>Note :</strong> Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.</p>
 </div>
 
 <h3 id="Obtenir_le_contexte_du_canvas_et_configuration_finale">Obtenir le contexte du canvas et configuration finale</h3>
@@ -124,7 +124,7 @@ var height = canvas.height = window.innerHeight;</pre>
 <pre class="brush: js">var ctx = canvas.getContext('2d');</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez choisir d'autres types de contexte comme <code>webgl</code> pour WebGL, <code>webgl2</code> pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.</p>
+<p><strong>Note :</strong> Vous pouvez choisir d'autres types de contexte comme <code>webgl</code> pour WebGL, <code>webgl2</code> pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.</p>
 </div>
 
 <p>Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable <code>ctx</code> contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.</p>
@@ -144,7 +144,7 @@ ctx.fillRect(0, 0, width, height);</pre>
 
 <p>De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.</p>
 
-<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="display: block; height: 220px; margin: 0px auto; width: 220px;"></p>
+<p><img alt="" src="Canvas_default_grid.png"></p>
 
 <p>Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.</p>
 
@@ -208,7 +208,7 @@ ctx.strokeRect(25, 25, 175, 200);</pre>
 <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}</p>
 
 <div class="note">
-<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p>
+<p><strong>Note :</strong> Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p>
 </div>
 
 <h3 id="Dessiner_des_chemins">Dessiner des chemins</h3>
@@ -284,7 +284,7 @@ ctx.fill();</pre>
 
     <p> </p>
 
-    <p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p>
+    <p><img alt="" src="trigonometry.png"></p>
 
     <p>Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit <code>50 * Math.tan(degToRad(60))</code>. Nous utilisons notre fonction <code>degToRad()</code> pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.</p>
    </li>
@@ -324,7 +324,7 @@ ctx.fill();</pre>
   </ul>
 
   <div class="note">
-  <p><strong>Note</strong>: 0 degrés est horizontalement vers la droite.</p>
+  <p><strong>Note :</strong> 0 degrés est horizontalement vers la droite.</p>
   </div>
  </li>
  <li>
@@ -350,11 +350,11 @@ ctx.fill();</pre>
 <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}</p>
 
 <div class="note">
-<p><strong>Note</strong>: Le code finit est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p>
+<p><strong>Note :</strong> Le code finit est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Formes_géométriques">Dessiner des formes avec le canevas</a>.</p>
+<p><strong>Note :</strong> Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Formes_géométriques">Dessiner des formes avec le canevas</a>.</p>
 </div>
 
 <h3 id="Texte">Texte</h3>
@@ -388,7 +388,7 @@ ctx.fillText('Canvas text', 50, 150);</pre>
 <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}</p>
 
 <div class="note">
-<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p>
+<p><strong>Note :</strong> Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p>
 </div>
 
 <p>Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans <a href="/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte avec canvas</a>.</p>
@@ -440,7 +440,7 @@ image.src = 'firefox.png';</pre>
 <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}</p>
 
 <div class="note">
-<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p>
+<p><strong>Note :</strong> Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p>
 </div>
 
 <h2 id="Boucles_et_animations">Boucles et animations</h2>
@@ -542,7 +542,7 @@ ctx.rotate(degToRad(5));</pre>
 </ul>
 
 <div class="note">
-<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p>
+<p><strong>Note :</strong> Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p>
 </div>
 
 <h3 id="Animations">Animations</h3>
@@ -596,7 +596,7 @@ loop();</pre>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>: Nous ne couvrirons pas <code>save()</code> et <code>restore()</code> ici, mais elles sont bien expliquées dans notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a> (et ceux qui le suivent).</p>
+<p><strong>Note :</strong> Nous ne couvrirons pas <code>save()</code> et <code>restore()</code> ici, mais elles sont bien expliquées dans notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a> (et ceux qui le suivent).</p>
 </div>
 
 <h3 id="Une_animation_simple_de_personnage">Une animation simple de personnage</h3>
@@ -627,7 +627,7 @@ var posX = 0;</pre>
 
   <p>L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article <a href="http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using using CSS animation">Create a sprite sheet walk cycle using using CSS animation</a> — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:</p>
 
-  <p><img alt="" src="https://mdn.mozillademos.org/files/14847/walk-right.png" style="display: block; height: 148px; margin: 0px auto; width: 612px;"></p>
+  <p><img alt="" src="walk-right.png"></p>
 
   <p>Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser <code>drawImage()</code> pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.</p>
  </li>
@@ -700,7 +700,7 @@ var posX = 0;</pre>
 <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
 
 <div class="note">
-<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p>
+<p><strong>Note :</strong> Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p>
 </div>
 
 <h3 id="Une_application_simple_de_dessin">Une application simple de dessin</h3>
@@ -753,7 +753,7 @@ canvas.onmouseup = function() {
 draw();</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Les types d'{{htmlelement("input")}} <code>range</code> et <code>color</code> sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type <code>color</code>. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.</p>
+<p><strong>Note :</strong> Les types d'{{htmlelement("input")}} <code>range</code> et <code>color</code> sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type <code>color</code>. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.</p>
 </div>
 
 <h2 id="WebGL">WebGL</h2>
@@ -881,7 +881,7 @@ scene.add(spotLight);</pre>
 <p>Vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-cube">trouver le code terminé sur GitHub</a>.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">le voir en direct</a>). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!</p>
+<p><strong>Note :</strong> Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">le voir en direct</a>). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!</p>
 </div>
 
 <h2 id="Sommaire">Sommaire</h2>
@@ -913,11 +913,11 @@ scene.add(spotLight);</pre>
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
 </ul>
diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html
index 2c693f757b..9fe8ea07d5 100644
--- a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html
@@ -18,9 +18,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.</p>
+<p>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
@@ -37,7 +37,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 
 <p>À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.</p>
 
-<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p>
+<p><img alt="A basic representation of a web site architecture" src="web-site-architechture@2x.png"></p>
 
 <p>Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.</p>
 
@@ -48,10 +48,10 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 <p>Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>. Elles permettent de réaliser des requêtes <a href="/fr/docs/Web/HTTP">HTTP</a> pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.</p>
 
 <div class="note">
-<p><strong>Note </strong>: Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise <code>XMLHttpRequest</code> ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.</p>
+<p><strong>Note :</strong> Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise <code>XMLHttpRequest</code> ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.</p>
 </div>
 
-<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p>
+<p><img alt="A simple modern architecture for web sites" src="moderne-web-site-architechture@2x.png"></p>
 
 <p>Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :</p>
 
@@ -69,7 +69,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data
 
 <p>Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.</p>
 
-<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p>
+<p><img alt="A basic web app data flow architecture" src="web-app-architecture@2x.png"></p>
 
 <h2 id="Une_requête_Ajax_basique">Une requête Ajax basique</h2>
 
@@ -130,7 +130,7 @@ var url = verse + '.txt';</pre>
  <li>
   <p>Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété <code>response</code> de l'objet XHR utilisé.</p>
 
-  <p>Ajoutez le bloc de code qui suit toujours au bas de la fonction <code>updateDisplay()</code>. Vous verrez qu'à l'intérieur du gestionnaire d'événément <code>onload</code>, nous assignons la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de <code>poemDisplay</code> (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.</p>
+  <p>Ajoutez le bloc de code qui suit toujours au bas de la fonction <code>updateDisplay()</code>. Vous verrez qu'à l'intérieur du gestionnaire d'événément <code>onload</code>, nous assignons la propriété <code><a href="/fr/docs/Web/API/Node/textContent">textContent</a></code> de <code>poemDisplay</code> (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.</p>
 
   <pre class="brush: js">request.onload = function() {
   poemDisplay.textContent = request.response;
@@ -257,7 +257,7 @@ myFetch.then(function(response) {
 
 <p>L'objet <code>response</code> a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.</p>
 
-<p>À l'intérieur de ce dernier <code>.then()</code>, nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de l'élément {{htmlelement("pre")}} à la valeur du texte.</p>
+<p>À l'intérieur de ce dernier <code>.then()</code>, nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété <code><a href="/fr/docs/Web/API/Node/textContent">textContent</a></code> de l'élément {{htmlelement("pre")}} à la valeur du texte.</p>
 
 <h4 id="Chaîner_les_then">Chaîner les then()</h4>
 
@@ -285,7 +285,7 @@ myFetch.then(function(response) {
 
 <p>Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">exemple en direct sur GitHub</a>, et <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">voir le code source</a>.</p>
 
-<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="can-store.png"></p>
 
 <p>Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.</p>
 
@@ -361,7 +361,7 @@ myFetch.then(function(response) {
 </ul>
 
 <div class="note">
-<p><strong>Note </strong>: Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">voir le code source</a>, ou <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">voir en direct</a>).</p>
+<p><strong>Note :</strong> Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">voir le code source</a>, ou <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">voir en direct</a>).</p>
 </div>
 
 <h2 id="Sommaire">Sommaire</h2>
@@ -387,12 +387,12 @@ myFetch.then(function(response) {
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
 </ul>
 </div>
diff --git a/files/fr/learn/javascript/client-side_web_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/index.html
index ca24150652..b7ce9e7171 100644
--- a/files/fr/learn/javascript/client-side_web_apis/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/index.html
@@ -20,16 +20,16 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs
 ---
 <div>{{LearnSidebar}}</div>
 
-<p class="summary">Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</p>
+<p>Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</p>
 
 <h2 id="Prérequis">Prérequis</h2>
 
-<p>Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> et <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objets JavaScript</a>). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.</p>
+<p>Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (<a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks">Building blocks</a> et <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.</p>
 
-<p>Une connaissance basique de <a href="/en-US/docs/Learn/HTML">HTML</a> et <a href="/en-US/docs/Learn/CSS">CSS</a> serait aussi utile.</p>
+<p>Une connaissance basique de <a href="/fr/docs/Learn/HTML">HTML</a> et <a href="/fr/docs/Learn/CSS">CSS</a> serait aussi utile.</p>
 
 <div class="note">
-<p><strong>Remarque</strong>: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
 </div>
 
 <h2 id="Guides">Guides</h2>
@@ -40,7 +40,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs
  <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></dt>
  <dd>Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</dd>
  <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></dt>
- <dd>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">API Fetch</a>.</dd>
+ <dd>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>.</dd>
  <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></dt>
  <dd>Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.</dd>
  <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></dt>
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
index 9ac5bc56a8..ed8648ce6f 100644
--- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
 
 <div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.</p>
+<p>Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prérequis :</th>
@@ -40,15 +40,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
 
 <p>En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.</p>
 
-<p><img alt="" src="plug-socket.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="plug-socket.png"></p>
 
 <p><em>Source de l'image : <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> par <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, sur Flickr.</em></p>
 
 <p>De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Voir aussi l'<a href="/fr/docs/Glossary/API">entrée du glossaire du terme API</a> pour plus de descriptions.</p>
+<div class="note">
+  <p><strong>Note :</strong> Voir aussi l'<a href="/fr/docs/Glossary/API">entrée du glossaire du terme API</a> pour plus de descriptions.</p>
 </div>
 
 <h3 id="apis_in_client-side_javascript">API JavaScript côté client</h3>
@@ -61,7 +60,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
   Par exemple: l'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoie alors les informations demandées.</li>
 </ul>
 
-<p><img alt="" src="browser.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="browser.png"></p>
 
 <h3 id="relationship_between_javascript_apis_and_other_javascript_tools">Relations entre JavaScript, les API et autres outils JavaScript</h3>
 
@@ -108,9 +107,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
   <li><a href="https://docs.joinmastodon.org/api/">L'API Mastodon</a> permet de manipuler les fonctionnalités du réseau social Mastodon grâce à des programmes.</li>
  </ul>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le <a href="http://www.programmableweb.com/category/all/apis">répertoire Programmable Web API.</a></p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le <a href="http://www.programmableweb.com/category/all/apis">répertoire Programmable Web API.</a></p>
 </div>
 
 <h2 id="how_do_apis_work">Comment les API fonctionnent-elles ?</h2>
@@ -121,9 +119,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction
 
 <p>Les API interagissent avec le code en utilisant un ou plusieurs <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a> avant de continuer.</p>
+<div class="note">
+  <p><strong>Note :</strong> Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a> avant de continuer.</p>
 </div>
 
 <p>Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :</p>
@@ -189,8 +186,7 @@ audioElement.addEventListener('ended', function() {
 });</pre>
 
 <div class="note">
-  <p><b>Note :</b></p>
-  <p>Certains d'entre vous ont peut-être remarqué que les méthodes <code>play()</code> et <code>pause()</code> utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>. qui est différente mais étroitement liée.</p>
+  <p><strong>Note :</strong> Certains d'entre vous ont peut-être remarqué que les méthodes <code>play()</code> et <code>pause()</code> utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>. qui est différente mais étroitement liée.</p>
 </div>
 
 <p>Ensuite, nous créons un objet <a href="/fr/docs/Web/API/GainNode"><code>GainNode</code></a> à l'aide de la méthode <a href="/fr/docs/Web/API/BaseAudioContext/createGain"><code>AudioContext.createGain()</code></a>, qui peut être utilisé pour ajuster le volume de l'audio qui le traverse, et nous créons un autre gestionnaire d'événements qui modifie la valeur du gain (volume) du graphique audio lorsque la valeur du curseur est modifiée :</p>
@@ -233,8 +229,7 @@ const ctx = canvas.getContext('2d');</pre>
 };</pre>
 
 <div class="note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez voir ce code en action dans notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">démo de balles rebondissantes</a> (voyez-le fonctionner <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">en direct</a> également).</p>
+  <p><strong>Note :</strong> Vous pouvez voir ce code en action dans notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">démo de balles rebondissantes</a> (voyez-le fonctionner <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">en direct</a> également).</p>
 </div>
 
 <h3 id="they_use_events_to_handle_changes_in_state">Elles utilisent des événements pour gérer les changements d'état</h3>
@@ -261,9 +256,8 @@ request.onload = function() {
   showHeroes(superHeroes);
 }</pre>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Vous pouvez voir ce code en action dans notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">voyez-le en direct</a> également).</p>
+<div class="note">
+  <p><strong>Note :</strong> Vous pouvez voir ce code en action dans notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">voyez-le en direct</a> également).</p>
 </div>
 
 <p>Les cinq premières lignes spécifient l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur <code>XMLHttpRequest()</code>, ouvrent une requête HTTP <code>GET</code> pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la requête.</p>
@@ -276,13 +270,12 @@ request.onload = function() {
 
 <p>En outre, certaines API Web demandent la permission d'être activées à l'utilisateur une fois que les appels à ces interfaces sont effectués dans votre code. À titre d'exemple, l'API <a href="/fr/docs/Web/API/Notifications_API">Notifications API</a> demande la permission à l'aide d'une boîte de dialogue contextuelle :</p>
 
-<p><img alt="" src="notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="notification-permission.png"></p>
 
 <p>Les API Web Audio et <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> sont soumises à un mécanisme de sécurité appelé <a href="/fr/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy">autoplay policy</a> - cela signifie essentiellement que vous ne pouvez pas lire automatiquement l'audio lorsqu'une page se charge — vous devez permettre à vos utilisateurs de déclencher la lecture audio par le biais d'un contrôle comme un bouton. Cette mesure est prise parce que la lecture automatique de l'audio est généralement très ennuyeuse et que nous ne devrions pas y soumettre nos utilisateurs.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.</p>
+<div class="note">
+  <p><strong>Note :</strong> Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.</p>
 </div>
 
 <h2 id="Résumé">Résumé</h2>
diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
index 76b8b9cfb7..8025213ac4 100644
--- a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -20,9 +20,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p>
+<p>Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
@@ -41,7 +41,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 <p>Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire plein de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'œil au diagramme suivant, il représente les principaux composants du navigateur directement impliqués dans l'affichage des pages web:</p>
 
-<p><img alt="" src="document-window-navigator.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="document-window-navigator.png"></p>
 
 <ul>
  <li>La <em>fenêtre</em> est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a>. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir <a href="/fr/docs/Web/API/Window/innerWidth"><code>Window.innerWidth</code></a> et <a href="/fr/docs/Web/API/Window/innerHeight"><code>Window.innerHeight</code></a>), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">gestionnaire d'événement</a> à la fenêtre en cours, et plus encore.</li>
@@ -73,7 +73,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 <p>Le DOM, quant à lui, ressemble à ça :</p>
 
-<p><img alt="" src="dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="dom-screenshot.png"></p>
 
 <div class="note">
 <p><strong>Note :</strong> Ce diagramme du DOM a été créé en utilisant le <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> de Ian Hickson.</p>
@@ -198,7 +198,7 @@ para.style.textAlign = 'center';</pre>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong> : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que les versions CSS sont reliées par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.</p>
+<p><strong>Note :</strong> Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que les versions CSS sont reliées par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.</p>
 </div>
 
 <p>Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.</p>
@@ -229,7 +229,7 @@ para.style.textAlign = 'center';</pre>
 <p>Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.</p>
 
 <div class="note">
-<p><strong>Note</strong> : Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p>
+<p><strong>Note :</strong> Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p>
 </div>
 
 <h2 id="active_learning_getting_useful_information_from_the_window_object">Apprentissage actif : Récupérer des informations utiles depuis l'objet Window</h2>
@@ -262,7 +262,7 @@ para.style.textAlign = 'center';</pre>
   </ol>
 
 <div class="note">
-<p><strong>Note</strong> : En cas de blocage, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">exemple de redimensionnement de la fenêtre terminé</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p>
+<p><strong>Note :</strong> En cas de blocage, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">exemple de redimensionnement de la fenêtre terminé</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p>
 </div>
 
 <h2 id="active_learning_a_dynamic_shopping_list">Apprentissage actif : Une liste de courses dynamique</h2>
@@ -277,7 +277,7 @@ para.style.textAlign = 'center';</pre>
 
 <p>La démo terminée doit ressembler à ça:</p>
 
-<p><img alt="" src="shopping-list.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="shopping-list.png"></p>
 
 <p>Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.</p>
 
@@ -296,7 +296,7 @@ para.style.textAlign = 'center';</pre>
 </ol>
 
 <div class="note">
-<p><strong>Note</strong> : Si vous bloquez vraiment, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p>
+<p><strong>Note :</strong> Si vous bloquez vraiment, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p>
 </div>
 
 <h2 id="summary">Résumé</h2>
diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html
index c0d337f3d1..15dfb1c063 100644
--- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html
@@ -10,9 +10,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « <em>third-party API</em> ») et nous illustrerons certains cas d'usage pour ces API tierces.</p>
+<p>Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « <em>third-party API</em> ») et nous illustrerons certains cas d'usage pour ces API tierces.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis :</th>
@@ -203,7 +203,7 @@ var map = L.mapquest.map('map', {
 
 <p>Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14821/nytimes-search.png" style="border-style: solid; border-width: 1px; display: block; height: 374px; margin: 0px auto; width: 700px;"></p>
+<p><img alt="" src="nytimes-search.png"></p>
 
 <h3 id="Connecter_lAPI_à_son_application">Connecter l'API à son application</h3>
 
@@ -235,7 +235,7 @@ function fetchResults(e) {
   e.preventDefault();
 
   // On compose l'URL
-  url = baseURL + '?api-key=' + key + '&amp;page=' + pageNumber + '&amp;q=' + searchTerm.value <span class="blob-code-inner"><span class="pl-s1"><span class="pl-k x">+</span><span class="x"> </span><span class="pl-s"><span class="pl-pds x">'</span><span class="x">&amp;fq=document_type:("article")</span><span class="pl-pds x x-last">'</span></span></span></span>;
+  url = baseURL + '?api-key=' + key + '&amp;page=' + pageNumber + '&amp;q=' + searchTerm.value + '&amp;fq=document_type:("article")';
 
   if(startDate.value !== '') {
     url += '&amp;begin_date=' + startDate.value;
@@ -264,7 +264,7 @@ function fetchResults(e) {
 <p>Si on prend un exemple d'URL complète ainsi construite :</p>
 
 <pre>https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&amp;page=0&amp;q=cats
-&amp;<span class="blob-code-inner"><span class="pl-s1"><span class="pl-s"><span class="x">fq=document_type:("article")</span></span></span></span>&amp;begin_date=20170301&amp;end_date=20170312 </pre>
+&amp;fq=document_type:("article")&amp;begin_date=20170301&amp;end_date=20170312 </pre>
 
 <div class="note">
 <p><strong>Note :</strong> Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter <a href="https://developer.nytimes.com/">la documentation du NYTimes</a>.</p>
@@ -325,7 +325,7 @@ fetch(url).then(function(result) {
 
       link.href = current.web_url;
       link.textContent = current.headline.main;
-      para1.textContent = current.<span class="blob-code-inner"><span class="pl-s1"><span class="pl-smi x x-first x-last">snippet</span></span></span>;
+      para1.textContent = current.snippet;
       para2.textContent = 'Mots-clés : ';
       for(var j = 0; j &lt; current.keywords.length; j++) {
         var span = document.createElement('span');
@@ -418,7 +418,7 @@ function previousPage(e) {
 
 <p>Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14823/youtube-example.png" style="border-style: solid; border-width: 1px; display: block; height: 389px; margin: 0px auto; width: 700px;"></p>
+<p><img alt="" src="youtube-example.png"></p>
 
 <p>Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">consulter le code source</a> qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.</p>
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html
index 6569f167d1..a091835f18 100644
--- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html
+++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html
@@ -18,9 +18,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
 
 <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</p>
+<p>HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Prérequis:</th>
@@ -460,11 +460,11 @@ clearInterval(intervalFwd);
 <p>À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions <code>windBackward()</code> et <code>windForward()</code>, puisqu'elles ont été ajoutées à la fonction <code>stopMedia()</code> à la place.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.</p>
+<p><strong>Note :</strong> Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: Le <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/video-audio/finished">code terminé</a> est disponible sur Github (le <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">voir en direct</a>).</p>
+<p><strong>Note :</strong> Le <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/video-audio/finished">code terminé</a> est disponible sur Github (le <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">voir en direct</a>).</p>
 </div>
 
 <h2 id="Sommaire">Sommaire</h2>
@@ -509,11 +509,11 @@ clearInterval(intervalFwd);
 <h2 id="Dans_ce_module">Dans ce module</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
- <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li>
+ <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li>
 </ul>
author	SphinxKnight <SphinxKnight@users.noreply.github.com>	2021-11-14 14:23:22 +0100
committer	GitHub <noreply@github.com>	2021-11-14 14:23:22 +0100
commit	d596e86a4f13b04981f51d327af257b07e6d21c3 (patch)
tree	63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/javascript/client-side_web_apis
parent	55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff)
download	translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.gz translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.bz2 translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.zip