156 files changed, 7254 insertions, 1876 deletions

diff --git a/files/fr/web/api/ambient_light_events/index.html b/files/fr/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..4f30f285d0
--- /dev/null
+++ b/files/fr/web/api/ambient_light_events/index.html
@@ -0,0 +1,98 @@
+---
+title: Utiliser les événements de luminosité
+slug: WebAPI/Utiliser_les_événéments_de_luminosité
+tags:
+  - WebAPI
+translation_of: Web/API/Ambient_Light_Events
+---
+<p>{{SeeCompatTable }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>Les événements concernant la lumière environnante permettent à une application de percevoir simplement les changements de luminosité dans l'environnement de l'appareil. L'application peut donc ainsi réagir aux changements de luminosité : par exemple changer le contraste de l'interface ou changer l'exposition lors de la prise d'une photo.</p>
+<h2 id="Les_événements_liés_à_la_lumière">Les événements liés à la lumière</h2>
+<p>Lorsque le capteur de lumière détecte un changement de luminosité, il envoie une notification au navigateur. Lorsque le navigateur reçoit une notification, il déclenche un événement {{domxref("DeviceLightEvent")}} qui fournit des informations sur la valeur exacte de l'intensité lumineuse.</p>
+<p>Cet événement peut être capturé au niveau de l'objet <code>window</code> en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant le nom d'événement {{event("devicelight")}}) ou en attachant le gestionnaire d'événément à la propriété {{domxref("window.ondevicelight")}}.</p>
+<p>Une fois qu'il a été capturé, l'événement permet un accès à la valeur de l'intensité lumineuse, exprimée en <a href="http://fr.wikipedia.org/wiki/Lux_%28unit%C3%A9%29" title="http://en.wikipedia.org/wiki/Lux">lux</a> avec la propriété {{domxref("DeviceLightEvent.value")}}.</p>
+<h2 id="Exemple">Exemple</h2>
+<pre class="brush: js">window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value &lt; 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});</pre>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}</td>
+      <td>{{ Spec2('AmbientLight') }}</td>
+      <td>Spécification initiale</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>{{domxref("DeviceLightEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatGeckoDesktop("22.0")}} (Mac OS X seulement)</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>{{domxref("DeviceLightEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatGeckoMobile("15.0")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3>
+<p>L'événement {{event("devicelight")}} est implémenté et activé par défaut via un paramètre dans Firefox Mobile pour Android (15.0) et dans Firefox OS (B2G). Une implémentation pour un navigateur de bureau sur Mac OS X est également disponible à partir de Gecko 22.0 {{geckoRelease("22.0")}}. Le support pour Windows 7 est en cours de progression (voir {{bug(754199)}}).</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+  <li>{{domxref("DeviceLightEvent")}}</li>
+  <li>{{event("devicelight")}}</li>
+</ul>
diff --git a/files/fr/web/api/audiocontext/creategain/index.html b/files/fr/web/api/baseaudiocontext/creategain/index.html
index b9142efffc..b9142efffc 100644
--- a/files/fr/web/api/audiocontext/creategain/index.html
+++ b/files/fr/web/api/baseaudiocontext/creategain/index.html
diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..b729a42222
--- /dev/null
+++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html
@@ -0,0 +1,52 @@
+---
+title: Un raycaster basique avec canvas
+slug: Un_raycaster_basique_avec_canvas
+tags:
+  - 3D
+  - Canvas
+  - Exemples
+  - Graphismes
+  - Web
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<p>{{CanvasSidebar}}</p>
+
+<p class="summary">Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D <span id="result_box" lang="fr"><span>à l'aide de la projection de rayons.</span></span></p>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Ouvrir une nouvelle fenêtre</a></strong></p>
+
+<h2 id="Pourquoi.C2.A0.3F" name="Pourquoi.C2.A0.3F">Pourquoi ?</h2>
+
+<p>Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <code>&lt;canvas&gt;</code> dont j'avais <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">entendu parler (en)</a>, non seulement allait être supporté par Firefox, mais était<em> </em><strong>déjà</strong> supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.</p>
+
+<p>La <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">présentation</a> et le <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">tutoriel </a><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas"> </a>canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.</p>
+
+<h2 id="Comment.C2.A0.3F" name="Comment.C2.A0.3F">Comment ?</h2>
+
+<p>L'idée de base est d'employer  {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">y conduire</a>, et je voulais voir si je pouvais y arriver.</p>
+
+<p>Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.</p>
+
+<p>Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe<em> Tricks of the Game Programming Gurus</em> (<small>ISBN: 0672305070</small>), et d'un <a class="external" href="http://www.shinelife.co.uk/java-maze/">Projeteur de rayons Java</a> que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.</p>
+
+<h2 id="R.C3.A9sultats" name="R.C3.A9sultats">Résultats</h2>
+
+<p>Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.</p>
+
+<p>De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)</p>
+
+<h2 id="Le_RayCaster" name="Le_RayCaster">Le projeteur de rayons <em>(ray-caster)</em></h2>
+
+<p>De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un <a class="external" href="https://mdn.github.io/canvas-raycaster/">coup d'oeil</a>, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).</p>
+
+<p>Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <code>&lt;canvas&gt;</code> et amusez-vous!<br>
+ <br>
+ <small><a href="fr/Un_raycaster_basique_avec_canvas/input.js">input.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Level.js">Level.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Player.js">Player.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.html">RayCaster.html</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.js">RayCaster.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.css">trace.css</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.js">trace.js</a> </small></p>
+
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir aussi</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">Canvas tutorial</a></li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html
new file mode 100644
index 0000000000..8a95281220
--- /dev/null
+++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html
@@ -0,0 +1,158 @@
+---
+title: Manipulation vidéo avec la balise canvas
+slug: HTML/Manipulating_video_using_canvas
+tags:
+  - Canvas
+  - Video
+translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas
+---
+<p>{{CanvasSidebar}}</p>
+
+<p class="summary">En combinant les possibilités de l'élément <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> avec celles de l'élément <a class="internal" href="/en/HTML/Canvas" title="En/Canvas"><code>canvas</code></a>, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (<em>fond vert</em>) en utilisant JavaScript.</p>
+
+<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voir l'exemple</a>.</p>
+
+<h2 id="Le_contenu_du_document">Le contenu du document</h2>
+
+<p>Le document XHTML utilisé <span id="result_box" lang="fr"><span>pour rendre ce contenu est montré ci-dessous :</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+      <span class="selector token">body </span><span class="punctuation token">{</span>
+        <span class="property token">background</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span>
+        <span class="property token">color</span><span class="punctuation token">:</span><span class="hexcode token">#CCCCCC</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="selector token"><span class="id token">#c2</span> </span><span class="punctuation token">{</span>
+        <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="token url">url(foo.png)</span><span class="punctuation token">;</span>
+        <span class="property token">background-repeat</span><span class="punctuation token">:</span> no-repeat<span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="selector token">div </span><span class="punctuation token">{</span>
+        <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span>
+        <span class="property token">border</span> <span class="punctuation token">:</span><span class="number token">1</span>px solid <span class="hexcode token">#444444</span><span class="punctuation token">;</span>
+        <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">10</span>px<span class="punctuation token">;</span>
+        <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+        <span class="property token">background</span><span class="punctuation token">:</span><span class="hexcode token">#3B3B3B</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>main.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>processor.doLoad()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>video</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video.ogv<span class="punctuation token">"</span></span> <span class="attr-name token">controls</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Les éléments clés à retenir sont :</p>
+
+<ol>
+ <li>Ce document dispose de deux balises <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="En/Canvas"><code>canvas</code></a>, avec les IDs <code>c1 </code>et <code>c2 :</code> l'élément <code>c1</code> est utilisé pour afficher l'image courante de la vidéo originale, pendant que <code>c2</code> est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; <code>c2</code> est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.</li>
+ <li>Le code JavaScript est importé dans le script nommé <code>main.js</code> ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.</li>
+ <li>Quand le document se charge, la méthode <code>processor.doLoad()</code>, dans le script <code>main.js</code>, est exécutée.</li>
+</ol>
+
+<h2 id="Le_code_JavaScript">Le code JavaScript</h2>
+
+<p>Le code JavaScript <code>main.js</code> est composé de trois méthodes.</p>
+
+<h3 id="Initialisation_du_lecteur_avec_effet_d'incrustation_(chroma-key)">Initialisation du lecteur avec effet d'incrustation (<em>chroma-key</em>)</h3>
+
+<p>La métode <code>doLoad()</code> est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (<em>chroma-key</em>), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> processor<span class="punctuation token">;</span>
+
+  processor<span class="punctuation token">.</span>doLoad <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">doLoad</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>c1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c1<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c2<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'play'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        self<span class="punctuation token">.</span>width <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoWidth <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span>
+        self<span class="punctuation token">.</span>height <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoHeight <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span>
+        self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
+
+<p>Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément <code>video</code> et les deux éléments <code>canvas</code>. Il définit également les contextes graphique de chacun des éléments <code>canvas</code>. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.</p>
+
+<p>Ensuite, l'écouteur d'évènement <code>addEventListener()</code> est appelé sur l'élément <code>video</code> pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode <code>timerCallback()</code> pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.</p>
+
+<h3 id="Le_rappel_du_minuteur"><span class="short_text" id="result_box" lang="fr"><span>Le rappel du minuteur</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span>Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">processor<span class="punctuation token">.</span>timerCallback <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>paused <span class="operator token">||</span> <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>ended<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer.</span> <span>Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Ensuite, il appelle la méthode <code>computeFrame()</code>, qui effectue l'effet </span></span> "chroma-keying" <span lang="fr"><span> sur l'image vidéo en cours.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La dernière chose que fait le rappel est d'appeler <code>setTimeout()</code> pour programmer  un nouvel appel.</span> <span>En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.</span></span></p>
+
+<h3 id="Manipulation_des_données_des_images_vidéo">Manipulation des données des images vidéo</h3>
+
+<p>La méthode <code>computeFrame()</code> , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">processor<span class="punctuation token">.</span>computeFrame <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> frame <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">getImageData</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> l <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">.</span>length <span class="operator token">/</span> <span class="number token">4</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> l<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">let</span> r <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      <span class="keyword token">let</span> g <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      <span class="keyword token">let</span> b <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>g <span class="operator token">&gt;</span> <span class="number token">100</span> <span class="operator token">&amp;&amp;</span> r <span class="operator token">&gt;</span> <span class="number token">100</span> <span class="operator token">&amp;&amp;</span> b <span class="operator token">&lt;</span> <span class="number token">43</span><span class="punctuation token">)</span>
+        frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">3</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2<span class="punctuation token">.</span><span class="function token">putImageData</span><span class="punctuation token">(</span>frame<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>²</p>
+
+<p>Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :</p>
+
+<p><img alt="video.png" class="default internal" src="/@api/deki/files/3282/=video.png" style="height: 192px; width: 320px;"></p>
+
+<p>À la seconde ligne, cette image est copiée dans le contexte graphique <code>ctx1</code> du premier élément <code>canvas</code>, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode <code>drawImage()</code>. Voici ce que cela donne :</p>
+
+<p><img alt="sourcectx.png" class="default internal" src="/@api/deki/files/3284/=sourcectx.png" style="height: 96px; width: 160px;"></p>
+
+<p><span id="result_box" lang="fr"><span>La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode <code>getImageData() </code>sur le premier contexte.</span> <span>Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler.</span> <span>La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La boucle <code>for</code>, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image</span><span> de fond importée de <code>foo.png</code>.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent.</span> <span>En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>L'image résultante ressemble à ceci :</span></span></p>
+
+<p><img alt="output.png" class="default internal" src="/@api/deki/files/3283/=output.png" style="height: 96px; width: 161px;"></p>
+
+<p><span id="result_box" lang="fr"><span>Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.</span></span></p>
+
+<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voyez cet exemple réel</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="En/Using audio and video in Firefox">Using audio and video</a></li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html
index fadf515090..fadf515090 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
index 15eef37006..15eef37006 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html
index f44929e8be..f44929e8be 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html
index 6182dee589..6182dee589 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
index 8fbb3ec79c..8fbb3ec79c 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
index cc646762dd..cc646762dd 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
index 233d1baeb2..233d1baeb2 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
index 761b5baf3d..761b5baf3d 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
index 59a4d1ce35..59a4d1ce35 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/index.html
index a430b361bd..a430b361bd 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html
index d8e6e8383c..d8e6e8383c 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
index a2182f43c1..a2182f43c1 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
index bf21fab4c8..bf21fab4c8 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html b/files/fr/web/api/canvas_api/tutorial/using_images/index.html
index 50a286e0fa..50a286e0fa 100644
--- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html
diff --git a/files/fr/web/api/randomsource/getrandomvalues/index.html b/files/fr/web/api/crypto/getrandomvalues/index.html
index 28682a0c2a..28682a0c2a 100644
--- a/files/fr/web/api/randomsource/getrandomvalues/index.html
+++ b/files/fr/web/api/crypto/getrandomvalues/index.html
diff --git a/files/fr/web/api/detecting_device_orientation/index.html b/files/fr/web/api/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..63d99497df
--- /dev/null
+++ b/files/fr/web/api/detecting_device_orientation/index.html
@@ -0,0 +1,289 @@
+---
+title: Détecter l'orientation de l'appareil
+slug: WebAPI/Detecting_device_orientation
+tags:
+  - Device Orientation
+  - Firefox OS
+  - Mobile
+  - Motion
+  - Orientation
+translation_of: Web/API/Detecting_device_orientation
+---
+<p>{{SeeCompatTable}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>De plus en plus d'appareils connectés à Internet sont capable de déterminer leur <strong>orientation</strong>. C'est-à-dire qu'ils peuvent fournir des données indiquant des changements dans leur orientation par rapport à la gravité. En particulier les appareils portables, comme les téléphones mobiles, peuvent utiliser cette information pour effectuer automatiquement une rotation de l'écran, afin de toujours proposer la meilleure disposition possible pour le contenu à afficher.</p>
+
+<p>Il existe deux événements JavaScript pour gérer l'orientation. Le premier est {{domxref("DeviceOrientationEvent")}}, qui est envoyé quand l'accéléromètre détecte un changement d'orientation de l'appareil. En recevant et en analysant les données fournies par ces événements d'orientation, il est possible de répondre de manière interactive aux changements d'orientation et d'élévation causés par les mouvements imprimés à l'appareil par l'utilisateur.</p>
+
+<p>Le second événement est {{ domxref("DeviceMotionEvent") }}, qui est envoyé quand un changement d’accélération est ajouté. Il est différent de {{domxref("DeviceOrientationEvent")}}, car il écoute les changements d'accélération par opposition à l'orientation. Parmi les capteurs capables de détecter {{ domxref("DeviceMotionEvent") }}, on trouve les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockage. Ils sont communément présents dans les appareils mobiles (tablettes, téléphones intelligents).</p>
+
+<h2 id="Traitement_des_événements_d'orientation">Traitement des événements d'orientation</h2>
+
+<p>Tout ce dont vous avez besoin pour commencer à recevoir les changements d'orientation est d’écouter l’événement {{ event("deviceorientation") }} :</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> est un polyfill <span id="result_box" lang="fr"><span>pour normaliser les données de l'accéléromètre et du gyroscope sur les appareils mobiles.</span> C'<span>est utile pour surmonter certaines différences dans la prise en charge des périphériques pour l'orientation du périphérique.</span></span></p>
+</div>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
+</pre>
+
+<p>Après l’enregistrement de votre gestionnaire d'événements (<em>event listener</em> en anglais), dans ce cas, une fonction JS appelée handleOrientation(), votre fonction d'écoute est appelée périodiquement pour récupérer les données de l'orientation mise à jour.</p>
+
+<p>L'événement d'orientation contient quatre valeurs ::</p>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent.absolute")}}</li>
+ <li>{{domxref("DeviceOrientationEvent.alpha")}}</li>
+ <li>{{domxref("DeviceOrientationEvent.beta")}}</li>
+ <li>{{domxref("DeviceOrientationEvent.gamma")}}</li>
+</ul>
+
+<p>La fonction gérant l’événement pourrait ressembler à ceci :</p>
+
+<pre class="brush: js">function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // Faites quelque chose avec les données acquises. ;)
+}
+</pre>
+
+<h3 id="Détail_des_valeurs_d'orientation">Détail des valeurs d'orientation</h3>
+
+<p>La valeur reportée pour chaque axe indique l'angle de rotation autour d'un axe donné, en référence à un système de coordonnées standard. Ces valeurs sont décrites de façon plus détaillée dans cet article <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation et déplacement expliquée">Orientation et déplacement expliquée</a>.</p>
+
+<ul>
+ <li>La valeur {{ domxref("DeviceOrientationEvent.alpha") }} représente le mouvement de l'appareil, autour de l'axe « z », en degrés sur une échelle de 0° à 360° ;</li>
+ <li>La valeur {{ domxref("DeviceOrientationEvent.beta") }} représente le mouvement de l'appareil autour de l'axe « y » en degrés, sur une échelle de -180° à 180°.  Cela représente le mouvement d'avant en arrière de l'appareil ;</li>
+ <li>La valeur {{ domxref("DeviceOrientationEvent.gamma") }} représente le mouvement de l'appareil autour de l'axe « x », exprimée en degrés sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.</li>
+</ul>
+
+<h3 id="Exemple_d'orientation">Exemple d'orientation</h3>
+
+<p>Cet exemple fonctionne sur tout navigateur supportant l’événement {{event("deviceorientation")}} et sur tout appareil capable de détecter son orientation.</p>
+
+<p>Imaginons une balle dans un jardin :</p>
+
+<pre class="brush: html">&lt;div class="jardin"&gt;
+  &lt;div class="balle"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;pre class="resultat"&gt;&lt;/pre&gt;
+</pre>
+
+<p>Ce jardin fait 200 pixels de long (Oui c'est un « petit » jardin !), et la balle est au centre :</p>
+
+<pre class="brush: css">.jardin {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.balle {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+</pre>
+
+<p>Maintenant, on définit le déplacement de la balle en fonction de celui de l'appareil :</p>
+
+<pre class="brush: js">var jardin = document.querySelector('.jardin'),
+    balle = document.querySelector('.balle'),
+    resultat = document.querySelector('.resultat'),
+    maxX = jardin.clientWidth  - balle.clientWidth,
+    maxY = jardin.clientHeight - balle.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta,  // En degré sur l'interval [-180,180].
+      y = event.gamma; // En degré sur l'interval [-90,90].
+
+  resultat.innerHTML  = "beta : " + x + "&lt;br /&gt;";
+  resultat.innerHTML += "gamma: " + y + "&lt;br /&gt;";
+
+  // Parce-que l'on ne veut pas avoir l'appareil à l'envers.
+  // On restreint les valeurs de x à l'intervalle [-90,90].
+  if (x &gt;  90) { x =  90};
+  if (x &lt; -90) { x = -90};
+  // Pour rendre le calcul plus simple.
+  // On délimite l'intervalle de x et y sur [0, 180].
+  x += 90;
+  y += 90;
+
+  // 10 est la moitié de la taille de la balle.
+  // Cela centre le point de positionnement au centre de la balle.
+
+  balle.style.top  = (maxX * x / 180 - 10) + "px";
+  balle.style.left = (maxY * y / 180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+</pre>
+
+<p>Et voici le résultat en temps réel :</p>
+
+<div>{{EmbedLiveSample("Exemple_d'orientation", '230', '260')}}</div>
+
+<div> </div>
+
+<div>{{LiveSampleLink("Exemple_d'orientation", "Cliquez ici")}} pour ouvrir cet exemple dans une nouvelle fenêtre;  l'événement {{event("deviceorientation")}} ne marche pas dans les {{HTMLElement("iframe", "iframes")}} cross-origin dans tous les navigateurs.</div>
+
+<div> </div>
+
+<div class="warning">
+<p><strong>Attention :</strong> Chrome et Firefox ne gèrent pas les angles de la même façon, certaines directions sur les axes sont inversées.</p>
+</div>
+
+<h2 id="Traiter_les_événement_de_mouvement">Traiter les événement de mouvement</h2>
+
+<p>Les événements de mouvement gèrent l'orientation de la même façon à l'exception près qu’ils portent un nom d’événement différent : {{event("devicemotion")}}</p>
+
+<pre class="brush: js">window.addEventListener("devicemotion", <em>handleMotion</em>, true);
+</pre>
+
+<p>Ce qui change réellement est l'information fournie par l'objet {{ domxref("DeviceMotionEvent") }} passée comme paramètre par la fonction <em>HandleMotion</em>.</p>
+
+<p>Les événements de mouvement contiennent quatre propriétés :</p>
+
+<ul>
+ <li>{{domxref("DeviceMotionEvent.acceleration")}}</li>
+ <li>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}}</li>
+ <li>{{domxref("DeviceMotionEvent.rotationRate")}}</li>
+ <li>{{domxref("DeviceMotionEvent.interval")}}</li>
+</ul>
+
+<h3 id="Explication_des_valeurs_de_mouvement">Explication des valeurs de mouvement</h3>
+
+<p>L'objet {{ domxref("DeviceMotionEvent") }} fourni aux développeurs Web des informations sur la vitesse de changement d'orientation et de position de l'appareil. Les changements rapportés sont fournis pour les trois axes (voir <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation et déplacement expliquées</a> pour les détails).</p>
+
+<p>Pour {{domxref("DeviceMotionEvent.acceleration","acceleration")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, Les axes correspondent à :</p>
+
+<ul>
+ <li><code>x</code> : représente l'axe d'Ouest en Est ;</li>
+ <li><code>y</code> : représente l'axe Sud vers Nord :</li>
+ <li><code>z</code> : représente l'axe perpendiculaire au sol.</li>
+</ul>
+
+<p>Pour {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, c'est un peu différent. L'information correspond à :</p>
+
+<ul>
+ <li><code>alpha</code> : représente le ratio de rotation le long de l'axe perpendiculaire à l'écran (ou du clavier au bureau) ;</li>
+ <li><code>bêta</code> : représente le ratio de rotation le long de l'axe allant de la gauche vers la droite de l'écran (ou du clavier au bureau) ;</li>
+ <li><code>gamma</code> : représente le ratio de rotation le long de l'axe allant du bas vers le haut de l'écran (ou clavier vers le bureau).</li>
+</ul>
+
+<p>Au final, {{domxref("DeviceMotionEvent.interval","interval")}} représente l'intervalle de temps, en millisecondes, pour les données générées par l'appareil.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td>7.0</td>
+   <td>3.6<sup>[1]</sup><br>
+    6</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>6</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td>3.0</td>
+   <td>3.6<sup>[1]</sup><br>
+    6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_d'implementation_pour_Gecko">Notes d'implementation pour Gecko </h3>
+
+<ol>
+ <li>Firefox 3.6, 4, et 5 supportent <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>au lieu de l'événement standard {{domxref("DeviceOrientationEvent")}}.</li>
+</ol>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
+</ul>
diff --git a/files/fr/web/api/devicerotationrate/alpha/index.html b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html
index b5ea61916c..b5ea61916c 100644
--- a/files/fr/web/api/devicerotationrate/alpha/index.html
+++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html
diff --git a/files/fr/web/api/devicerotationrate/beta/index.html b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html
index 75fa4b5ced..75fa4b5ced 100644
--- a/files/fr/web/api/devicerotationrate/beta/index.html
+++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html
diff --git a/files/fr/web/api/devicerotationrate/gamma/index.html b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html
index bd4731d90c..bd4731d90c 100644
--- a/files/fr/web/api/devicerotationrate/gamma/index.html
+++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html
diff --git a/files/fr/web/api/devicerotationrate/index.html b/files/fr/web/api/devicemotioneventrotationrate/index.html
index f6cf9b4988..f6cf9b4988 100644
--- a/files/fr/web/api/devicerotationrate/index.html
+++ b/files/fr/web/api/devicemotioneventrotationrate/index.html
diff --git a/files/fr/web/api/deviceorientationevent.absolute/index.html b/files/fr/web/api/deviceorientationevent/absolute/index.html
index 3b1c6f593a..3b1c6f593a 100644
--- a/files/fr/web/api/deviceorientationevent.absolute/index.html
+++ b/files/fr/web/api/deviceorientationevent/absolute/index.html
diff --git a/files/fr/web/api/document/document.anchors/index.html b/files/fr/web/api/document/anchors/index.html
index 09fadf1b61..09fadf1b61 100644
--- a/files/fr/web/api/document/document.anchors/index.html
+++ b/files/fr/web/api/document/anchors/index.html
diff --git a/files/fr/web/api/document/readystatechange_event/index.html b/files/fr/web/api/document/readystatechange_event/index.html
new file mode 100644
index 0000000000..f4adf81f7a
--- /dev/null
+++ b/files/fr/web/api/document/readystatechange_event/index.html
@@ -0,0 +1,87 @@
+---
+title: readystatechange
+slug: Web/Events/readystatechange
+translation_of: Web/API/Document/readystatechange_event
+---
+<p>{{ApiRef}}</p>
+
+<p>L'événement <code>readystatechange</code> est déclenché lorsque l'attribut <a href="/fr/docs/DOM/document.readyState" title="/fr/docs/DOM/document.readyState"> <code>readyState</code> </a> d'un document a changé.</p>
+
+<h2 id="Information_générale">Information générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="propriétés">propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="exemple">exemple</h2>
+
+<pre class="brush: js">document.readyState === "complete";
+// true
+
+
+//alternative à DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        initApplication();
+    }
+}
+</pre>
+
+<h2 id="Navigateur_compatible">Navigateur compatible</h2>
+
+<p>Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement <code><a href="/fr/docs/">DOMContentLoaded</a></code> (voir la note [2] de la section <a href="/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles">Navigateurs compatibles</a>).</p>
+
+<h2 id="Les_événements_liés">Les événements liés</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html b/files/fr/web/api/document_object_model/events/index.html
index cd96a7446c..cd96a7446c 100644
--- a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html
+++ b/files/fr/web/api/document_object_model/events/index.html
diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/examples/index.html
index 08bd432a1e..08bd432a1e 100644
--- a/files/fr/web/api/document_object_model/exemples/index.html
+++ b/files/fr/web/api/document_object_model/examples/index.html
diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html
new file mode 100644
index 0000000000..9e74fa2870
--- /dev/null
+++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html
@@ -0,0 +1,146 @@
+---
+title: Comment créer un arbre DOM
+slug: Comment_créer_un_arbre_DOM
+tags:
+  - AJAX
+  - DOM
+  - Extensions
+translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree
+---
+<p> </p>
+
+<p>Cet article décrit comment utiliser l'API <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Core/">DOM Core (en)</a> en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).</p>
+
+<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM" name="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3>
+
+<p>Considérons le document XML suivant :</p>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;people&gt;
+  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
+    &lt;address street="321 south st" city="denver" state="co" country="usa"/&gt;
+    &lt;address street="123 main st" city="arlington" state="ma" country="usa"/&gt;
+  &lt;/person&gt;
+
+  &lt;person first-name="jed" last-name="brown"&gt;
+    &lt;address street="321 north st" city="atlanta" state="ga" country="usa"/&gt;
+    &lt;address street="123 west st" city="seattle" state="wa" country="usa"/&gt;
+    &lt;address street="321 south avenue" city="denver" state="co" country="usa"/&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :</p>
+
+<pre class="eval">var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+</pre>
+
+<p>Voir également le chapitre <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p>
+
+<p>Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="punctuation token">{</span>
+  <span class="string token">"people"</span><span class="punctuation token">:</span> <span class="punctuation token">{</span>
+    <span class="string token">"person"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>
+      <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 main st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"arlington"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ma"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+      <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"eric"</span><span class="punctuation token">,</span>
+      <span class="string token">"@middle-initial"</span><span class="punctuation token">:</span> <span class="string token">"H"</span><span class="punctuation token">,</span>
+      <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"jung"</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+      <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 north st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"atlanta"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ga"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 west st"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"seattle"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"wa"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+        <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south avenue"</span><span class="punctuation token">,</span>
+        <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span>
+        <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span>
+        <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span>
+      <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+      <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"jed"</span><span class="punctuation token">,</span>
+      <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"brown"</span>
+    <span class="punctuation token">}</span><span class="punctuation token">]</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Alors_quoi_.3F" name="Alors_quoi_.3F">Et après ?</h3>
+
+<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">expressions XPath</a>, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="https://developer.mozilla.org/fr/docs/XSLT">XSLT</a>, <a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">XLink</a>,  convertis en un objet JavaScript à travers un <a href="https://developer.mozilla.org/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p>
+
+<p>Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Glossaire/XML" title="en/XML">XML</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/JXON" title="en/JXON">JXON</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+ <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
index aae8808be0..aae8808be0 100644
--- a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html
+++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
diff --git a/files/fr/web/api/document_object_model/préface/index.html b/files/fr/web/api/document_object_model/préface/index.html
deleted file mode 100644
index 77c272f5b2..0000000000
--- a/files/fr/web/api/document_object_model/préface/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Préface
-slug: Web/API/Document_Object_Model/Préface
-tags:
-  - Référence_du_DOM_Gecko
-translation_of: Web/API/Document_Object_Model
-translation_of_original: Web/API/Document_Object_Model/Preface
----
-<p>{{ ApiRef() }}</p>
-<h3 id=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence" name=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence">À propos de cette référence</h3>
-<p>Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.</p>
-<p>Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la <a href="fr/DOM/document">référence de DOM document</a>) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.</p>
-<h3 id=".C3.80_qui_est_destin.C3.A9_ce_guide" name=".C3.80_qui_est_destin.C3.A9_ce_guide">À qui est destiné ce guide</h3>
-<p>Le lecteur de la <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko">Référence du DOM Gecko</a> est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, <a href="fr/XML">XML</a>, les serveurs et standards du Web, et même en ce qui concerne <a href="fr/JavaScript">JavaScript</a>, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec <a href="fr/HTML">HTML</a>, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.</p>
-<p>Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.</p>
-<h3 id="Pr.C3.A9sentation_de_Gecko" name="Pr.C3.A9sentation_de_Gecko">Présentation de Gecko</h3>
-<p>Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p>
-<p>Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple <a href="fr/DOM/window"><code>window</code></a> etc.) dans le contexte des pages Web et de l'interface applicative (ou
- <i>
-  chrome</i>
- ) du navigateur.</p>
-<p>Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.</p>
-<h3 id="Syntaxe_de_l.27API" name="Syntaxe_de_l.27API">Syntaxe de l'API</h3>
-<p>Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.</p>
-<p>Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule <code>availHeight</code> de l'objet <code>screen</code> est présentée de la manière suivante :</p>
-<pre class="eval"><i>screenObj</i> = window.screen.availHeight;
-</pre>
-<p>Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :</p>
-<pre class="eval"><i>chaine</i> = window.status;
-window.status =<i>chaine</i>;
-</pre>
-<p>En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme <code>element</code> pour tous les éléments, <code>document</code> pour l'objet de document racine, <code>table</code> pour un objet de tableau, etc. Consultez <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Types_de_donn.C3.A9es_importants">Types de données importants</a> pour plus d'informations à propos des types de données.</p>
-<h3 id="Utilisation_des_exemples" name="Utilisation_des_exemples">Utilisation des exemples</h3>
-<p>Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété <a href="fr/DOM/window.document">window.document</a> peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :</p>
-<pre>&lt;html&gt;
-
-&lt;script&gt;
-function testWinDoc() {
-
-  doc= window.document;
-
-  alert(doc.title);
-
-}
-&lt;/script&gt;
-
-&lt;button onclick="testWinDoc();"&gt;test de la propriété document&lt;/button&gt;
-
-&lt;/html&gt;
-</pre>
-<p>Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Test_de_l.27API_DOM">Test de l'API DOM</a> de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.</p>
-<div class="noinclude">
-  </div>
-<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p>
diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html
new file mode 100644
index 0000000000..9e3407a0aa
--- /dev/null
+++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html
@@ -0,0 +1,351 @@
+---
+title: Explorer un tableau HTML avec des interfaces DOM et JavaScript
+slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript
+tags:
+  - DOM
+  - Guide
+  - HTML
+  - JavaScript
+translation_of: >-
+  Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
+---
+<p> </p>
+
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.</p>
+
+<div class="note">Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).</div>
+
+<h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Generate a table.<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>generate_table()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">generate_table</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// get the reference for the body</span>
+  <span class="keyword token">var</span> body <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// creates a &lt;table&gt; element and a &lt;tbody&gt; element</span>
+  <span class="keyword token">var</span> tbl <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> tblBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// creating all cells</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// creates a table row</span>
+    <span class="keyword token">var</span> row <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">2</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Create a &lt;td&gt; element and a text node, make the text</span>
+      <span class="comment token">// node the contents of the &lt;td&gt;, and put the &lt;td&gt; at</span>
+      <span class="comment token">// the end of the table row</span>
+      <span class="keyword token">var</span> cell <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> cellText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"cell in row "</span><span class="operator token">+</span>i<span class="operator token">+</span><span class="string token">", column "</span><span class="operator token">+</span>j<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cellText<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      row<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cell<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="comment token">// add the row to the end of the table body</span>
+    tblBody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>row<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// put the &lt;tbody&gt; in the &lt;table&gt;</span>
+  tbl<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tblBody<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// appends &lt;table&gt; into &lt;body&gt;</span>
+  body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbl<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// sets the border attribute of tbl to 2;</span>
+  tbl<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">"border"</span><span class="punctuation token">,</span> <span class="string token">"2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p>
+
+<p>Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :</p>
+
+<ol>
+ <li>On crée d'abord l'élément &lt;table&gt;.</li>
+ <li>Ensuite, l'élément &lt;tbody&gt; qui est un enfant de l'élément &lt;table&gt;.</li>
+ <li>Puis, grâce à une boucle, on crée les éléments &lt;tr&gt;, qui sont des enfants de l'élément &lt;tbody&gt;.</li>
+ <li>Pour chaque élément &lt;tr&gt;, on emploie une boucle pour créer les éléments enfants &lt;td&gt;.</li>
+ <li>Enfin pour chaque élément &lt;td&gt;, on crée le nœud texte contenant le texte de la cellule du tableau.</li>
+</ol>
+
+<p>Après avoir créé les éléments &lt;table&gt;, &lt;tbody&gt;, &lt;tr&gt;, &lt;td&gt; et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :</p>
+
+<ol>
+ <li>On attache d'abord chaque nœud texte à son élément parent &lt;td&gt; en utilisant
+  <pre>cell.appendChild(texte);</pre>
+ </li>
+ <li>Ensuite, on lie chaque élément &lt;td&gt; à son élément &lt;tr&gt; parent avec
+  <pre>row.appendChild(cell);</pre>
+ </li>
+ <li>Puis chaque &lt;tr&gt; à son parent &lt;tbody&gt; avec
+  <pre>tablebody.appendChild(row);</pre>
+ </li>
+ <li>Puis l'élément &lt;tbody&gt; est attaché à son élément parent &lt;table&gt; grace à
+  <pre>table.appendChild(tablebody);</pre>
+ </li>
+ <li>Enfin, &lt;table&gt; est rattaché à &lt;body&gt; avec
+  <pre>body.appendChild(table);</pre>
+ </li>
+</ol>
+
+<p>Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.</p>
+
+<p>Voici l'HTML généré par ce code JavaScript :</p>
+
+<pre>...
+&lt;table border="2"&gt;
+&lt;tr&gt;&lt;td&gt;la cellule est ligne 0 colonne 0&lt;/td&gt;&lt;td&gt;la cellule est ligne 0 colonne 1&lt;/td&gt;&lt;/tr&gt;
+&lt;tr&gt;&lt;td&gt;la cellule est ligne 1 colonne 0&lt;/td&gt;&lt;td&gt;la cellule est ligne 1 colonne 1&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+...
+</pre>
+
+<p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p>
+
+<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p>
+
+<p>Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre &lt;table&gt; de la figure 1, l'élément &lt;table&gt; a un enfant, l'élément &lt;tbody&gt;, qui lui-même a deux enfants &lt;tr&gt;, qui à leur tour ont chacun un enfant &lt;td&gt;. Enfin, chacun de ces éléments &lt;td&gt; a un enfant, un nœud texte.</p>
+
+<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html" name="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : <span id="result_box" lang="fr"><span>Définition de la couleur d'arrière-plan d'un paragraphe</span></span></h2>
+
+<p><code>getElementsByTagName</code> est à la fois une méthode de l'interface Document et de l'interface Element. <span id="result_box" lang="fr"><span>Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette.</span> <span>Le premier élément de la liste se trouve à la position [0] dans le tableau.</span></span></p>
+
+<h3 id="Contenu_HTML_2">Contenu HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Set paragraph background color<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>set_background()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hi<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">set_background</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// </span></code>récupère une liste de tous les éléments body (il n'y en aura qu'un)<code class="language-js"><span class="comment token">,</span>
+  <span class="comment token">// </span></code>et sélectionne le premier (indice 0) de ces éléments<code class="language-js">
+  myBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// </span></code>à présent, trouve tous les éléments p enfants de cet élément body<code class="language-js">
+  myBodyElements <span class="operator token">=</span> myBody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// </span></code>récupère le second élément de cette liste d'éléments p<code class="language-js">
+  myP <span class="operator token">=</span> myBodyElements<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  myP<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"rgb(255,0,0)"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p>
+
+<p>Dans cet exemple, on assigne à la variable <code>myP</code> l'objet DOM du second élément <code>p</code> du corps (body).</p>
+
+<ol>
+ <li>On récupère d'abord une liste de tous les éléments body avec
+  <pre class="line-numbers  language-html"><code class="language-html">myBody = document.getElementsByTagName("body")[0]</code></pre>
+  Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à <code>{{mediawiki.external(0)}}</code>.</li>
+ <li>Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant
+  <pre class="line-numbers  language-html"><code class="language-html">myBodyElements = myBody.getElementsByTagName("p");</code></pre>
+ </li>
+ <li>Pour finir on prend le deuxième élément de la liste des éléments p avec
+  <pre class="line-numbers  language-html"><code class="language-html">myP = myBodyElements[1];</code></pre>
+ </li>
+</ol>
+
+<p><img alt="Image:sample2a2.jpg" src="https://developer.mozilla.org/@api/deki/files/834/=Sample2a2.jpg"></p>
+
+<p>Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :</p>
+
+<pre class="eval">myP.style.background = "rgb(255,0,0)";
+// ajoute une propriété de style inline
+</pre>
+
+<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29" name="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29">Création de nœuds texte avec <code>document.createTextNode("..")</code></h3>
+
+<p>Employez l'objet <code>document</code> pour appeler la méthode <code>createTextNode</code> et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">myTextNode = document.createTextNode("world");</code></pre>
+
+<p>Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte <code>"world"</code>, et <code>monNoeudTexte</code> est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.</p>
+
+<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29" name="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3>
+
+<p>En invoquant <code>myP.appendChild</code> ({{mediawiki.external('node_element')}}) , vous définissez <code>element_nœud</code> comme un nouvel enfant du second élément <code>p</code> (<code>myP</code> a été défini plus haut comme étant le second élément p).</p>
+
+<pre class="eval">myP.appendChild(noeudTexte);
+</pre>
+
+<p>En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : <code>helloworld</code>. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise &lt;p&gt;. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :</p>
+
+<p><img alt="Image:sample2b2.jpg" src="https://developer.mozilla.org/@api/deki/files/835/=Sample2b2.jpg"></p>
+
+<div class="note">L'utilisation de <code>createTextNode</code> et de <code>appendChild</code> permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode <code>appendChild</code> ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez <code>insertBefore</code> à la place de <code>appendChild</code>.</div>
+
+<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29" name="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29">Création de nouveaux éléments avec l'objet document et la méthode <code>createElement(...)</code></h3>
+
+<p>Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec <code>createElement</code>. Pour créer un élément &lt;p&gt; enfant de l'élément &lt;body&gt;, vous pouvez vous servir de <code>body</code> défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez <code>document.createElement("nombalise")</code>. Voici un exemple :</p>
+
+<pre class="eval">nouveauNoeudBALISEP = document.createElement("p");
+body.appendChild(nouveauNoeudBALISEP);
+</pre>
+
+<p><img alt="Image:sample2c.jpg" src="https://developer.mozilla.org/@api/deki/files/836/=Sample2c.jpg"></p>
+
+<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29" name="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29">Suppression de nœuds avec la méthode <code>removeChild(...)</code></h3>
+
+<p>Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de <code>myP</code> (deuxième élément &lt;p&gt;) le nœud texte contenant le mot « world » :</p>
+
+<pre class="eval">myP.removeChild(noeudTexte);
+</pre>
+
+<p>Vous pouvez ensuite ajouter <code>monNoeudTexte</code> (contenant <code>"world"</code>) dans l'élément &lt;p&gt; récemment créé :</p>
+
+<pre class="eval">nouveauNoeudBALISEP.appendChild(noeudTexte);
+</pre>
+
+<p>L'arborescence des objets se présente désormais comme ceci :</p>
+
+<p><img alt="Image:sample2d.jpg" src="https://developer.mozilla.org/@api/deki/files/837/=Sample2d.jpg"></p>
+
+<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29" name="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2>
+
+<p>Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.</p>
+
+<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML" name="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3>
+
+<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p>
+
+<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence" name="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3>
+
+<p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</p>
+
+<ul>
+ <li>Récupérer l'objet body (c'est le premier élément de l'objet document).</li>
+ <li>Créer tous les éléments.</li>
+ <li>Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).</li>
+</ul>
+
+<p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p>
+
+<div class="note">Il y a une ligne de code supplémentaire à la fin de la fonction <code>start()</code>, qui définit la propriété bordure du tableau en employant la méthode <code>setAttribute</code>. <code>setAttribute</code> utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.</div>
+
+<pre>&lt;head&gt;
+&lt;title&gt;Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript&lt;/title&gt;
+&lt;script&gt;
+    function start() {
+        // récupère une référence vers l'élément body
+        var body = document.getElementsByTagName("body")[0];
+
+        // création des éléments &lt;table&gt; et &lt;tbody&gt;
+        table     = document.createElement("table");
+        tablebody = document.createElement("tbody");
+
+        // création des cellules
+        for(var j = 0; j &lt; 2; j++) {
+            // création d'un élément &lt;tr&gt;
+            row = document.createElement("tr");
+
+            for(var i = 0; i &lt; 2; i++) {
+                // création d'un élément &lt;td&gt;
+                cell = document.createElement("td");
+                // création d'un nœud texte
+                texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i);
+                // ajoute le nœud texte créé à la cellule &lt;td&gt;
+                cell.appendChild(texte);
+                // ajoute la cellule &lt;td&gt; à la ligne &lt;tr&gt;
+                row.appendChild(cell);
+            }
+            // ajoute la ligne &lt;tr&gt; à l'élément &lt;tbody&gt;
+            tablebody.appendChild(row);
+        }
+
+        // ajoute &lt;tbody&gt; à l'élément &lt;table&gt;
+        table.appendChild(tablebody);
+        // ajoute &lt;table&gt; à l'élément &lt;body&gt;
+        body.appendChild(table);
+        // définit l'attribut border de table à 2;
+        table.setAttribute("border", "2");
+    }
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="start()"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS" name="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2>
+
+<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau" name="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3>
+
+<p>Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut <code>childNodes</code> qui est utilisé pour récupérer la liste des nœuds enfants de <code>cel</code>. A la différence de <code>getElementsByTagName</code>, la liste renvoyée par <code>childNodes</code> comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode <code>{{ mediawiki.external('x') }}</code> est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans <code>celtext</code>. Ensuite, un nouveau nœud texte contenant les données de <code>celtext</code> est greffé en tant qu'enfant sur l'élément &lt;body&gt;.</p>
+
+<div class="note">Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut <code>data</code>.</div>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js">mybody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+mytable <span class="operator token">=</span> mybody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+mytablebody <span class="operator token">=</span> mytable<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+myrow <span class="operator token">=</span> mytablebody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+mycel <span class="operator token">=</span> myrow<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+<span class="comment token">// premier élément du noeud liste des enfants de mycel</span>
+myceltext<span class="operator token">=</span>mycel<span class="punctuation token">.</span>childNodes<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+<span class="comment token">// </span></code> <span id="result_box" lang="fr"><span>contenu de currenttext est le contenu des données de</span></span><code class="language-js"><span class="comment token"> myceltext</span>
+currenttext<span class="operator token">=</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>myceltext<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span>
+mybody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currenttext<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut" name="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3>
+
+<p>A la fin d'Exemple1, l'appel à <code>setAttribute</code> sur l'objet <code>table</code> définit la propriété <code>border</code> du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode <code>getAttribute</code> :</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">mytable.getAttribute("border");</code></pre>
+
+<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style" name="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style">Cacher une colonne en changeant les propriétés de style</h3>
+
+<p>Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.</p>
+
+<pre>&lt;html&gt;
+&lt;body onload="start()"&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    function start() {
+       var body  = document.getElementsByTagName("body")[0];
+       table     = document.createElement("table");
+       tablebody = document.createElement("tbody");
+
+       for(var j = 0; j &lt; 2; j++) {
+           row = document.createElement("tr");
+           for(var i = 0; i &lt; 2; i++) {
+               cell = document.createElement("td");
+               text = document.createTextNode("la cellule est :" + i + j);
+               cell.appendChild(text);
+               row.appendChild(cell);
+               // change la couleur de fond de la cellule
+               // si la colonne est 0. Si la colonne est 1, cache la cellule
+               if (i == 0) {
+                   cell.style.background = "rgb(255,0,0)";
+               } else {
+                   cell.style.display = "none";
+               }
+           }
+           tablebody.appendChild(row);
+       }
+       table.appendChild(tablebody);
+       body.appendChild(table);
+    }
+&lt;/script&gt;
+&lt;/html&gt;
+</pre>
+
+<h4 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h4>
+
+<dl>
+ <dt>Author(s)</dt>
+ <dd>Marcio Galli</dd>
+ <dt>Migrated from</dt>
+ <dd>http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/</dd>
+</dl>
+
+<p><br>
+ <span class="comment">Interwik</span></p>
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html
index a9efdf8cdb..a9efdf8cdb 100644
--- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html
+++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html
index 0f140378e6..0f140378e6 100644
--- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html
+++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html
diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/documentorshadowroot/activeelement/index.html
index 5115a1135c..5115a1135c 100644
--- a/files/fr/web/api/document/activeelement/index.html
+++ b/files/fr/web/api/documentorshadowroot/activeelement/index.html
diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html
index 493d7a55a1..493d7a55a1 100644
--- a/files/fr/web/api/document/elementfrompoint/index.html
+++ b/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html
diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/documentorshadowroot/getselection/index.html
index 9352399ada..9352399ada 100644
--- a/files/fr/web/api/document/getselection/index.html
+++ b/files/fr/web/api/documentorshadowroot/getselection/index.html
diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/documentorshadowroot/stylesheets/index.html
index 0c607adc5f..0c607adc5f 100644
--- a/files/fr/web/api/document/stylesheets/index.html
+++ b/files/fr/web/api/documentorshadowroot/stylesheets/index.html
diff --git a/files/fr/web/api/cssmatrix/index.html b/files/fr/web/api/dommatrix/index.html
index 2b5039986e..2b5039986e 100644
--- a/files/fr/web/api/cssmatrix/index.html
+++ b/files/fr/web/api/dommatrix/index.html
diff --git a/files/fr/web/api/animationeffecttimingproperties/delay/index.html b/files/fr/web/api/effecttiming/delay/index.html
index bb8c8d9e56..bb8c8d9e56 100644
--- a/files/fr/web/api/animationeffecttimingproperties/delay/index.html
+++ b/files/fr/web/api/effecttiming/delay/index.html
diff --git a/files/fr/web/api/animationeffecttimingproperties/index.html b/files/fr/web/api/effecttiming/index.html
index cc984622c9..cc984622c9 100644
--- a/files/fr/web/api/animationeffecttimingproperties/index.html
+++ b/files/fr/web/api/effecttiming/index.html
diff --git a/files/fr/web/api/element/compositionend_event/index.html b/files/fr/web/api/element/compositionend_event/index.html
new file mode 100644
index 0000000000..8a15ab679a
--- /dev/null
+++ b/files/fr/web/api/element/compositionend_event/index.html
@@ -0,0 +1,131 @@
+---
+title: compositionend
+slug: Web/Events/compositionend
+translation_of: Web/API/Element/compositionend_event
+---
+<p>L'événement <strong><code>compositionend</code></strong> est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).</p>
+
+<p>Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("CompositionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Html">Html</h3>
+
+<pre class="brush: html notranslate">&lt;div class="control"&gt;
+  &lt;label for="name"&gt;Sur macOS, cliquez sur la boîte de texte,&lt;br&gt; puis appuyez sur &lt;kbd&gt;option&lt;/kbd&gt; + &lt;kbd&gt;`&lt;/kbd&gt;, puis &lt;kbd&gt;a&lt;/kbd&gt;:&lt;/label&gt;
+  &lt;input type="text" id="example" name="example"&gt;
+&lt;/div&gt;
+
+&lt;div class="event-log"&gt;
+  &lt;label&gt;Log d'événement:&lt;/label&gt;
+  &lt;textarea readonly class="event-log-contents" rows="8" cols="25"&gt;&lt;/textarea&gt;
+  &lt;button class="clear-log"&gt;Effacer&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">body {
+  padding: .2rem;
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.control {
+  grid-area: control;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+input[type="text"] {
+  margin: .5rem 0;
+}
+
+kbd {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}
+</pre>
+</div>
+
+<h3 id="JS">JS</h3>
+
+<pre class="brush: js notranslate">const inputElement = document.querySelector('input[type="text"]');
+const log = document.querySelector('.event-log-contents');
+const clearLog = document.querySelector('.clear-log');
+
+clearLog.addEventListener('click', () =&gt; {
+    log.textContent = '';
+});
+
+function handleEvent(event) {
+    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
+}
+
+inputElement.addEventListener('compositionstart', handleEvent);
+inputElement.addEventListener('compositionupdate', handleEvent);
+inputElement.addEventListener('compositionend', handleEvent);</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{ EmbedLiveSample('Exemple', '100%', '180px') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-compositionend')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+<p>{{Compat("api.Element.compositionend_event")}}</p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("compositionstart")}}</li>
+ <li>{{Event("compositionupdate")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html
new file mode 100644
index 0000000000..8b72ed5d31
--- /dev/null
+++ b/files/fr/web/api/element/compositionstart_event/index.html
@@ -0,0 +1,146 @@
+---
+title: compositionstart
+slug: Web/Events/compositionstart
+translation_of: Web/API/Element/compositionstart_event
+---
+<p>L'événement <strong><code>compositionstart </code></strong><code>est déclenché lorsque la composition d'un passage de texte est préparée (similaire à keydown pour une entrée clavier, mais démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile). </code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Elément ayant le focus qui traite la composition</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce qu'il se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Peut-il être annulé?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (fenêtre du document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{ReadOnlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>data </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>
+    <p>La chaîne de caractères originale éditée ou une chaîne vide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>locale </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La valeur de l'attribut <em>data</em> est fausse</p>
+
+<p>[2] L'événement a été déclenché dans les versions de Gecko antérieures à la 9.0, mais n'avait pas les attributs et les méthodes DOM Level 3.</p>
+
+<p>Gecko ne supporte pas l'attribut <em>local</em>e pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via <code><a href="/fr/docs/Web/API/CompositionEvent#initCompositionEvent()">initCompositionEvent()</a> à la création d'événements non-approuvés.</code></p>
+
+<p>Selon la spécification DOM Level3, <strong>compositionstart</strong> est annulable; Cependant, Gecko ne vous laisse pas l' annuler.</p>
+
+<p>Gecko déclenche l'événement lorsque IME commence la composition, et quelques plateformes n'ont pas d'API pour annuler la composition une fois commencée. De plus, Gecko ne peut pas savoir si un événement clavier va commencé la composition ou non jusqu'à ce que IME ne la commence réellement. A cause de celà, {{domxref("event.preventDefault()")}} ne fonctionne pas sur l'événement <code><strong>compositionstart</strong> avec Gecko.</code></p>
+
+<p>Les éditeurs de Gecko (comme &lt;input type="text"&gt; <code>&lt;div contenteditable/&gt; et designMode) commence la composition après la phase de propagation de <strong>compositionstart</strong>. Donc, au moment où votre gestionnaire de <strong>compositionstart</strong> est appelé, aucun contenu n'a été modifié.</code></p>
+
+<p>[3] La valeur de data est toujours vide.</p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("compositionend")}}</li>
+ <li>{{Event("compositionupdate")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/compositionupdate_event/index.html b/files/fr/web/api/element/compositionupdate_event/index.html
new file mode 100644
index 0000000000..ba22586181
--- /dev/null
+++ b/files/fr/web/api/element/compositionupdate_event/index.html
@@ -0,0 +1,137 @@
+---
+title: compositionupdate
+slug: Web/Events/compositionupdate
+translation_of: Web/API/Element/compositionupdate_event
+---
+<p>L'événement <strong>compositionupdate</strong> est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (<code>démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Elément ayant le focus qui traite la composition. Nul si non-accessible.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce qu'il se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Peut-il être annulé?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (fenêtre du document).</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{ReadOnlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>data </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>La chaîne de caractères originale éditée ou une chaîne vide.</td>
+  </tr>
+  <tr>
+   <td><code>locale </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suport basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] N'est pas<span id="result_box" lang="fr"><span> distribué immédiatement après l'événement <code>compositionstart</code>. </span></span></p>
+
+<p>[2] <code>Les événements <strong>compositionupdate</strong> sont déclenchés avant </code><span id="result_box" lang="fr"><span>avant que le contenu éditable ne soit réellement modifié; C'est-à-dire que la valeur d'un élément éditable n'a pas encore été modifiée lorsque les gestionnaires de </span></span><strong><code>compositionupdate</code></strong><span lang="fr"><span> sont appelés. A partir de Gecko 12.0 </span></span>{{geckoRelease("12.0")}}, les événements <code>input</code> sont déclenchés durant l'édition, après que le contenu de l'élément a été modifié. <span id="result_box" lang="fr"><span>Cela permet d'obtenir le contenu mis à jour pendant que l'édition est en cours.</span></span></p>
+
+<p>Gecko ne supporte pas l'attribut <em>local</em>e pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via <code><a href="/fr/docs/Web/API/CompositionEvent#initCompositionEvent()">initCompositionEvent()</a> à la création d'événements non-approuvés.</code></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Event("compositionstart")}}</li>
+ <li>{{Event("compositionupdate")}}</li>
+ <li>{{Event("compositionend")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/copy_event/index.html b/files/fr/web/api/element/copy_event/index.html
new file mode 100644
index 0000000000..d3a9ee8224
--- /dev/null
+++ b/files/fr/web/api/element/copy_event/index.html
@@ -0,0 +1,148 @@
+---
+title: copy
+slug: Web/Events/copy
+translation_of: Web/API/Element/copy_event
+---
+<p>L'événement <strong>copy</strong> est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Voir ce-dessous</dd>
+</dl>
+
+<p>Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:</p>
+
+<pre class="javascript">document.addEventListener('copy', function(e){
+    e.clipboardData.setData('text/plain', 'Hello, world!');
+    e.clipboardData.setData('text/html', '&lt;b&gt;Hello, world!&lt;/b&gt;');
+    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
+});</pre>
+
+<p>Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.</p>
+
+<p>L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:</p>
+
+<ul>
+ <li>Un événement de copie <a href="/fr/docs/Web/Guide/Events/Creating_and_triggering_events">synthétique</a> n'a pas d'action par défaut;</li>
+ <li>Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;</li>
+ <li>Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de <em>clipboardData</em> de {{domxref("ClipboardEvent")}};</li>
+ <li>Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(22) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(22) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/error_event/index.html b/files/fr/web/api/element/error_event/index.html
new file mode 100644
index 0000000000..5ab9de5a8c
--- /dev/null
+++ b/files/fr/web/api/element/error_event/index.html
@@ -0,0 +1,93 @@
+---
+title: error
+slug: Web/Events/error
+tags:
+  - DOM
+  - Erreurs
+  - Gestionnaire d'erreurs
+  - Interface
+  - évènements
+translation_of: Web/API/Element/error_event
+---
+<p>L'événement <strong>error</strong> <em>(erreur)</em> est déclenché lorsqu'une ressource n'a pas pu être chargée <span id="result_box" lang="fr"><span>;</span> <span>les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.</span></span></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} si généré depuis l'interface utilisateur,<br>
+ {{domxref("MediaRecorderErrorEvent")}} si généré par <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>  et<br>
+ sinon {{domxref("Event")}}.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+ <dd style="margin: 0 0 0 120px;"> </dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pour_des_évènements_MediaStream_Recording">Pour des évènements MediaStream Recording</h3>
+
+<p>Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.</p>
+
+<p>{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}</dd>
+ <dt>{{domxref("HTMLMediaElement.onerror")}}</dt>
+ <dd>Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} .</dd>
+ <dt>{{domxref("MediaRecorder.onerror")}}</dt>
+ <dd>Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}</dd>
+</dl>
diff --git a/files/fr/web/api/element/focusin_event/index.html b/files/fr/web/api/element/focusin_event/index.html
new file mode 100644
index 0000000000..79a9e2af63
--- /dev/null
+++ b/files/fr/web/api/element/focusin_event/index.html
@@ -0,0 +1,123 @@
+---
+title: focusin
+slug: Web/Events/focusin
+translation_of: Web/API/Element/focusin_event
+---
+<p>L'événement <strong>focusin</strong> est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec <a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> est que <strong>focusin</strong> se propage.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Event target losing focus.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>Event target receiving focus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet événement n'est pas encore supporté par Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'événement <a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> à la place, qui est aussi <a href="/en-US/docs/Mozilla_event_reference/focus_(event)#Event_delegation">compatible avec la délégation d'événements.</a></p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/focusout_event/index.html b/files/fr/web/api/element/focusout_event/index.html
new file mode 100644
index 0000000000..01ddab4738
--- /dev/null
+++ b/files/fr/web/api/element/focusout_event/index.html
@@ -0,0 +1,123 @@
+---
+title: focusout
+slug: Web/Events/focusout
+translation_of: Web/API/Element/focusout_event
+---
+<p>L'évènement <code><strong>focusout</strong> </code>est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et <a href="/en-US/docs/Mozilla_event_reference/blur_(event)">blur</a> est que ce dernier ne se propage pas.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Event target losing focus.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>Event target receiving focus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet évènement n'est pas encore supporté dans Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'évènement <code>blur</code> à la place, qui est également compatible avec <a href="/en-US/docs/Mozilla_event_reference/blur_(event)#Event_delegation">event delegation</a>.</p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/innerthtml/index.html b/files/fr/web/api/element/innerhtml/index.html
index 6addb7d54e..6addb7d54e 100644
--- a/files/fr/web/api/element/innerthtml/index.html
+++ b/files/fr/web/api/element/innerhtml/index.html
diff --git a/files/fr/web/api/element/name/index.html b/files/fr/web/api/element/name/index.html
deleted file mode 100644
index a4f8a6ba0a..0000000000
--- a/files/fr/web/api/element/name/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: element.name
-slug: Web/API/Element/name
-tags:
-  - API
-  - DOM
-  - Element
-  - Nom
-  - Propriétés
-translation_of: Web/API
-translation_of_original: Web/API/Element/name
----
-<p>{{ APIRef("DOM") }}</p>
-
-<p><code><strong>name</strong></code> obtient ou définit la propriété <code>name</code> (<em>nom</em>) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.</p>
-
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>name</code> n'existe pas pour d'autres éléments ; contrairement à <a href="https://developer.mozilla.org/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> et <a href="https://developer.mozilla.org/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p>
-</div>
-
-<p>Le <code>name</code> peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement" title="fr/DOM/form">formulaire</a> et dans la collection <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/elements" title="fr/DOM/form.elements"><code>elements</code></a> d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.</p>
-
-<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
-
-<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
-var elName = <em>HTMLElement</em>.name;
-
-var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
-var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
-</pre>
-
-<h2 id="Exemple" name="Exemple">Exemple</h2>
-
-<pre class="eval">&lt;form action="" name="formA"&gt;
-  &lt;input type="text" value="foo"&gt;
-&lt;/form&gt;
-
-&lt;script type="text/javascript"&gt;
-
-  // Obtient une référence au premier élément du formulaire
-  var formElement = document.forms['formA'].elements[0];
-
-  // Lui donne un nom
-  formElement.name = 'inputA';
-
-  // Affiche la valeur du champ
-  alert(document.forms['formA'].elements['inputA'].value);
-
-&lt;/script&gt;
-</pre>
-
-<h2 id="Notes" name="Notes">Notes</h2>
-
-<p>Dans Internet Explorer, la propriété <code>name</code> des objets DOM créés à l'aide de <code><a href="/fr/DOM/document.createElement" title="fr/DOM/document.createElement">createElement</a></code> ne peut être définie ou modifiée.</p>
-
-<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
-
-<p>Spécification DOM 2 HTML du W3C :</p>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-32783304">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-39843695">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-22051454">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-91128709">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-96819659">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-47534097">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52696514">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-31037081">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-20110362">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-59871447">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-41636323">traduction</a></small></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-70715578">traduction</a></small></li>
-</ul>
-
-<p><small>Les traductions ne sont pas normatives.</small></p>
diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/elementcssinlinestyle/style/index.html
index 85a19bb89a..85a19bb89a 100644
--- a/files/fr/web/api/htmlelement/style/index.html
+++ b/files/fr/web/api/elementcssinlinestyle/style/index.html
diff --git a/files/fr/web/api/entity/index.html b/files/fr/web/api/entity/index.html
deleted file mode 100644
index 2c160ead13..0000000000
--- a/files/fr/web/api/entity/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Entity
-slug: Web/API/Entity
-tags:
-  - API
-  - DOM
-  - Entités
-  - Interface
-  - Noeuds
-translation_of: Web/API/Entity
----
-<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
-
-<p>Référence en lecture seule à une entité DTD (<em>définition de type de document</em>). Hérite également des méthodes et propriétés de {{domxref("Node")}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("Entity.publicId")}} {{ReadOnlyInline}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
- <dt>{{domxref("Entity.systemId")}} {{ReadOnlyInline}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
- <dt>{{domxref("Entity.notationName")}}{{ReadOnlyInline}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
- <dt>{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
- <dt>{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
- <dt>{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Ajout de <code>inputEncoding</code>, <code>xmlEncoding</code> et <code>xmlVersion</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/fr/web/api/entityreference/index.html b/files/fr/web/api/entityreference/index.html
deleted file mode 100644
index ee21b2b83f..0000000000
--- a/files/fr/web/api/entityreference/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: EntityReference
-slug: Web/API/EntityReference
-tags:
-  - API
-  - Arborescence
-  - DOM
-  - Entité
-  - Interface
-  - Noeuds
-  - Reference
-translation_of: Web/API/EntityReference
----
-<p>{{APIRef("DOM")}}{{Obsolete_header}}</p>
-
-<div class="warning">
-<p>NOTE : Ceci n'est pas implémenté dans Mozilla</p>
-</div>
-
-<p>Référence en lecture seule à une référence d'entité dans l'arborescence DOM. N'a pas de propriétés ou méthodes propres mais hérite de {{domxref("Node")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#ID-11C98490", "EntityReference")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html b/files/fr/web/api/event/comparison_of_event_targets/index.html
index f938d0cff5..f938d0cff5 100644
--- a/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html
+++ b/files/fr/web/api/event/comparison_of_event_targets/index.html
diff --git a/files/fr/web/api/event/createevent/index.html b/files/fr/web/api/event/createevent/index.html
deleted file mode 100644
index 5cfbb7f05f..0000000000
--- a/files/fr/web/api/event/createevent/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Event.createEvent()
-slug: Web/API/Event/createEvent
-tags:
-  - API
-  - DOM
-  - Evènement
-  - Méthodes
-translation_of: Web/API/Document/createEvent
-translation_of_original: Web/API/Event/createEvent
----
-<p>{{APIRef("DOM")}}</p>
-
-<p>Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode <code>initEvent()</code> .</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre><code>document.createEvent(type) </code></pre>
-
-<dl>
- <dt><code>type</code></dt>
- <dd>Une chaîne de caractère indiquant le type de l'évènement à créer.</dd>
-</dl>
-
-<p>Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre>var newEvent = document.createEvent("UIEvents");</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li>
-</ul>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Event.createEvent")}}</p>
diff --git a/files/fr/web/api/api_fichier_systeme/index.html b/files/fr/web/api/file_and_directory_entries_api/index.html
index 8cef71b2fa..8cef71b2fa 100644
--- a/files/fr/web/api/api_fichier_systeme/index.html
+++ b/files/fr/web/api/file_and_directory_entries_api/index.html
diff --git a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html b/files/fr/web/api/formdata/using_formdata_objects/index.html
index a64c8be0d0..a64c8be0d0 100644
--- a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html
+++ b/files/fr/web/api/formdata/using_formdata_objects/index.html
diff --git a/files/fr/web/api/fullscreen_api/index.html b/files/fr/web/api/fullscreen_api/index.html
new file mode 100644
index 0000000000..76144c64f2
--- /dev/null
+++ b/files/fr/web/api/fullscreen_api/index.html
@@ -0,0 +1,301 @@
+---
+title: Utiliser le mode plein écran
+slug: Web/Guide/DOM/Using_full_screen_mode
+tags:
+  - API
+  - DOM
+  - Plein écran
+  - Tutoriel
+translation_of: Web/API/Fullscreen_API
+---
+<p>{{DefaultAPISidebar("Fullscreen API")}}</p>
+
+<p class="summary">L'<strong>API Fullscreen</strong> <em>(plein écran)</em> fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. <span id="result_box" lang="fr"><span>L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.</span></span></p>
+
+<div class="note"><strong>Note :</strong> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. <span id="result_box" lang="fr"><span>Consultez le tableau récapitulant les <a href="#Préfixes">préfixes</a> et les différences de noms entre eux (vous pouvez également utiliser </span></span> <a href="https://github.com/rafrex/fscreen">Fscreen</a> <span lang="fr"><span> pour l'accès du fournisseur à l'API).</span></span></div>
+
+<h2 id="Specification" name="Specification">Activation du mode plein écran</h2>
+
+<p>En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .</p>
+
+<p>Prenons cet élément {{ HTMLElement("video") }} :</p>
+
+<pre class="brush: html">&lt;video controls id="myvideo"&gt;
+  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
+  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myvideo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>requestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Différences_de_présentation">Différences de présentation</h3>
+
+<p>Il est important de savoir qu'il y a une différence clef entre les implémentations de Gecko et WebKit : Gecko ajoute automatiquement des règles CSS à l'élément afin qu'il remplisse l'écran : "<code>width: 100%; height: 100%</code>". WebKit ne fait pas ça ; à la place, il centre l'élément sans le redimensionner au milieu d'un écran noir. Pour obtenir le même comportement que Gecko dans WebKit, vous devez ajouter votre propre règle "<code>width: 100%; height: 100%;</code>" à l'élément :</p>
+
+<pre class="brush: css">#myvideo:-webkit-full-screen  {
+  width: 100%;
+  height: 100%;
+}
+</pre>
+
+<p>Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko, vous devez placer l'élément que vous souhaitez présenter dans un autre élément, que vous mettrez en plein écran, et utiliser des règles CSS pour ajuster l'apparence de l'élément interne.</p>
+
+<h3 id="Notification">Notification</h3>
+
+<p>Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type   {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement  {{ event("fullscreenchange") }} . Notez que l'événement  en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran.</p>
+
+<h3 id="Lorsqu'une_demande_de_plein_écran_échoue">Lorsqu'une demande de plein écran échoue</h3>
+
+<p>Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut  {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement  <code>mozfullscreenerror</code> . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. <span id="result_box" lang="fr"><span>Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.</p>
+</div>
+
+<h2 id="Sortie_du_mode_plein_écran">Sortie du mode plein écran</h2>
+
+<p>L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode  {{domxref("Document.exitFullscreen()")}} .</p>
+
+<h2 id="Autres_informations">Autres informations</h2>
+
+<p>Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran :</p>
+
+<dl>
+ <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
+ <dd>L'attribut <code>fullscreenElement</code> vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran.</dd>
+ <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
+ <dd>L'attribut <code>fullscreenEnabled</code> vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.</dd>
+</dl>
+
+<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Choses que vos utilisateurs doivent savoir</h2>
+
+<p>Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd>  (ou  <kbd>F11</kbd>) pour sortir du mode plein écran.</p>
+
+<p>En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.</p>
+
+<h2 id="Specification" name="Specification">Exemple</h2>
+
+<p>Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches  <kbd>Retour</kbd>  ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.</p>
+
+<p><a href="/samples/domref/fullscreen.html">Voir l'exemple sur une page</a></p>
+
+<h3 id="Action_sur_la_touche_Entrée">Action sur la touche <kbd>Entrée</kbd></h3>
+
+<p>Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche  <kbd>Entrée</kbd> .</p>
+
+<pre class="brush: js">document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+</pre>
+
+<h3 id="Passer_en_mode_plein_écran">Passer en mode plein écran</h3>
+
+<p>Ce code est appelé lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd>, comme vu plus haut.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">toggleFullScreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>document<span class="punctuation token">.</span>fullscreenElement<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>exitFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      document<span class="punctuation token">.</span><span class="function token">exitFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p> Dans un premier temps, la valeur de l'attribut <code>fullscreenElement</code> est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par <code>moz-, ms-</code> ou <code>webkit-</code>). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.</p>
+
+<p>Si le mode plein écran est déjà activé (<code>fullscreenElement</code> est non nul), nous appelons  {{ domxref("document.exitFullscreen()") }}.</p>
+
+<h2 id="Préfixes_2"><a name="Préfixes">Préfixes</a></h2>
+
+<p>Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a>) . <span id="result_box" lang="fr"><span>Voici le tableau résumant les préfixes et les différences de noms entre eux </span></span><span lang="fr"><span>:</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Blink (Chrome &amp; Opera)</th>
+   <th scope="col">Gecko (Firefox)</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreen")}}</td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>mozFullScreen</code></td>
+   <td><em>-</em></td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>webkitIsFullScreen</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenEnabled")}}</td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>mozFullScreenEnabled</code></td>
+   <td><code>msFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenElement")}}</td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>mozFullScreenElement</code></td>
+   <td><code>msFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenchange")}}</td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onmozfullscreenchange</code></td>
+   <td><code>MSFullscreenChange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenerror")}}</td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onmozfullscreenerror</code></td>
+   <td><code>MSFullscreenError</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.exitFullscreen()")}}</td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>mozCancelFullScreen()</code></td>
+   <td><code>msExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element.requestFullscreen()")}}</td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>mozRequestFullScreen()</code></td>
+   <td><code>msRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="BrowserCompatibility" name="BrowserCompatibility">Compatibilité des navigateurs</h2>
+
+<p><span id="result_box" lang="fr"><span>Tous les navigateurs implémentent cette API.</span> <span>Néanmoins certains l'implémentent avec des préfixes avec des noms légèrement différents</span></span> <span id="result_box" lang="fr"><span>;</span> <span>par exemple, au lieu de <code>requestFullscreen ()</code>, il y a <code>MozRequestFullScreen ()</code>.</span></span></p>
+
+<p>{{ CompatibilityTable() }} </p>
+
+<div id="compat-mobile">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>15 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.0 {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>20 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.1 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html
new file mode 100644
index 0000000000..1cfa50fc2c
--- /dev/null
+++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html
@@ -0,0 +1,281 @@
+---
+title: Utiliser l'API Gamepad
+slug: Web/Guide/API/Gamepad
+translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
+---
+<p>{{ SeeCompatTable() }}</p>
+<div class="summary">
+ <p><span class="seoSummary">HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme <code>&lt;canvas&gt;</code>, WebGL, <code>&lt;audio&gt;</code>, et <code>&lt;video&gt;</code>, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives.</span> L'API Gamepad est une manière pour les développeurs et <em><code>designers</code></em> d'accéder aux contrôleurs de jeux.</p>
+</div>
+<div class="note">
+ <p><strong>Note</strong><strong>:</strong> Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant <code>about:config</code> et en activant <code>dom.gamepad.enabled</code>.</p>
+</div>
+<p>L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.</p>
+<h2 id="conntecting" name="conntecting">Connexion au contrôleur</h2>
+<p>Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.</p>
+<div class="geckoVersionNote">
+ <p>Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.</p>
+</div>
+<p>Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :</p>
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+</pre>
+<p>Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété <code>gamepad</code> de l'événement.</p>
+<div class="note">
+ <p><strong>Note</strong>: À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.</p>
+</div>
+<h2 id="disconnecting" name="disconnecting">Déconnexion du contrôleur</h2>
+<p>Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : <span style="line-height: 1.5;"> {{ domxref("Window.gamepaddisconnected") }}.</span></p>
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Contrôleur n°%d déconnecté : %s",
+  e.gamepad.index, e.gamepad.id);
+});</pre>
+<p>La propriété <code>index</code> sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par<span style="line-height: 1.5;"> {{ domxref("navigator.getGamepads") }}.</span></p>
+<pre class="brush: js">var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note :
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+</pre>
+<p>Cet exemple montre également comment la propriété <code>gamepad</code> peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique.</p>
+<div>
+ [PAGE NON TRADUITE DEPUIS ICI...]</div>
+<div>
+  </div>
+<h2 id="querying" name="querying">Querying the Gamepad object</h2>
+<p>As you can see, the <strong>gamepad</strong> events discussed above include a <code>gamepad</code> property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.</p>
+<p>Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.</p>
+<div class="note">
+ <p><strong>Note</strong>: The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p>
+</div>
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});</pre>
+<p>The {{ domxref("Gamepad") }} object's properties are as follows:</p>
+<ul>
+ <li><code>id</code>: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (<code>-</code>): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.</li>
+ <li><code>index</code>: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.</li>
+ <li><code>mapping</code>: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. If the browser is able to map controls on the device to that layout the <code>mapping</code> property will be set to the string <code>standard</code>.</li>
+ <li><code>connected</code>: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is <code>True</code>; if not, it is <code>False</code>.</li>
+ <li><code>buttons</code>: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a <code>pressed</code> and a <code>value</code> property:
+  <ul>
+   <li>The <code>pressed</code> property is a boolean indicating whether the button is currently pressed (<code>true</code>) or unpressed (<code>false</code>).</li>
+   <li>The <code>value</code> property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.</li>
+  </ul>
+ </li>
+ <li><code>axes</code>: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).</li>
+ <li><code>timestamp</code>: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the <code>axes</code> and <code>button</code> data have been updated from the hardware. The value must be relative to the <code>navigationStart</code> attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong>: The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p>
+</div>
+<h3 id="Using_button_information">Using button information</h3>
+<p>Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can <a href="http://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.</p>
+<p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks.</p>
+<pre class="brush: js">var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+
+var rAF = window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.requestAnimationFrame;
+
+var rAFStop = window.mozCancelRequestAnimationFrame ||
+  window.webkitCancelRequestAnimationFrame ||
+  window.cancelRequestAnimationFrame;</pre>
+<p>Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p>
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});</pre>
+<p>Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally.</p>
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  rAFStop(start);
+});</pre>
+<p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility.</p>
+<pre class="brush: js">if(!('GamepadEvent' in window)) {
+  // No gamepad events available, poll instead.
+  var interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    var gp = gamepads[i];
+    if(gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}</pre>
+<p>Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the <code>a</code> and <code>b</code> movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of <code>a</code> and <code>b</code> respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.</p>
+<p>After all this is done, we use our <code>rAF</code> variable to request the next animation frame, running <code>gameLoop()</code> again.</p>
+<pre class="brush: js">function buttonPressed(b) {
+<span class="k">  if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="o">==</span> <span class="s2">"object"</span><span class="p">)</span> <span class="p">{</span>
+<span class="nx">    return</span> <span class="nx">b</span><span class="p">.</span><span class="nx">pressed</span><span class="p">;</span>
+<span class="nx">  </span><span class="p">}</span>
+<span class="p">  return</span> <span class="nx">b</span> <span class="o">==</span> <span class="mf">1.0</span><span class="p">;</span>
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads)
+    return;
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if(buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if(buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};</pre>
+<h3 id="Using_axes_information">Using axes information</h3>
+<p><strong>TBD (basically the same, except using axes[i] rather than button[i].value for both Firefox and Chrome.)</strong></p>
+<h2 id="Complete_example_Displaying_gamepad_state">Complete example: Displaying gamepad state</h2>
+<p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p>
+<pre class="brush: js">var haveEvents = 'GamepadEvent' in window;
+var controllers = {};
+var rAF = window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.requestAnimationFrame;
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad; var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i=0; i&lt;gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+  d.appendChild(b);
+  var a = document.createElement("div");
+  a.className = "axes";
+  for (var i=0; i&lt;gamepad.axes.length; i++) {
+    var e = document.createElement("progress");
+    e.className = "axis";
+    //e.id = "a" + i;
+    e.setAttribute("max", "2");
+    e.setAttribute("value", "1");
+    e.innerHTML = i;
+    a.appendChild(e);
+  }
+  d.appendChild(a);
+  document.getElementById("start").style.display = "none";
+  document.body.appendChild(d);
+  rAF(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+    for (var i=0; i&lt;controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+      var pct = Math.round(val * 100) + "%"
+      b.style.backgroundSize = pct + " " + pct;
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (var i=0; i&lt;controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+  rAF(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (!(gamepads[i].index in controllers)) {
+        addgamepad(gamepads[i]);
+      } else {
+        controllers[gamepads[i].index] = gamepads[i];
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+if (!haveEvents) {
+  setInterval(scangamepads, 500);
+}</pre>
+<h2 id="Specifications">Specifications</h2>
+<p>{{page("/en-US/docs/Gamepad","Specifications")}}</p>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{page("/en-US/docs/Gamepad","Browser_compatibility")}}</p>
+<p> </p>
+<p> </p>
+<p> </p>
diff --git a/files/fr/web/api/element/onwheel/index.html b/files/fr/web/api/globaleventhandlers/onwheel/index.html
index 837fda2ba2..837fda2ba2 100644
--- a/files/fr/web/api/element/onwheel/index.html
+++ b/files/fr/web/api/globaleventhandlers/onwheel/index.html
diff --git a/files/fr/web/api/history_api/example/index.html b/files/fr/web/api/history_api/example/index.html
new file mode 100644
index 0000000000..f19782d753
--- /dev/null
+++ b/files/fr/web/api/history_api/example/index.html
@@ -0,0 +1,392 @@
+---
+title: Exemple de navigation en Ajax
+slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
+translation_of: Web/API/History_API/Example
+---
+<p>Voici un exemple de site web AJAX composé uniquement de trois pages (<em>page_un.php</em>, <em>page_deux.php</em> et <em>page_trois.php</em>). Pour tester cet exemple, merci de créer les fichiers suivants :</p>
+<p><strong>page_un.php</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: php">&lt;?php
+    $page_title = "Page un";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+<p><strong>page_deux.php</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: php">&lt;?php
+    $page_title = "Page deux";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+<p><strong>page_trois.php</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: php">&lt;?php
+    $page_title = "Page trois";
+    $page_content = "&lt;p&gt;Ceci est le contenu de la &lt;strong&gt;page_trois.php&lt;/strong&gt;. Ce contenu est stocké dans une variable PHP.&lt;/p&gt;";
+
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; $page_content));
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php echo $page_content; ?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+<p><strong>css/style.css</strong>:</p>
+<pre class="brush: css">#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader &gt; div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+</pre>
+<p><strong>include/after_content.php</strong>:</p>
+<pre class="brush: php">&lt;p&gt;Ceci est le pied-de-page. Il est commun à toutes les pages ajax.&lt;/p&gt;
+</pre>
+<p><strong>include/before_content.php</strong>:</p>
+<pre class="brush: php">&lt;p&gt;
+[ &lt;a class="ajax-nav" href="page_un.php"&gt;Premier exemple&lt;/a&gt;
+| &lt;a class="ajax-nav" href="page_deux.php"&gt;Second exemple&lt;/a&gt;
+| &lt;a class="ajax-nav" href="page_trois.php"&gt;Troisième exemple&lt;/a&gt;
+| &lt;a class="ajax-nav" href="inexistante.php"&gt;Page inexistante&lt;/a&gt; ]
+&lt;/p&gt;
+
+</pre>
+<p><strong>include/header.php</strong>:</p>
+<pre class="brush: php">&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;script type="text/javascript" src="js/ajax_nav.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="css/style.css" /&gt;
+</pre>
+<p><strong>js/ajax_nav.js</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: js">"use strict";
+
+var ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode &amp;&amp; document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&amp;").replace(rView, sViewMode ? "&amp;" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx &lt; nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&amp;*/, rView = new RegExp("&amp;" + sViewKey + "\\=[^&amp;]*|&amp;*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+</pre>
+</div>
+<div class="note" id="const_compatibility">
+  <strong>Note:</strong> <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (instruction de constante) <strong>ne fait pas partie de ECMAScript 5</strong>. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. <strong>Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a>, les constantes déclarées avec <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> seront limitées en portée. <strong>Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à </strong><strong><a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> par des instructions <a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a>.</strong></div>
+<p>Pour plus d'informations, voyez : <a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a>.</p>
+<h2 id="Lire_également">Lire également</h2>
+<ul>
+  <li>{{ domxref("window.history") }}</li>
+  <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/fr/web/api/history_api/index.html b/files/fr/web/api/history_api/index.html
new file mode 100644
index 0000000000..5e199dd521
--- /dev/null
+++ b/files/fr/web/api/history_api/index.html
@@ -0,0 +1,245 @@
+---
+title: Manipuler l'historique du navigateur
+slug: Web/Guide/DOM/Manipuler_historique_du_navigateur
+tags:
+  - API
+  - DOM
+  - Historique
+translation_of: Web/API/History_API
+---
+<p>L'objet DOM {{ domxref("window") }} fournit un accès à l'historique du navigateur via l'objet {{ domxref("window.history", "history") }}. Il expose un ensemble de méthodes et de propriétés qui permettent d'avancer et de reculer dans l'historique de l'utilisateur ainsi que -- à partir d'HTML5 -- manipuler le contenu de l'ensemble de l'historique.</p>
+
+<h2 id="Se_déplacer_dans_l'historique">Se déplacer dans l'historique</h2>
+
+<p>Avancer ou reculer dans l'historique de l'utilisateur est possible en utilisant les méthodes <code>back()</code>, <code>forward()</code> et <code>go()</code>.</p>
+
+<h3 id="Avancer_et_reculer">Avancer et reculer</h3>
+
+<p>Pour reculer dans l'historique, il vous suffit de faire :</p>
+
+<pre class="brush: js">window.history.back();
+</pre>
+
+<p>Cela agira exactement comme si l'utilisateur cliquait sur le bouton Retour de la barre d'outils de son navigateur.</p>
+
+<p>De la même manière, il est possible d'avancer (comme si l'utilisateur cliquait sur le bouton Avancer) :</p>
+
+<pre class="brush: js">window.history.forward();
+</pre>
+
+<h3 id="Se_déplacer_à_un_élément_précis_de_l'historique">Se déplacer à un élément précis de l'historique</h3>
+
+<p>Vous pouvez utiliser la méthode <code>go()</code> pour charger une page spécifique de l'historique de la session, identifiée par sa position relative par rapport à la page en cours (la page courante étant, évidemment, d'index 0).</p>
+
+<p>Pour reculer d'une page (l'équivalent d'un appel à <code>back()</code>):</p>
+
+<pre class="brush: js"><code>window.history.go(-1);</code>
+</pre>
+
+<p>Pour avancer d'une page, comme en appelant <code>forward()</code>:</p>
+
+<pre class="brush: js"><code>window.history.go(1);</code>
+</pre>
+
+<p>De la même manière, vous pouvez avancer de 2 pages en passant la valeur 2, et ainsi de suite.</p>
+
+<p>Vous pouvez déterminer le nombre de pages de l'historique en accédant à la valeur de la propriété length (<em>longeur</em>) :</p>
+
+<pre class="brush: js">var numberOfEntries = window.history.length;
+</pre>
+
+<div class="note"><strong>Note:</strong> Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode <code>go()</code>; ce comportement est non standard et non supporté par Gecko.</div>
+
+<h2 id="Ajouter_et_modifier_des_entrées_de_l'historique">Ajouter et modifier des entrées de l'historique</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>HTML5 a introduit les méthodes <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()">history.pushState()</a> et <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()">history.replaceState()</a>, qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a>.</p>
+
+<p>L'utilisation de <code>history.pushState()</code> change le référent créé habituellement dans l'en-tête HTTP pour les objets <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est <code>this</code> au moment de la création de l'objet <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p>
+
+<h3 id="Exemple_de_la_méthode_pushState()"><a id="Exemple de la méthode pushState()" name="Exemple de la méthode pushState()"></a>Exemple de la méthode pushState()</h3>
+
+<p>Supposons que <span class="nowiki">http://mozilla.org/foo.html</span> exécute la séquence JavaScript suivante :</p>
+
+<pre class="brush: js">var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+</pre>
+
+<p>Cela va provoquer l'apparition dans la barre de navigation de <span class="nowiki">http://mozilla.org/bar.html</span>, mais ne provoquera pas le chargement effectif de <code>bar.html</code> ni même le test d'existence de <code>bar.html</code>.</p>
+
+<p>Supposons à présent que l'utilisateur accède à la page <span class="nowiki">http://google.com</span>, puis clique sur l'icône "Recul". La barre de navigation va alors afficher <span class="nowiki">http://mozilla.org/bar.html</span>, et si vous lisez l'<code>history.state</code>, vous obtiendrez le <code>stateObj</code>.  L'événement <code>popstate</code> ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à <code>bar.html</code>.</p>
+
+<p>Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en <span class="nowiki">http://mozilla.org/foo.html</span> et le document va recevoir un autre événement <code>popstate</code>, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement <code>popstate</code>.</p>
+
+<h3 id="La_méthode_pushState()">La méthode pushState()</h3>
+
+<p><code>La méthode pushState()</code> utilise trois paramètres : un objet état, un titre (qui est pour l'instant ignoré) et, éventuellement, une URL. Examinons chacun de ces paramètres en détail :</p>
+
+<ul>
+ <li>
+  <p><strong>state object</strong> (<em><strong>objet état</strong></em>) — L'objet état est un objet JavaScript qui est associé à une nouvelle entrée de l'historique par <code>pushState()</code>. Chaque fois qu'un utilisateur ouvre une nouvelle page, un événement <code>popstate</code> est émis et la propriété <code>state</code> de l'événement contient une copie de l'objet état de ce nouvel élément de l'historique.<br>
+   L'objet état peut être tout ce qui peut être sous forme de liste. Puisque Firefox sauvegarde les objets état sur le disque de l'utilisateur de façon à ce qu'ils puissent être rétablis après redémarrage du navigateur, le codage de l'objet état est limité à une taille de 640k octets. Si vous donnez à <code>pushState()</code> un objet état dont la représentation a une taille plus importante, la méthode génèrera une exception. Si vous avez un besoin d'espace plus important, il est conseillé d'utiliser <code>sessionStorage</code> et/ou <code>localStorage</code>.</p>
+ </li>
+ <li>
+  <p><strong>title</strong> (<strong><em>titre</em>)</strong> — Firefox, pour l'instant, ignore ce paramètre, bien qu'il puisse être utilisé plus tard. Afin de prévenir les changements futurs de cette méthode, il serait prudent de fournir ici, en paramètre, une chaîne vide. Vous pourriez aussi donner un titre court à l'état vers lequel vous vous dirigez.</p>
+ </li>
+ <li>
+  <p><strong>URL</strong> — L'URL de la nouvelle entrée de l'historique est donnée par ce paramètre. Il convient de préciser que le navigateur n'essaiera pas de charger la page pointée par cette URL après un appel à <code>pushState()</code>, mais il se peut qu'il tente de le faire plus tard, par exemple, lorsque l'utilisateur relancera son navigateur. Il n'est pas nécessaire que la nouvelle URL soit absolue ; si elle est relative, ce sera par rapport à l'URL courante. La nouvelle URL doit avoir la même origine (domaine) que l'URL courante ; dans le cas contraire, <code>pushState()</code> génèrera une exception. Ce paramètre est optionnel ; s'il n'est pas spécifié, sa valeur par défaut est l'URL de la page courante.</p>
+ </li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</div>
+
+<p>On peut assimiler l'appel à <code>pushState()</code> à l'affectation <code>window.location = "#foo"</code>, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais <code>pushState()</code> a quelques avantages :</p>
+
+<ul>
+ <li>La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter <code>window.location</code> vous maintient  au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash.</li>
+ <li>Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter <code>window.location = "#foo";</code> crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas <code>#foo</code>.</li>
+ <li>Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte.</li>
+</ul>
+
+<p>Notez que <code>pushState()</code> n'entraîne jamais le déclenchement d'un événement <code>hashchange</code>, même si la nouvelle URL diffère de l'ancienne seulement par son hash.</p>
+
+<p>Dans un document <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL">XUL</a> elle crée l'élément XUL spécifié.</p>
+
+<p>Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom <code>null</code>. </p>
+
+<h3 id="La_méthode_replaceState()">La méthode replaceState()</h3>
+
+<p><code>history.replaceState()</code> fonctionne exactement comme <code>history.pushState()</code> hormis le fait que <code>replaceState()</code> modifie l'entrée courante de l'historique au lieu d'en créer une nouvelle. À noter que ceci n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.</p>
+
+<p><code>replaceState()</code> est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.</p>
+
+<div class="note"><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</div>
+
+<h3 id="Exemple_de_la_méthode_replaceState()">Exemple de la méthode replaceState()</h3>
+
+<p><span id="result_box" lang="fr"><span>Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> <span class="string token">"bar"</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">"page 2"</span><span class="punctuation token">,</span> <span class="string token">"bar.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>L'explication des deux lignes ci-dessus peut être trouvée dans la section "<a href="#">Exemple de la méthode pushState()</a>". Supposons ensuite que http://mozilla.org/bar.html exécute le code JavaScript suivant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">"page 3"</span><span class="punctuation token">,</span> <span class="string token">"bar2.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cela entraînera l'affichage de la barre d'URL http://mozilla.org/bar2.html, mais le navigateur ne chargera pas <code>bar2.html</code> ou même vérifiera que <code>bar2.html</code> existe.</p>
+
+<p>Supposons maintenant que l'utilisateur accède à http://www.microsoft.com, puis clique sur le bouton Précédent. À ce stade, la barre d'URL affichera http://mozilla.org/bar2.html. Si l'utilisateur clique à nouveau sur Retour, la barre d'URL affichera http://mozilla.org/foo.html et contournera totalement bar.html.</p>
+
+<h3 id="L'événement_popstate">L'événement popstate</h3>
+
+<p>Un événement <code>popstate</code> est envoyé à la fenêtre chaque fois que l'entrée active de l'historique change. Si l'entrée de l'historique activée a été créée par un appel à <code>replaceState</code>, la propriété <code>state </code>de l'événement <code>popstate</code> contient une copie de l'objet état  de l'entrée de l'historique.</p>
+
+<p>Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation.</p>
+
+<h3 id="Lire_l'état_courant">Lire l'état courant</h3>
+
+<p>Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  <code>pushState()</code> ou <code>replaceState()</code>) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> , mais pas l'événement <span style="font-family: courier new;">popstate</span>.</span>  Néanmoins, si vous lisez la propriété <span style="font-family: courier new;">history.state</span>, vous récupèrerez l'objet état que vous auriez obtenu si un événement <span style="font-family: courier new;">popstate</span> avait été déclenché.</p>
+
+<p>Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement <code>popstate</code> en utilisant la propriété <code>history.state</code> comme ceci :</p>
+
+<pre class="brush: js">var currentState = history.state;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour un exemple comple de site web AJAX, vous pouvez voir : <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>5</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>18</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Vous pouvez utiliser <a class="link-https" href="https://github.com/browserstate/history.js" title="https://github.com/balupton/history.js">History.js</a> pour contourner les <a class="link-https" href="https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API" title="https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API">problèmes</a> de compatibilité entre navigateurs.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html
index 0ddaad6583..0ddaad6583 100644
--- a/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html
+++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html
diff --git a/files/fr/web/api/api_html_drag_and_drop/index.html b/files/fr/web/api/html_drag_and_drop_api/index.html
index fd73e301f8..fd73e301f8 100644
--- a/files/fr/web/api/api_html_drag_and_drop/index.html
+++ b/files/fr/web/api/html_drag_and_drop_api/index.html
diff --git a/files/fr/web/api/element/accesskey/index.html b/files/fr/web/api/htmlelement/accesskey/index.html
index 2d84dd6dae..2d84dd6dae 100644
--- a/files/fr/web/api/element/accesskey/index.html
+++ b/files/fr/web/api/htmlelement/accesskey/index.html
diff --git a/files/fr/web/api/htmlelement/animationend_event/index.html b/files/fr/web/api/htmlelement/animationend_event/index.html
new file mode 100644
index 0000000000..1fdeba6e63
--- /dev/null
+++ b/files/fr/web/api/htmlelement/animationend_event/index.html
@@ -0,0 +1,81 @@
+---
+title: animationend
+slug: Web/Events/animationend
+translation_of: Web/API/HTMLElement/animationend_event
+---
+<p>L'événement <code><strong>animationend</strong> est déclenché quand une animation CSS est terminée.</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element, Window</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html
new file mode 100644
index 0000000000..df8e3d89be
--- /dev/null
+++ b/files/fr/web/api/htmlelement/animationiteration_event/index.html
@@ -0,0 +1,83 @@
+---
+title: animationiteration
+slug: Web/Events/animationiteration
+translation_of: Web/API/HTMLElement/animationiteration_event
+---
+<p>L'événement<strong> </strong><code><strong> animationiteration</strong> est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec <em>animation-iteration-count</em> valant 1.</code></p>
+
+<h2 id="informations_générales">informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Synchronisme</dt>
+ <dd style="margin: 0 0 0 120px;">synchronous</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html
new file mode 100644
index 0000000000..407bcb6dea
--- /dev/null
+++ b/files/fr/web/api/htmlelement/animationstart_event/index.html
@@ -0,0 +1,81 @@
+---
+title: animationstart
+slug: Web/Events/animationstart
+translation_of: Web/API/HTMLElement/animationstart_event
+---
+<p>L'événement <strong><code>animationstart </code></strong><code>est déclenché quand une animation CSS a commencé. Si <em>animation-delay</em> est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un </code><em>elapsedTime </em>équivalent à la valeur absolue du délai.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/api/node/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html
index 6b9d530411..6b9d530411 100644
--- a/files/fr/web/api/node/innertext/index.html
+++ b/files/fr/web/api/htmlelement/innertext/index.html
diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html
new file mode 100644
index 0000000000..0c45cd871c
--- /dev/null
+++ b/files/fr/web/api/htmlelement/transitionend_event/index.html
@@ -0,0 +1,192 @@
+---
+title: transitionend
+slug: Web/Events/transitionend
+tags:
+  - DOM
+  - Event
+  - TransitionEvent
+  - Transitions CSS
+  - Transitions CSS3
+  - transitionend
+translation_of: Web/API/HTMLElement/transitionend_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>transitionend</code></strong> est déclenché lorsqu'une <a href="/en-US/docs/CSS/Using_CSS_transitions">transition CSS</a> est terminée. <span class="tlid-translation translation" lang="fr"><span title="">Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur</span></span> <code>none</code>, alors l'événement ne pourra pas être généré.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'événement <code>transitionend</code> est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement <code>transitioncancel</code> est déclenché, l'événement <code>transitionend</code> ne se déclenchera pas.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriétés</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>propertyName</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name of the CSS property associated with the transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{readonlyInline}}</td>
+   <td>Float</td>
+   <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code gets an element that has a transition defined and adds a listener to the <code>transitionend</code> event:</p>
+
+<pre class="brush: js notranslate">const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitionend', () =&gt; {
+  console.log('Transition ended');
+});</pre>
+
+<p>The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:</p>
+
+<pre class="brush: js notranslate">const transition = document.querySelector('.transition');
+
+transition.ontransitionend = () =&gt; {
+  console.log('Transition ended');
+};</pre>
+
+<h3 id="Live_example">Live example</h3>
+
+<p>In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:</p>
+
+<pre class="brush: html notranslate">&lt;div class="transition"&gt;Hover over me&lt;/div&gt;
+&lt;div class="message"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}</pre>
+
+<p>To this, we'll add some JavaScript to indicate that the <code><a href="/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code> and <code>transitionend</code> events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.</p>
+
+<pre class="brush: js notranslate">const message = document.querySelector('.message');
+const el = document.querySelector('.transition');
+
+el.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+el.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+el.addEventListener('transitioncancel', function() {
+  message.textContent = 'transitioncancel fired';
+});
+
+el.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p>
+
+<p>The <code>transitionend</code> event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.</p>
+
+<p>If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.</p>
+
+<p>If the <code>transitioncancel</code> event is fired, the <code>transitionend</code> event will not fire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.HTMLElement.transitionend_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}</li>
+ <li>L'interface {{domxref("TransitionEvent")}}</li>
+ <li>Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}</li>
+ <li>Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/submit_event_/index.html b/files/fr/web/api/htmlformelement/submit_event/index.html
index 135058c596..135058c596 100644
--- a/files/fr/web/api/htmlformelement/submit_event_/index.html
+++ b/files/fr/web/api/htmlformelement/submit_event/index.html
diff --git a/files/fr/web/api/urlutils/index.html b/files/fr/web/api/htmlhyperlinkelementutils/index.html
index 7bbe88b470..7bbe88b470 100644
--- a/files/fr/web/api/urlutils/index.html
+++ b/files/fr/web/api/htmlhyperlinkelementutils/index.html
diff --git a/files/fr/web/api/element.blur/index.html b/files/fr/web/api/htmlorforeignelement/blur/index.html
index 6c5f12166c..6c5f12166c 100644
--- a/files/fr/web/api/element.blur/index.html
+++ b/files/fr/web/api/htmlorforeignelement/blur/index.html
diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlorforeignelement/dataset/index.html
index fa7ece8acc..fa7ece8acc 100644
--- a/files/fr/web/api/htmlelement/dataset/index.html
+++ b/files/fr/web/api/htmlorforeignelement/dataset/index.html
diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlorforeignelement/focus/index.html
index 3659a5a75b..3659a5a75b 100644
--- a/files/fr/web/api/htmlelement/focus/index.html
+++ b/files/fr/web/api/htmlorforeignelement/focus/index.html
diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlorforeignelement/tabindex/index.html
index b2dd8ca956..b2dd8ca956 100644
--- a/files/fr/web/api/htmlelement/tabindex/index.html
+++ b/files/fr/web/api/htmlorforeignelement/tabindex/index.html
diff --git a/files/fr/web/api/idbrequest/blocked_event/index.html b/files/fr/web/api/idbopendbrequest/blocked_event/index.html
index e3fdfdfb83..e3fdfdfb83 100644
--- a/files/fr/web/api/idbrequest/blocked_event/index.html
+++ b/files/fr/web/api/idbopendbrequest/blocked_event/index.html
diff --git a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html b/files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
index cb05bef3fe..cb05bef3fe 100644
--- a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html
+++ b/files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
diff --git a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html
index bfa95657cc..bfa95657cc 100644
--- a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html
+++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html
diff --git a/files/fr/web/api/api_indexeddb/index.html b/files/fr/web/api/indexeddb_api/index.html
index 682043df0e..682043df0e 100644
--- a/files/fr/web/api/api_indexeddb/index.html
+++ b/files/fr/web/api/indexeddb_api/index.html
diff --git a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html
index a8df123888..a8df123888 100644
--- a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html
+++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html
diff --git a/files/fr/web/api/media_streams_api/index.html b/files/fr/web/api/media_streams_api/index.html
new file mode 100644
index 0000000000..6722bc8885
--- /dev/null
+++ b/files/fr/web/api/media_streams_api/index.html
@@ -0,0 +1,85 @@
+---
+title: API MediaStream
+slug: WebRTC/MediaStream_API
+tags:
+  - API
+  - Audio
+  - Media
+  - Overview
+translation_of: Web/API/Media_Streams_API
+---
+<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>
+
+<p>L'<strong>API Processing MediaStream</strong>, souvent appelée <em>Media Stream API</em> ou <em>Stream API</em>, est la partie de <a href="/fr/docs/WebRTC">WebRTC</a> décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.</p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans <a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">cette vidéo</a>.</p>
+
+<p>Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes <strong>pistes</strong> audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs <strong>canal</strong>. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en <em>gauche</em> et <em>droite</em> sur une piste audio en stéréo.</p>
+
+<p><code><font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif">Les objets </font></code> {{domxref("MediaStream")}} ont une seule <strong>entrée </strong>et une seule <strong>sortie</strong>. Un objet {{domxref("MediaStream")}} généré par <a href="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a> est dit <em>local</em>, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a>, ou un flux créé en utilisant l'API <a href="/en-US/docs/Web_Audio_API">Web Audio</a> {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un <strong>consommateur</strong>. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a> ou l'<a href="/en-US/docs/Web_Audio_API">API Web Audio</a> {{domxref("MediaStreamAudioDestinationNode")}}.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API <em>Media Capture and Streams API</em>.</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li>
+ <li>{{domxref("InputDeviceInfo")}}</li>
+ <li>{{domxref("MediaDeviceKind")}}</li>
+ <li>{{domxref("MediaDeviceInfo")}}</li>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MediaStreamTrackEvent")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackSettings")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("NavigatorUserMedia")}}</li>
+ <li>{{domxref("NavigatorUserMediaError")}}</li>
+ <li>{{domxref("OverconstrainedError")}}</li>
+ <li>{{domxref("URL")}}</li>
+</ul>
+</div>
+
+<p>Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées <code>AudioStreamTrack</code> et <code>VideoStreamTrack</code>, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser <code>MediaStreamTrack</code> directement à la place.</p>
+
+<h2 id="Évènements">Évènements</h2>
+
+<div class="index">
+<ul>
+ <li>{{event("addtrack")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("muted")}}</li>
+ <li>{{event("overconstrained")}}</li>
+ <li>{{event("removetrack")}}</li>
+ <li>{{event("started")}}</li>
+ <li>{{event("unmuted")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides_et_tutorials">Guides et tutorials</h2>
+
+<p>Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.MediaStream")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> - la page d'introduction à l'API</li>
+ <li>{{domxref("mediaDevices.getUserMedia()")}}</li>
+ <li><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Prendre des clichés avec WebRTC</a> : un tutoriel/une démonstration sur l'utilisation de <code>getUserMedia()</code>.</li>
+</ul>
diff --git a/files/fr/web/api/namelist/index.html b/files/fr/web/api/namelist/index.html
deleted file mode 100644
index 9003767ee3..0000000000
--- a/files/fr/web/api/namelist/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: NameList
-slug: Web/API/NameList
-tags:
-  - API
-  - DOM
-  - Obsolete
-translation_of: Web/API/NameList
----
-<div>{{APIRef("DOM")}} {{ obsolete_header("10.0") }}</div>
-
-<div class="note">
-<p><strong>Note:</strong> Bien que cette interface ait été précédemment implémentée dans Gecko, il n'y avait aucun moyen d'en créer une. <code>NameList</code> a été supprimé, en vigueur avec {{ Gecko("10.0") }}</p>
-</div>
-
-<p>L'interface <code><strong>NameList</strong></code> fournit une abstraction pour une collection ordonnée de paires de valeurs de nom et d'espace de noms. Les éléments sont accessibles par un index basé sur 0. La spécification DOM ne spécifie pas comment la collection doit être implémentée.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("NameList.length")}} {{readonlyInline}}</dt>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("NameList.contains()")}}</dt>
- <dd>Renvoie un {{jsxref("Boolean")}}.</dd>
- <dt>{{domxref("NameList.containsNS()")}}</dt>
- <dd>Renvoie un {{jsxref("Boolean")}}.</dd>
- <dt>{{domxref("NameList.getName()")}}</dt>
- <dd>Renvoie un {{domxref("DOMString")}}.</dd>
- <dt>{{domxref("NameList.getNamespaceURI()")}}</dt>
- <dd>Renvoie un {{domxref("DOMString")}}.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/api/navigator/getusermedia/index.html b/files/fr/web/api/navigator/getusermedia/index.html
new file mode 100644
index 0000000000..44921a5d48
--- /dev/null
+++ b/files/fr/web/api/navigator/getusermedia/index.html
@@ -0,0 +1,194 @@
+---
+title: NavigatorUserMedia.getUserMedia()
+slug: NavigatorUserMedia.getUserMedia
+tags:
+  - API
+  - Deprecated
+  - Media
+  - WebRTC
+  - getusermedia
+translation_of: Web/API/Navigator/getUserMedia
+---
+<div>{{APIRef("Media Capture and Streams")}}{{deprecated_header}}</div>
+
+<p>La fonction obsolète <strong>Navigator.getUserMedia()</strong> demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.</p>
+
+<p>Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur <span>quelconque</span> se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.</p>
+
+<div class="note">
+<p>Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.getUserMedia(constraints, successCallback, errorCallback);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>constraints</dt>
+ <dd>Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section <a href="/fr/docs/Web/API/MediaDevices/getUserMedia#Syntaxe">constraints</a> de la méthode {{domxref("MediaDevices.getUserMedia()")}}, ainsi que l'article <a href="/fr/docs/Web/API/Media_Streams_API/Constraints">Capacités, constraintes, et configurations</a>.</dd>
+ <dt>successCallback</dt>
+ <dd>Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet {{domxref("MediaStream")}} qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), comme dans l'exemple suivant:
+ <pre class="brush: js">function(stream) {
+   var video = document.querySelector('video');
+   video.src = window.URL.createObjectURL(stream);
+   video.onloadedmetadata = function(e) {
+      // Do something with the video here.
+   };
+}
+</pre>
+ </dd>
+ <dt>errorCallback</dt>
+ <dd>Lorsque l'appel échoue, la fonction spécifiée dans <code>errorCallback</code> est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{domxref("undefined")}}.</p>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<p>{{page("/fr/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}</p>
+
+<h2 id="Exemples"><strong>Exemples</strong></h2>
+
+<h3 id="Largeur_et_hauteur">Largeur et hauteur</h3>
+
+<p>Voici un exemple de l'utilisation de <code>getUserMedia()</code>, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les <a href="/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate">exemples</a> sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes.</p>
+
+<pre class="brush: js">navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+
+if (navigator.getUserMedia) {
+   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
+      function(stream) {
+         var video = document.querySelector('video');
+         video.src = window.URL.createObjectURL(stream);
+         video.onloadedmetadata = function(e) {
+           video.play();
+         };
+      },
+      function(err) {
+         console.log("The following error occurred: " + err.name);
+      }
+   );
+} else {
+   console.log("getUserMedia not supported");
+}</pre>
+
+<h2 id="Permissions">Permissions</h2>
+
+<p>Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest.</p>
+
+<pre class="brush: js">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}
+</pre>
+
+<p id="errorCallback">See <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> for more information.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="warning">
+<p>New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.</p>
+</div>
+
+<div>
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>21{{property_prefix("webkit")}} [1]</td>
+   <td>17{{property_prefix("moz")}} [3]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12 [2]<br>
+    18{{property_prefix("webkit")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic Support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(40.0)}}{{property_prefix("webkit")}} [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>24{{property_prefix("moz")}} [3]</td>
+   <td>1.2{{property_prefix("moz")}} [4]<br>
+    1.4{{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les versions suivantes de Chrome supportent {{domxref("MediaDevices.getUserMedia()")}} sans préfixe qui remplace cette méthode dépréciée.</p>
+
+<p>[2] Chrome et Opera utilisent toujours une ancienne syntaxe de contraintes mais la syntaxe décrite ici est disponible via le polyfill <a href="https://github.com/webrtc/adapter">adapter.js</a>.</p>
+
+<p>[3] La syntaxe de la contrainte décrite ici est disponible depuis Firefox 38. Les versions précédentes utilisent une ancienne syntaxe de contraintes, mais la syntaxe décrite ici est disponible via le polyfill <a href="https://github.com/webrtc/adapter">adapter.js</a>.</p>
+
+<p>[4] Dans Firefox OS 1.2 seul <code>audio</code> était supporté, 1.4 ajoute le support de <code>video</code>.</p>
+
+<p>Pour le moment, utiliser WebRTC pour accéder à la caméra est supporté par Chrome, Opera, et Firefox 20.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC</a> - page d'introduction aux APIS</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - L'API des Media Streams Objects</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutoriel à propos de l'utilisation de  <code>getUserMedia()</code> pour prendre des photos plutôt que des vidéos.</li>
+</ul>
diff --git a/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html b/files/fr/web/api/navigatoronline/online_and_offline_events/index.html
index 4ba6a2d717..4ba6a2d717 100644
--- a/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html
+++ b/files/fr/web/api/navigatoronline/online_and_offline_events/index.html
diff --git a/files/fr/web/api/network_information_api/index.html b/files/fr/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..076718cbcc
--- /dev/null
+++ b/files/fr/web/api/network_information_api/index.html
@@ -0,0 +1,89 @@
+---
+title: Network Information API
+slug: WebAPI/Network_Information
+tags:
+  - WebAPI
+translation_of: Web/API/Network_Information_API
+---
+<p>{{ SeeCompatTable() }}</p>
+
+<p>L'API Network Information (Informations réseau) fournit des informations sur la connexion de l'appareil : la bande-passante, si la connexion est mesurée ou non. Elle peut être utilisée pour choisir entre du contenu en haute définition ou en basse définition selon la connexion de l'utilisateur. L'API ne représente qu'un seul objet, ajouté au DOM : {{domxref("window.navigator.connection")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Détecter_les_changements_de_connexion">Détecter les changements de connexion</h3>
+
+<p>Cet exemple permet de connaître les changements liés à la connexion d'un utilisateur. Cela ressemble notamment à la façon dont une application saura si l'utilisateur passe d'une connexion coûteuse à une autre connexion moins chère et pourra réduire la demande de bande passante afin de réduire les coûts pour l'utilisateur.</p>
+
+<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Bande passante de la connexion : " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("La connexion est mesurée !");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+</pre>
+
+<h3 id="Préchargement_de_ressources_gourmandes">Préchargement de ressources gourmandes</h3>
+
+<p>L'objet connexion est pratique pour décider de précharger des ressources nécessitant une grosse quantité de bande passante ou de mémoire. Cet exemple devra être appelé après que la page ait été chargé. Il détermine si précharger la vidéo est judicieux selon le type de la connexion. Si une connexion cellulaire est trouvée, alors <code>preloadVideo</code> est réglé à faux. Ici pour faire simple, on ne teste qu'un type de connexion; dans un cas réel on aurait plutôt utilisé une structure de contrôle switch ou une autre méthode pour avoir tout les cas possibles de {{domxref("NetworkInformation.type")}}. Malgré la valeur <code>type</code>, on peut avoir une estimation de la vitesse de la connexion à travers la propriété {{domxref("NetworkInformation.effectiveType")}}<strong>.</strong></p>
+
+<pre class="brush: js">let preloadVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'cellular') {
+    preloadVideo = false;
+  }
+}</pre>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("NetworkInformation")}}</dt>
+ <dd>Fournit des informations sur la connexion de l'appareil et fournit la possibilité aux scriptes d'être informé en cas de changement. L'interface <code>NetworkInformation</code> ne peut pas être instanciée; à la place on y accède à travers l'interface {{domxref("Navigator")}}.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Network Information', '', 'Network Information API')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="NetworkInformation"><code>NetworkInformation</code></h3>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h3 id="Navigator.connection"><code>Navigator.connection</code></h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Navigator.connection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Spécification de l'API Network Information", "ED")}}</li>
+ <li><a href="/fr/docs/Online_and_offline_events">Les évènement online et offline</a></li>
+ <li>{{domxref("window.navigator.connection")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/baseuriobject/index.html b/files/fr/web/api/node/baseuriobject/index.html
deleted file mode 100644
index 617ed79d8e..0000000000
--- a/files/fr/web/api/node/baseuriobject/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Node.baseURIObject
-slug: Web/API/Node/baseURIObject
-tags:
-  - API
-  - DOM
-  - Noeuds
-  - Propriétés
-  - URI
-  - URL
-translation_of: Web/API/Node
-translation_of_original: Web/API/Node/baseURIObject
----
-<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
-
-<p>La propriété <code><strong>Node.baseURIObject</strong></code> renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (<em>chaîne de caractères</em>).</p>
-
-<p>Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.</p>
-
-<p>Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.</p>
-
-<h2 id="Syntax" name="Syntax">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject
-</pre>
-
-<h2 id="Notes" name="Notes">Notes</h2>
-
-<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.</p>
-
-<h2 id="Specification" name="Specification">Spécification</h2>
-
-<p>N'existe dans aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Node.baseURIObject")}}</p>
diff --git a/files/fr/web/api/node/nodeprincipal/index.html b/files/fr/web/api/node/nodeprincipal/index.html
deleted file mode 100644
index 33144eae42..0000000000
--- a/files/fr/web/api/node/nodeprincipal/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Node.nodePrincipal
-slug: Web/API/Node/nodePrincipal
-tags:
-  - API
-  - DOM
-  - Noeuds
-  - Principal
-  - Propriétés
-translation_of: Web/API/Node
-translation_of_original: Web/API/Node/nodePrincipal
----
-<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
-
-<p>La propriété en lecture seule <code><strong>Node.nodePrincipal</strong></code> renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.</p>
-
-<p>{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}</p>
-
-<h2 id="Syntax" name="Syntax">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>principalObj</em> = <em>Node</em>.nodePrincipal
-</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>Un objet <code>nsIPrincipal</code> représentant le contexte de sécurité du noeud.</p>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.</p>
-
-<h2 id="Specification" name="Specification">Spécifications</h2>
-
-<p>N'existe dans aucune spécification. C'est une propriété propre à Firefox.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Node.nodePrincipal")}}</p>
diff --git a/files/fr/web/api/node/rootnode/index.html b/files/fr/web/api/node/rootnode/index.html
deleted file mode 100644
index 7ee512dd8f..0000000000
--- a/files/fr/web/api/node/rootnode/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Node.rootNode
-slug: Web/API/Node/rootNode
-tags:
-  - API
-  - Arborescence
-  - DOM
-  - Noeuds
-  - Propriétés
-  - Racine
-translation_of: Web/API/Node/getRootNode
-translation_of_original: Web/API/Node/rootNode
----
-<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p>
-
-<p>La propriété en lecture seule <code><strong>Node.rootNode</strong></code> renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.</p>
-
-<div class="warning">
-<p><strong>Important </strong>: Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">Syntaxe</h2>
-
-<pre><var>rootNode</var> = <em>node</em>.rootNode;
-</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.</p>
-
-<h2 id="Example" name="Example">Exemple</h2>
-
-<p>L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :</p>
-
-<pre class="brush: js">console.log(document.body.rootNode);</pre>
-
-<h2 id="Notes" name="Notes">Notes</h2>
-
-<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
-    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou
-    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
-    que l'auteur comptait obtenir.</p>
-
-    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
-    et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
-    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Node.rootNode")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/api/notification/using_web_notifications/index.html b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
index 796e7d152a..796e7d152a 100644
--- a/files/fr/web/api/notification/using_web_notifications/index.html
+++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.html b/files/fr/web/api/offlineaudiocontext/complete_event/index.html
new file mode 100644
index 0000000000..5e3b264f1c
--- /dev/null
+++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.html
@@ -0,0 +1,91 @@
+---
+title: complete
+slug: Web/Events/complete
+translation_of: Web/API/OfflineAudioContext/complete_event
+---
+<div>
+<p>L'événement <strong>complete</strong> est déclenché lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.</p>
+</div>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("OfflineAudioCompletionEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("OfflineAudioContext")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>renderedBuffer</code> {{readonlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>The buffer containing the result of the processing of an {{domxref("OfflineAudioContext")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API" title="/en-US/docs/CSS/Using_CSS_animations">Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html
index 707b3e5eb3..707b3e5eb3 100644
--- a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html
+++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html
diff --git a/files/fr/web/api/pointer_lock_api/index.html b/files/fr/web/api/pointer_lock_api/index.html
new file mode 100644
index 0000000000..e3d6ea14f3
--- /dev/null
+++ b/files/fr/web/api/pointer_lock_api/index.html
@@ -0,0 +1,319 @@
+---
+title: Pointer Lock API
+slug: WebAPI/Pointer_Lock
+tags:
+  - API
+  - Avancé
+  - Jeux
+  - Reference
+  - mouse lock
+  - pointer lock
+translation_of: Web/API/Pointer_Lock_API
+---
+<div>{{DefaultAPISidebar("Pointer Lock API")}}</div>
+
+<p><strong>Pointer lock</strong> (en français <em>Verrouillage du pointeur</em>, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue.<br>
+ <br>
+ Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions.<br>
+ <br>
+ Comme Pointer lock continue de déclencher des évènements même quand le curseur est en dehors des limites du navigateur ou de l'écran, les joueurs peuvent cliquer sur les boutons et déplacer le curseur de la souris sans se soucier de quitter la zone de jeu et de cliquer accidentellement sur une autre application qui changerait le focus de la souris en dehors du jeu.</p>
+
+<h2 id="basics" name="basics">Concepts de base</h2>
+
+<p>Pointer Lock partage des similtudes avec la <a href="/fr/docs/Web/API/Element/setCapture" title="element.setCapture">capture de souris</a>. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :</p>
+
+<ul>
+ <li>Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.</li>
+ <li>Ne se limite pas aux bordures du navigateur ou de l'écran.</li>
+ <li>Continue de déclencher des évènements peu importe l'état des boutons de la souris.</li>
+ <li>Cache le curseur.</li>
+</ul>
+
+<h2 id="method_overview" name="method_overview">Vue d'ensemble des méthodes/propriétées</h2>
+
+<p>Cette section fournit une brève description de chaque propriété et méthode associée à la spécification de Pointer Lock.</p>
+
+<h3 id="requestPointerLock()">requestPointerLock()</h3>
+
+<p>L'API Pointer lock, de manière similaire à l'<a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">API Fullscreen</a>, étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément <code>canvas</code>:</p>
+
+<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitPointerLockElement;
+
+canvas.requestPointerLock()</pre>
+
+<h3 id="pointerLockElement_et_exitPointerLock()">pointerLockElement et exitPointerLock()</h3>
+
+<p>L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}}  est utilisée pour libérer le verrou du pointeur.</p>
+
+<p>La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe.</p>
+
+<p>Voici un exemple d'utilisation de <code>pointerLockElement</code>:</p>
+
+<pre class="brush: js">document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;
+
+// 1) Utiliser une vérification booléenne--le pointeur est-il verrouillé?
+if (!!document.pointerLockElement) {
+  // pointeur verrouillé
+} else {
+  // pointeur non verrouillé
+}
+
+// 2) Accéder à l'élément verrouillé
+if (document.pointerLockElement === someElement) {
+  // someElement est l'élément sur lequel le pointeur est verrouillé
+}
+</pre>
+
+<p>La méthode {{domxref("Document.exitPointerLock()")}} est utilisée pour libérer le verrouillage du pinteur, et, comme {{domxref("Element.requestPointerLock","requestPointerLock")}}, marche de manière asynchrone, on utilise les événements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}, que vous verrez plus en détails ci-dessous.</p>
+
+<pre class="brush: js">document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+// Essaie de déverrouiller
+document.exitPointerLock();
+</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">Événement pointerlockchange</h2>
+
+<p>Quand l'état de verrouillage du pointeur change — par exemple quand on appelle {{domxref("Element.requestPointerLock","requestPointerLock()")}}, {{domxref("Document.exitPointerLock","exitPointerLock()")}}, que l'utilisateur presse la touche ECHAP, etc.—l'événement {{event("pointerlockchange")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p>
+
+<pre class="brush: js">document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;
+
+function pointerLockChange() {
+  if (!!document.pointerLockElement) {
+    console.log("Verrouillé.");
+  } else {
+    console.log("Non verrouillé.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+</pre>
+
+<h2 id="mouselocklostevent" name="mouselocklostevent">Événement pointerlockerror</h2>
+
+<p>Quand une erreur est causée par l'appel de {{domxref("Element.requestPointerLock","requestPointerLock()")}} ou {{domxref("Document.exitPointerLock","exitPointerLock()")}}, l'événement {{event("pointerlockerror")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p>
+
+<pre class="brush: js">document.addEventListener('pointerlockerror', lockError, false);
+document.addEventListener('mozpointerlockerror', lockError, false);
+document.addEventListener('webkitpointerlockerror', pointerLockChange, false);
+
+function lockError(e) {
+  alert("Pointer lock failed");
+}
+</pre>
+
+<div class="note"><strong>Note</strong>: Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec <code>moz</code>.</div>
+
+<h2 id="extensions" name="extensions">Extensions aux événements de souris</h2>
+
+<p>L'API Pointer lock étend l'interface {{domxref("MouseEvent")}} normale avec les attributs de mouvement. Deux nouveaux attributs sont ajoutés aux événements de souris —{{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}— fournissant le changement de position de la souris. Ces paramètres ont pour valeur les différences entre les valeurs des propriétés de {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} stockées dans les événements {{event("mousemove")}}, <code>eNow</code> et <code>ePrevious</code>. En d'autres termes, <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p>
+
+<h3 id="locked_state" name="locked_state">État verrouillé</h3>
+
+<p>Quand le verrouillage du pointeur est activé, les propriétés standard {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, et {{domxref("MouseEvent.screenY","screenY")}} sont gardées constantes, comme si la souris ne bougeait pas. Les propriétés {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} continuent de fournir le changement de position de la souris. Il n'y a pas de limite aux valeurs {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}, si la souris continue de bouger toujours dans la même direction. Le curseur de la souris n'existe pas et il ne peut pas sortir de la fenêtre ou être bloqué par un bord de l'écran.</p>
+
+<h3 id="unlocked_state" name="unlocked_state">État déverrouillé</h3>
+
+<p>Les paramètres {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont disponibles quel que soit l'état de la souris, verrou ou non.</p>
+
+<p>Quand la souris est déverrouillée, il est possible que le curseur soit en dehors de la fenêtre et il est alors remis automatiquement à l'intérieur. Si cela arrive, {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont définis à zéro.</p>
+
+<h2 id="example" name="example">Simple exemple pas à pas</h2>
+
+<p>Nous avons écrit une <a href="https://mdn.github.io/dom-examples/pointer-lock/">démo de verrouillage de pointer</a> pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple (<a href="https://github.com/mdn/dom-examples/tree/master/pointer-lock">voir le code source</a>). La démo ressemble à ça:</p>
+
+<p><img alt="A red circle on top of a black background." src="https://mdn.mozillademos.org/files/7953/pointer-lock.png" style="display: block; height: 362px; margin: 0px auto; width: 640px;"></p>
+
+<p>Cette démo utilise JavaScript pour dessiner une balle dans un élément {{ htmlelement("canvas") }}. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. Voyons comment cela fonctionne.</p>
+
+<p>On définit les positions initiales x et y sur le canvas:</p>
+
+<pre class="brush: js">var x = 50;
+var y = 50;</pre>
+
+<p>Les méthodes de verrouillage de pointeur sont préfixées dans les anciennes versions des navigateurs, on prend donc en compte les différentes implémentations des navigateurs:</p>
+
+<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+
+document.exitPointerLock = document.exitPointerLock ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;</pre>
+
+<p>Maintenant, on définit un gestionnaire d'événement qui appelle la méthode <code>requestPointerLock()</code> quand le canvas est cliqué, ce qui déclenche le verrouillage du pointeur.</p>
+
+<pre class="brush: js">canvas.onclick = function() {
+  canvas.requestPointerLock();
+}</pre>
+
+<p>Et maintenant le gestionnaire d'événement pour le verrouillage: <code>pointerlockchange</code>. Quand cet événement se déclenche, on appelle <code>lockChangeAlert()</code> pour gérer le changement.</p>
+
+<pre class="brush: js">// Gestionnaire d'événement de changement d'état du verrouilllage pour les différents navigateurs
+document.addEventListener('pointerlockchange', lockChangeAlert, false);
+document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
+</pre>
+
+<p>La fonction suivante vérifie si la propriété <code>pointLockElement</code> est sur notre canvas. Si c'est le cas, on attache un gestionnaire d'événement pour gérer les mouvements de la souris avec la fonction <code>updatePosition()</code>. Sinon, elle enlève le gestionnaire d'événement.</p>
+
+<pre class="brush: js">function lockChangeAlert() {
+  if (document.pointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    document.addEventListener("mousemove", updatePosition, false);
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    document.removeEventListener("mousemove", updatePosition, false);
+  }
+}</pre>
+
+<p>La fonction <code>updatePosition()</code> met à jour la position de la balle sur le canvas (les valeurs <code>x</code> et <code>y</code>), et inclut également des instructions <code>if()</code> pour vérifier si la balle est sortie des bords du canvas. Dans ce cas, la balle se ressort au bord opposé. Elle vérifie également si un appel à <code><a href="/fr/docs/Web/API/Window/requestAnimationFrame">requestAnimationFrame()</a></code> a été effectué et si ce n'est pas le cas, l'appelle pour qu'elle déclenche la fonction <code>canvasDraw()</code> et mette à jour le canvas. Un tracker est mis en place pour afficher les valeurs X et Y à l'écran, pour référence.</p>
+
+<pre class="brush: js">var tracker = document.getElementById('tracker');
+
+var animation;
+function updatePosition(e) {
+  x += e.movementX;
+  y += e.movementY;
+  if (x &gt; canvas.width + RADIUS) {
+    x = -RADIUS;
+  }
+  if (y &gt; canvas.height + RADIUS) {
+    y = -RADIUS;
+  }
+  if (x &lt; -RADIUS) {
+    x = canvas.width + RADIUS;
+  }
+  if (y &lt; -RADIUS) {
+    y = canvas.height + RADIUS;
+  }
+  tracker.textContent = "X position: " + x + ", Y position: " + y;
+
+  if (!animation) {
+    animation = requestAnimationFrame(function() {
+      animation = null;
+      canvasDraw();
+    });
+  }
+}</pre>
+
+<p>La fonction <code>canvasDraw()</code> affiche la balle aux position <code>x</code> et <code>y</code> en cours:</p>
+
+<pre class="brush: js">function canvasDraw() {
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = "#f00";
+  ctx.beginPath();
+  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
+  ctx.fill();
+}</pre>
+
+<h2 id="iframe_limitations">iframe limitations</h2>
+
+<p>Le verrouilage du pointeur ne peut concerner qu'une seule iframe à la fois. Quand vous verrouillez une iframe, vous ne pouvez pas essayer de verrouiller une autre iframe et y transférer la cible; une erreur sera levée. Pour éviter cette limitation, déverrouillez d'abord la première iframe, puis verrouillez la seconde.</p>
+
+<p>Tandis que cela fonctionne pour les iframes par défaut, les iframes en "sandbox" bloquent le verrouillage. La possibilité d'éviter cette limitation, sous la forme de la combinaison attribut/valeur <code>&lt;iframe sandbox="allow-pointer-lock"&gt;</code>, devrait bientôt apparaître dans Chrome.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Lock')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}} {{ property_prefix("-moz") }}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td>Unprefixed support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/proximity_events/index.html b/files/fr/web/api/proximity_events/index.html
new file mode 100644
index 0000000000..e5b3d1e199
--- /dev/null
+++ b/files/fr/web/api/proximity_events/index.html
@@ -0,0 +1,120 @@
+---
+title: Proximity
+slug: WebAPI/Proximity
+tags:
+  - WebAPI
+translation_of: Web/API/Proximity_Events
+---
+<p>{{ SeeCompatTable }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>Les événements de proximité permettent, simplement, de savoir lorsqu'un utilisateur est près de l'appareil. Ces événements permettent de réagir par rapport à cette proximité, par exemple en éteignant l'écran lorsqu'un utilisateur est en train de passer un appel téléphonique et que l'appareil est près de l'oreille.</p>
+<div class="note">
+  <p><strong>Note :</strong> Bien entendu, il faut un capteur de proximité pour que cette API fonctionne, ceux-ci sont généralement disponibles sur les appareils mobile. Les appareils ne disposant pas d'un tel capteur pourront supporter de tels événements, ils seront en revanche incapables de les déclencher.</p>
+</div>
+<h2 id="Événements_de_proximité">Événements de proximité</h2>
+<p>Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement  {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit.</p>
+<p>Cet événement peut être capturé en utilisant un objet au niveau <code>window</code> en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}.</p>
+<p>Une fois qu'il a été capturé, l'événement donne accès à différentes informations :</p>
+<ul>
+  <li>L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}.</li>
+  <li>L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété  {{domxref("UserProximityEvent.near")}} vaut <code>true</code> si l'objet est proche ou <code>false</code> si l'objet est loin.</li>
+</ul>
+<h2 id="Exemple">Exemple</h2>
+<pre class="brush: js">window.addEventListener('userproximity', function(event) {
+  if (event.near) {
+    // extinction de l'écran
+    navigator.mozPower.screenEnabled = false;
+  } else {
+    // allumage de l'écran
+    navigator.mozPower.screenEnabled = true;
+  }
+});</pre>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td>
+      <td>{{ Spec2('Proximity Events') }}</td>
+      <td>Spécification initiale</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>{{domxref("DeviceProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+      <tr>
+        <td>{{domxref("UserProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>{{domxref("DeviceProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{ CompatGeckoMobile("15.0") }}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+      <tr>
+        <td>{{domxref("UserProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+  <li>{{domxref("DeviceProximityEvent")}}</li>
+  <li>{{domxref("UserProximityEvent")}}</li>
+  <li>{{event("deviceproximity")}}</li>
+  <li>{{event("userproximity")}}</li>
+</ul>
diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html
new file mode 100644
index 0000000000..ae89178361
--- /dev/null
+++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html
@@ -0,0 +1,151 @@
+---
+title: audioprocess
+slug: Web/Events/audioprocess
+translation_of: Web/API/ScriptProcessorNode/audioprocess_event
+---
+<div>
+<p>L'événement <strong>audioprocess</strong> est déclenché lorsqu'un tampon d'entrée d'une API Web audio {{domxref("ScriptProcessorNode")}} est prêt à être traité.</p>
+</div>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;">{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("AudioProcessingEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("ScriptProcessorNode")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>playbackTime</code> {{ReadOnlyInline}}</td>
+   <td><code>double</code></td>
+   <td>Le moment auquel le son sera joué tel que défini par le temps de {{domxref("AudioContext.currentTime")}}.</td>
+  </tr>
+  <tr>
+   <td><code>inputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>
+    <p>Le tampon contenant les données audio d'entrée devant être traité. Le nombre de canaux est défini par le paramètre <code><em>numberOfInputChannels</em> de la méthode </code>{{domxref("AudioContext.createScriptProcessor()")}}. Noter que <code>le<em> AudioBuffer</em></code><code> retourné</code><em><code> </code></em>est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>outputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>
+    <p>Le tampon dans lequel doit être écrit les données audio de sortie. Le nombre de canaux est défini par le paramètre <code><em>numberOfOutputChannels</em> de la méthode </code>{{domxref("AudioContext.createScriptProcessor()")}}. Noter que <code>le<em> AudioBuffer</em></code><code> retourné </code>est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Appareil</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API" title="/en-US/docs/CSS/Using_CSS_animations">Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/selection_api/index.html b/files/fr/web/api/selection_api/index.html
deleted file mode 100644
index bca8077699..0000000000
--- a/files/fr/web/api/selection_api/index.html
+++ /dev/null
@@ -1,221 +0,0 @@
----
-title: Selection API
-slug: Web/API/Selection_API
-translation_of: Web/API/Selection_API
----
-<p>{{APIRef}}</p>
-
-<div class="summary">
-<p>L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : <em lang="en-US">ranges</em>) de texte sélectionnées par l’utilisatrice ou l’utilisateur.</p>
-</div>
-
-<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
-
-<p>Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.</p>
-
-<p>Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :</p>
-
-<ul>
- <li>copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;</li>
- <li>ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;</li>
- <li>modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.</li>
-</ul>
-
-<p>Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.</p>
-
-<h2 id="Interfaces_de_l’API_Selection">Interfaces de l’API Selection</h2>
-
-<dl>
- <dt>{{domxref("Selection")}}</dt>
- <dd>Représente la plage de texte sélectionnée ou la position actuelle du curseur.</dd>
-</dl>
-
-<h2 id="Extensions_à_d’autres_interfaces">Extensions à d’autres interfaces</h2>
-
-<dl>
- <dt>{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}</dt>
- <dd>Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. <code>Document.getSelection()</code> est en quelques sortes un alias de <code>Window.getSelection()</code>.</dd>
- <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
- <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).</dd>
- <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
- <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td>
-   <td>{{Spec2('Selection API')}}</td>
-   <td>La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td>
-   <td>{{Spec2('HTML Editing')}}</td>
-   <td>Définition initiale (plus ancienne), à présent obsolète.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Support de base</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown()}}<br>
-    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
-   <td>9</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>modify()</code></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoDesktop(2)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>setBaseAndExtent()</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoDesktop(53)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>deleteFromDocument()</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop(55)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoDesktop(55)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoDesktop(55)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Support de base</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>
-    <p>{{CompatVersionUnknown()}}<br>
-     {{CompatGeckoMobile(52)}}<sup>[1]</sup></p>
-   </td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>modify()</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoMobile(2)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>setBaseAndExtent()</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoMobile(53)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>deleteFromDocument()</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile(55)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoMobile(55)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoMobile(55)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.</p>
-
-<h2 id="See_also" name="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="https://github.com/chrisdavidmills/selection-api-examples/tree/gh-pages#key-quote-generator" lang="en-US">Key quote generator</a>: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (<a href="https://chrisdavidmills.github.io/selection-api-examples/">voir également en direct</a>).</li>
- <li>L’objet {{domxref("Range")}}.</li>
-</ul>
diff --git a/files/fr/web/api/storage/localstorage/index.html b/files/fr/web/api/storage/localstorage/index.html
deleted file mode 100644
index 9f6c400f86..0000000000
--- a/files/fr/web/api/storage/localstorage/index.html
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: LocalStorage
-slug: Web/API/Storage/LocalStorage
-translation_of: Web/API/Window/localStorage
-translation_of_original: Web/API/Web_Storage_API/Local_storage
----
-<p>{{APIRef()}}</p>
-
-<p>La propriété <code>localStorage</code> de l’objet <code>Window</code> est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. <code>localStorage</code> a été introduit dans Firefox 3.5.</p>
-
-<div class="note"><strong>Note :</strong> Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.</div>
-
-<pre class="brush:js">// Sauvegarder les informations dans l’espace local courant
-localStorage.setItem("username", "John");
-
-// Accéder à des données enregistrées
-alert("username = " + localStorage.getItem("username"));</pre>
-
-<p class="note">La persistence de <code>localStorage</code> le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce <a href="http://codepen.io/awesom3/pen/Hlfma">tutoriel sur Codepen</a>.</p>
-
-<h2 id="Compatibilité">Compatibilité</h2>
-
-<p>Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet <code>localStorage</code> dans les navigateurs qui ne le supportent pas nativement.</p>
-
-<p>Cet algorithme est une imitation exacte de l’objet <code>localStorage</code>, mais utilise les cookies.</p>
-
-<pre class="brush:js">if (!window.localStorage) {
-  Object.defineProperty(window, "localStorage", new (function () {
-    var aKeys = [], oStorage = {};
-    Object.defineProperty(oStorage, "getItem", {
-      value: function (sKey) { return sKey ? this[sKey] : null; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "key", {
-      value: function (nKeyId) { return aKeys[nKeyId]; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "setItem", {
-      value: function (sKey, sValue) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "length", {
-      get: function () { return aKeys.length; },
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "removeItem", {
-      value: function (sKey) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    this.get = function () {
-      var iThisIndx;
-      for (var sKey in oStorage) {
-        iThisIndx = aKeys.indexOf(sKey);
-        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
-        else { aKeys.splice(iThisIndx, 1); }
-        delete oStorage[sKey];
-      }
-      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
-      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
-        aCouple = aCouples[nIdx].split(/\s*=\s*/);
-        if (aCouple.length &gt; 1) {
-          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
-          aKeys.push(iKey);
-        }
-      }
-      return oStorage;
-    };
-    this.configurable = false;
-    this.enumerable = true;
-  })());
-}
-</pre>
-
-<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.setItem()</code> et <code>localStorage.removeItem()</code> pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes <code>localStorage.yourKey = yourValue;</code> et <code>delete localStorage.yourKey;</code> pour définir ou supprimer une clé n’est <strong>pas sécurisée avec ce code.</strong> Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet <code>localStorage</code>.</div>
-
-<div class="note"><strong>Note :</strong> En remplaçant <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de <code>sessionStorage</code> restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
-
-<p>Voici une autre imitation, moins exacte, de l’objet <code>localStorage</code>. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer &lt; 8 (<strong>testé et vérifié même avec Internet Explorer 6</strong>). Ce code utilise également les cookies.</p>
-
-<pre class="brush:js">if (!window.localStorage) {
-  window.localStorage = {
-    getItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
-      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
-    },
-    key: function (nKeyId) {
-      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
-    },
-    setItem: function (sKey, sValue) {
-      if(!sKey) { return; }
-      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      this.length = document.cookie.match(/\=/g).length;
-    },
-    length: 0,
-    removeItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
-      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      this.length--;
-    },
-    hasOwnProperty: function (sKey) {
-      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
-    }
-  };
-  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
-}
-</pre>
-
-<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, et <code>localStorage.removeItem()</code> pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode <code>localStorage.yourKey</code> pour récupérer, définir, ou supprimer une clé <strong>n’est pas possible avec ce code</strong>. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet <code>localStorage</code>.</div>
-
-<div class="note"><strong>Note :</strong> En remplaçant la chaîne <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec <code>sessionStorage</code> restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
-
-<h3 id="Compatibilité_et_relation_avec_globalStorage">Compatibilité et relation avec globalStorage</h3>
-
-<p><code>localStorage</code> est équivalent à <code>globalStorage[location.hostname]</code>, à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que <code>localStorage</code> est une instance de <code>Storage</code>, contrairement à <code>globalStorage[location.hostname]</code> qui est une instance de <code>StorageObsolete</code> (qui est abordé ci-dessous). Par exemple, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> ne sera pas capable d’accéder au même objet <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mais il pourront accéder au même élément <code>globalStorage</code>. <code>localStorage</code> est une interface standard alors que <code>globalStorage</code> n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.</p>
-
-<p>Veuillez noter que définir une propriété sur <code>globalStorage[location.hostname]</code> n’entraîne <strong>pas</strong> sa définition sur <code>localStorage</code>, et qu’étendre <code>Storage.prototype</code> n’affecte pas les objets <code>globalStorage</code> ; pour faire ainsi, c’est <code>StorageObsolete.prototype</code> qu’il faut étendre.</p>
-
-<h2 id="Format_de_stockage">Format de stockage</h2>
-
-<p>Les clés et les valeurs de <code>Storage</code> sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.</p>
diff --git a/files/fr/web/api/touch_events/index.html b/files/fr/web/api/touch_events/index.html
new file mode 100644
index 0000000000..7f3cbae7b5
--- /dev/null
+++ b/files/fr/web/api/touch_events/index.html
@@ -0,0 +1,245 @@
+---
+title: Événements tactiles / Touch events
+slug: Web/Guide/DOM/Events/Touch_events
+tags:
+  - Tactile
+  - touch
+translation_of: Web/API/Touch_events
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (<em>touch events</em>) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).</p>
+
+<h2 id="Définitions">Définitions</h2>
+
+<dl>
+ <dt>Surface</dt>
+ <dd>La surface tactile. Cela peut être un écran ou un trackpad.</dd>
+</dl>
+
+<dl>
+ <dt><strong style="font-weight: bold;">Point de toucher (<em>Touch point</em>)</strong></dt>
+ <dd>Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{ domxref("TouchEvent") }}</dt>
+ <dd>Représente l'événement qui se produit quand l'action de toucher change.</dd>
+ <dt>{{ domxref("Touch") }}</dt>
+ <dd>Représente un point unique de contact entre l'utilisateur et la surface tactile.</dd>
+ <dt>{{ domxref("TouchList") }}</dt>
+ <dd>Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.</dd>
+ <dt>{{ domxref("DocumentTouch") }}</dt>
+ <dd>Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</p>
+
+<div class="note"><strong>Note :</strong> Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).</div>
+
+<h3 id="Initialiser_les_gestionnaires_d'événements">Initialiser les gestionnaires d'événements</h3>
+
+<p>Quand la page charge, la fonction <code>startup()</code> décrite ci-dessous est appelée par l'attribut <code>onload</code> de l'élément {{ HTMLElement("body") }}.</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+</pre>
+
+<p>Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.</p>
+
+<h3 id="Gérer_les_nouveaux_touchers">Gérer les nouveaux touchers</h3>
+
+<p>Quand un événement <code>touchstart</code> se produit, cela indique qu'un nouveau toucher s'est produit. La fonction <code>handleStart()</code> est alors appelée.</p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+</pre>
+
+<p>Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.</p>
+
+<p>Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).</p>
+
+<h3 id="Dessiner_avec_les_déplacements">Dessiner avec les déplacements</h3>
+
+<p>Chaque fois que le(s) doigt(s) bouge(nt), un événement <code>touchmove</code> est déclenché, ce qui provoque l'appel de la fonction <code>handleMove()</code> que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // mettre à jour la liste des touchers
+  }
+}
+</pre>
+
+<p>Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.</p>
+
+<p>Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.</p>
+
+<p>Une fois le segment dessiné, on appelle <a href="/fr/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau <code>ongoingTouches</code>.</p>
+
+<h3 id="Gérer_la_fin_d'un_toucher">Gérer la fin d'un toucher</h3>
+
+<p>Lorsqu'un utilisateur enlève son doigt de la surface, un événement <code>touchend</code> est envoyé. De la même manière, un événement <code>touchleave</code> sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction <code>handleEnd()</code> ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // On enlève le point
+  }
+}
+</pre>
+
+<p>Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.</p>
+
+<h3 id="Gérer_l'annulation_d'un_toucher">Gérer l'annulation d'un toucher</h3>
+
+<p>Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement <code>touchcancel</code> est envoyé et on appelle alors la fonction <code>handleCancel()</code>.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // on retire le point
+  }
+}
+</pre>
+
+<p>L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.</p>
+
+<h3 id="Fonctions_auxiliaires">Fonctions auxiliaires</h3>
+
+<p>Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.</p>
+
+<h4 id="Sélectionner_une_couleur_pour_chaque_toucher">Sélectionner une couleur pour chaque toucher</h4>
+
+<p>Afin que chaque contact soit différent, on utilisera la fonction <code>colorForTouch()</code> pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // creer un nombre hexadécimal
+  return "#" + id + id + id;
+}
+</pre>
+
+<p>Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".</p>
+
+<h4 id="Retrouver_un_toucher_en_cours">Retrouver un toucher en cours</h4>
+
+<p>La fonction <code>ongoingTouchIndexById()</code> analyse le tableau <code>ongoingTouches</code> pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i&lt;ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // toucher non trouvé
+}
+</pre>
+
+<p><a href="/samples/domref/touchevents.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Astuces_supplémentaires">Astuces supplémentaires</h2>
+
+<p>Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.</p>
+
+<h3 id="Gérer_les_clics">Gérer les clics</h3>
+
+<p>Étant donné que l'appel de la méthode <code>preventDefault()</code> sur l'événement  <code>touchstart</code> ou le premier événement <code>touchmove</code> de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  <code>preventDefault()</code> sur <code>touchmove</code> plutôt que sur <code>touchstart</code>. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt);
+}
+</pre>
+
+<h3 id="Appeler_preventDefault()_uniquement_pour_un_deuxième_toucher">Appeler preventDefault() uniquement pour un deuxième toucher</h3>
+
+<p>Pour éviter que des événements de zoom (comme <code>pinchZoom</code>) ne se produisent sur la page, il est possible d'appeler la méthode <code>preventDefault()</code> sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (<em>viewport</em>) pour éviter un zoom quelconque.</p>
+
+<dl>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Touch")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3>
+
+<p>Le paramètre <code>dom.w3c_touch_events.enabled</code> peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.</p>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("12.0") }}</p>
+
+<p>Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.</p>
+</div>
+
+<div class="note"><strong>Note : </strong>Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">API propriétaire pour les événements tactile.</a> Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.</div>
diff --git a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
new file mode 100644
index 0000000000..97174a4763
--- /dev/null
+++ b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
@@ -0,0 +1,64 @@
+---
+title: Gérer à la fois événement tactile et événement de la souris
+slug: >-
+  Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris
+translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à <em>émuler</em> les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours <em>tel quel </em>sans modification directe.</p>
+
+<p>Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.</p>
+
+<h2 id="Déclenchement_de_l'événement">Déclenchement de l'événement</h2>
+
+<p>La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section <a href="https://w3c.github.io/touch-events/#mouse-events"><em>Interaction with Mouse Events and click</em></a> pour plus de détails), noter que <em>le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur.</em> Cette section décrit les exigences pouvant affecter une application.</p>
+
+<p>Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur <em>doit</em> déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.</p>
+
+<p>Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle <code>preventDefault()</code>.</p>
+
+<pre class="brush: js">// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Ordre_des_événements">Ordre des événements</h2>
+
+<p>Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est <em>représentatif:</em> pour une entrée :</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
+ <li><code>touchend</code></li>
+ <li><code>mousemove</code></li>
+ <li><code>mousedown</code></li>
+ <li><code>mouseup</code></li>
+ <li><code>click</code></li>
+</ul>
+
+<p>Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
+ <li><code>touchend</code></li>
+</ul>
+
+<h2 id="Community">Community</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Touch Events Community Group</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
+</ul>
+
+<h2 id="Related_topics_and_resources">Related topics and resources</h2>
+
+<ul>
+ <li><a href="/Web/API/Touch_events">Touch Events Overview</a></li>
+ <li><a href="/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li>
+ <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
deleted file mode 100644
index b925ca7f4b..0000000000
--- a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
+++ /dev/null
@@ -1,423 +0,0 @@
----
-title: Concepts avancés et exemples
-slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples
-translation_of: Web/API/Web_Workers_API/Using_web_workers
-translation_of_original: Web/API/Web_Workers_API/Advanced_concepts_and_examples
----
-<div class="summary">
-<p>Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.</p>
-</div>
-
-<h2 id="Passage_de_données_copie_et_non_partage">Passage de données : copie, et non partage</h2>
-
-<p>Les données passées entre la page principale et les workers sont <strong>copiées</strong>, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker <strong>ne partagent pas la même instance</strong>, ainsi au final <strong>une copie</strong> est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">clonage structuré</a>.</p>
-
-<p>Avant de poursuivre, créons à des fins didactiques une fonction nommée <code>emulateMessage()</code>, avec pour objectif de simuler le comportement d'une valeur qui est <em>clonée et non partagée</em> durant le passage du <code>worker</code> à la page principale ou inversement :</p>
-
-<pre class="brush: js">function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-alert(typeof example1); // objet
-alert(typeof emulateMessage(example1)); // nombre
-
-// test #2
-var example2 = true;
-alert(typeof example2); // booléen
-alert(typeof emulateMessage(example2)); // booléen
-
-// test #3
-var example3 = new String("Hello World");
-alert(typeof example3); // objet
-alert(typeof emulateMessage(example3)); // chaîne de caractères
-
-// test #4
-var example4 = {
-    "name": "John Smith",
-    "age": 43
-};
-alert(typeof example4); // objet
-alert(typeof emulateMessage(example4)); // objet
-
-// test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal("Cat", 3);
-alert(example5.constructor); // Animal
-alert(emulateMessage(example5).constructor); // Objet</pre>
-
-<p>Une valeur qui est clonée et non partagée est appelée <em>message</em>. Comme vous le savez probablement dès à présent, les <em>messages</em> peuvent être envoyés à et à partir du thread principal en utilisant <code>postMessage()</code>, et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement <code>message</code> contient les données retournées par le worker.</p>
-
-<p><strong>example.html </strong>(la page principale) :</p>
-
-<pre class="brush: js">var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Worker said : " + oEvent.data);
-};
-
-myWorker.postMessage("ali");</pre>
-
-<p><strong>my_task.js</strong> (leworker) :</p>
-
-<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function (oEvent) {
-  postMessage("Hi " + oEvent.data);
-};</pre>
-
-<p>L'algorithme de <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">clonage structurée</a> peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.</p>
-
-<h3 id="Exemples_de_passages_de_données">Exemples de passages de données</h3>
-
-<h4 id="Exemple_1_Créer_un_eval()_asynchrone_générique">Exemple #1 : Créer un "<code>eval() </code>asynchrone" générique</h4>
-
-<p>L'exemple suivant montre comment utiliser un worker afin d'exécuter <strong>de manière asynchrone</strong> n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> appelée dans le worker :</p>
-
-<pre class="brush: js">// Syntaxe : asyncEval(code[, listener])
-
-var asyncEval = (function () {
-
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
-
-  oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
-    delete aListeners[oEvent.data.id];
-  };
-
-
-  return function (sCode, fListener) {
-    aListeners.push(fListener || null);
-    oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
-    });
-  };
-
-})();</pre>
-
-<p>La data URI est équivalente à une requête réseau, avec la réponse suivante :</p>
-
-<pre>onmessage = function (oEvent) {
-	postMessage({
-		"id": oEvent.data.id,
-		"evaluated": eval(oEvent.data.code)
-	});
-}</pre>
-
-<p>Exemples d'utilisation :</p>
-
-<pre class="brush: js">// message d'alerte asynchrone...
-asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
-});
-
-// affichage asynchrone d'un message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
-});
-
-// néant asynchrone...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre>
-
-<h4 id="Exemple_2_passage_avancé_de_données_JSON_et_création_d'un_système_d'échange">Exemple #2 : passage avancé de données JSON et création d'un système d'échange</h4>
-
-<p>Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.</p>
-
-<p><strong>example.html</strong> (la page principale) :</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8"  /&gt;
-&lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
-  /*
-    QueryableWorker instances methods:
-     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-     * terminate(): terminates the Worker
-     * addListener(name, function): adds a listener
-     * removeListener(name): removes a listener
-    QueryableWorker instances properties:
-     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-  */
-  function QueryableWorker (sURL, fDefListener, fOnError) {
-    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
-    this.defaultListener = fDefListener || function () {};
-    oWorker.onmessage = function (oEvent) {
-      if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("vo42t30") &amp;&amp; oEvent.data.hasOwnProperty("rnb93qh")) {
-        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
-      } else {
-        this.defaultListener.call(oInstance, oEvent.data);
-      }
-    };
-    if (fOnError) { oWorker.onerror = fOnError; }
-    this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) {
-      if (arguments.length &lt; 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
-      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
-    };
-    this.postMessage = function (vMsg) {
-      //Je ne pense pas qu'il y ait besoin d'appeler la méthode call()
-      //que diriez-vous tout simplement de oWorker.postMessage(vMsg);
-      //le même cas se pose avec terminate
-      //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes
-      Worker.prototype.postMessage.call(oWorker, vMsg);
-    };
-    this.terminate = function () {
-      Worker.prototype.terminate.call(oWorker);
-    };
-    this.addListener = function (sName, fListener) {
-      oListeners[sName] = fListener;
-    };
-    this.removeListener = function (sName) {
-      delete oListeners[sName];
-    };
-  };
-
-  // votre worker "queryable" personnalisé
-  var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */);
-
-  // vos "écouteurs" personnalisés
-
-  oMyTask.addListener("printSomething", function (nResult) {
-    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
-  });
-
-  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
-    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
-  });
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="javascript:oMyTask.sendQuery('waitSomething');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="javascript:oMyTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><strong>my_task.js</strong> (le worker) :</p>
-
-<pre class="brush: js">// vos fonctions PRIVEES personnalisées
-
-function myPrivateFunc1 () {
-  // instructions à exécuter
-}
-
-function myPrivateFunc2 () {
-  // instructions à exécuter
-}
-
-// etc. etc.
-
-// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale)
-
-var queryableFunctions = {
-  // exemple #1 : obtenir la différence entre deux nombres :
-  getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
-  },
-  // exemple #2 : attendre trois secondes
-  waitSomething: function () {
-      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
-  }
-};
-
-// fonctions système
-
-function defaultQuery (vMsg) {
-  // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement
-  // instructions à exécuter
-}
-
-function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
-  if (arguments.length &lt; 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
-}
-
-onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("bk4e1h0") &amp;&amp; oEvent.data.hasOwnProperty("ktp3fm1")) {
-    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
-  } else {
-    defaultQuery(oEvent.data);
-  }
-};</pre>
-
-<p>Il est possible d'échanger le contenu de chaque message page principale -&gt; worker et worker -&gt; page principale.</p>
-
-<h3 id="Passage_de_données_par_transfert_de_propriété_(objets_transférables)">Passage de données par transfert de propriété (objets transférables)</h3>
-
-<p>Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets <span class="external">transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}</span>) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.</p>
-
-<pre class="brush: js">// Crée un "fichier" de 32MB et le remplit.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
-for (var i = 0; i &lt; uInt8Array.length; ++i) {
-  uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
-</pre>
-
-<div class="note">
-<p><strong>Remarque </strong>: pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> sur HTML5 Rocks.</p>
-</div>
-
-<h2 id="Workers_embarqués">Workers embarqués</h2>
-
-<p>Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut <code>src</code> et dont l'attribut <code>type</code> n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage.  Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;MDN Example - Embedded worker&lt;/title&gt;
-&lt;script type="text/js-worker"&gt;
-  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
-  var myVar = "Hello World!";
-  // Le reste du code de votre worker commence ici.
-&lt;/script&gt;
-&lt;script type="text/javascript"&gt;
-  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
-  function pageLog (sMsg) {
-    // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement("br"));
-    document.querySelector("#logDisplay").appendChild(oFragm);
-  }
-&lt;/script&gt;
-&lt;script type="text/js-worker"&gt;
-  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
-  onmessage = function (oEvent) {
-    postMessage(myVar);
-  };
-  // Le reste du code de votre worker commence ici.
-&lt;/script&gt;
-&lt;script type="text/javascript"&gt;
-  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
-
-  // Dans le passé... :
-  // blob builder a existé
-  // ...mais nous utilisons désormais Blob...:
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
-
-  // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker".
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function (oEvent) {
-    pageLog("Received: " + oEvent.data);
-  };
-
-  // Démarrage du worker.
-  window.onload = function() { document.worker.postMessage(""); };
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée <code>document.worker</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.</p>
-
-<h3 id="Réaliser_des_calculs_en_arrière-plan">Réaliser des calculs en arrière-plan</h3>
-
-<p>Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.</p>
-
-<h4 id="Le_code_JavaScript">Le code JavaScript</h4>
-
-<p>Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.</p>
-
-<pre class="brush: js">var results = [];
-
-function resultReceiver(event) {
-  results.push(parseInt(event.data));
-  if (results.length == 2) {
-    postMessage(results[0] + results[1]);
-  }
-}
-
-function errorReceiver(event) {
-  throw event.data;
-}
-
-onmessage = function(event) {
-  var n = parseInt(event.data);
-
-  if (n == 0 || n == 1) {
-    postMessage(n);
-    return;
-  }
-
-  for (var i = 1; i &lt;= 2; i++) {
-    var worker = new Worker("fibonacci.js");
-    worker.onmessage = resultReceiver;
-    worker.onerror = errorReceiver;
-    worker.postMessage(n - i);
-  }
- };</pre>
-
-<p>Le worker affecte à la propriété <code>onmessage</code>  une fonction qui recevra les messages envoyés lorsque la méthode  <code>postMessage()</code> de l'objet worker est appelée (remarquez que cela diffère de définir une <em>variable</em> globale de ce nom, ou de définir une <em>fonction</em> avec ce nom.   <code>var onmessage</code> <code>et function onmessage</code> définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.</p>
-
-<h4 id="Le_code_HTML">Le code HTML</h4>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"  /&gt;
-    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-
-  &lt;div id="result"&gt;&lt;/div&gt;
-
-  &lt;script language="javascript"&gt;
-
-    var worker = new Worker("fibonacci.js");
-
-    worker.onmessage = function(event) {
-      document.getElementById("result").textContent = event.data;
-      dump("Got: " + event.data + "\n");
-    };
-
-    worker.onerror = function(error) {
-      dump("Worker error: " + error.message + "\n");
-      throw error;
-    };
-
-    worker.postMessage("5");
-
-  &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>La page web crée un élément <code>div</code> avec l'ID  <code>result</code> , qui sera utilisé pour afficher le résultat, puis engendre le worker.  Après création du worker, le gestionnaire <code>onmessage</code> est configuré pour afficher les résultats en renseignant le contenu de l'élément <code>div</code>, et le gestionnaire <code>onerror</code> est configuré pour <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">capturer</a> le message d'erreur.</p>
-
-<p>Finalement, un message est envoyé au worker pour le démarrer.</p>
-
-<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Tester cet exemple</a>.</p>
-
-<h3 id="Réaliser_des_ES_web_en_arrière-plan">Réaliser des E/S web en arrière-plan</h3>
-
-<p>Vous pouvez trouver un tel exemple dans l'article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p>
-
-<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs workers</h3>
-
-<p>Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Utilisation des web workers</a></li>
-</ul>
diff --git a/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
index 379f86edd6..379f86edd6 100644
--- a/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html
+++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
diff --git a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html
index dfb8c20bf9..dfb8c20bf9 100644
--- a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html
+++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html
diff --git a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html b/files/fr/web/api/web_workers_api/using_web_workers/index.html
index b1330f34bf..b1330f34bf 100644
--- a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html
+++ b/files/fr/web/api/web_workers_api/using_web_workers/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html
index 3995861e83..3995861e83 100644
--- a/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html
+++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/modèle_1/index.html b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html
index a055a358c8..a055a358c8 100644
--- a/files/fr/web/api/webgl_api/by_example/modèle_1/index.html
+++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html
index 086e0394a7..086e0394a7 100644
--- a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html
+++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html
index 7ca07c36e6..7ca07c36e6 100644
--- a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html
+++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html
index 1d8db41a20..1d8db41a20 100644
--- a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html
+++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html b/files/fr/web/api/webgl_api/by_example/color_masking/index.html
index ad5e0dd461..ad5e0dd461 100644
--- a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html
+++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html
index fec1fd88a0..fec1fd88a0 100644
--- a/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html
+++ b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html
index 612dbad79c..612dbad79c 100644
--- a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html
+++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html
index e9f9bcdf8c..e9f9bcdf8c 100644
--- a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html
+++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html
index 8eb25287ab..8eb25287ab 100644
--- a/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html
+++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html
index a38d174808..a38d174808 100644
--- a/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html
+++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html
index cd7d71f0c5..cd7d71f0c5 100644
--- a/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html
+++ b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html
diff --git a/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html b/files/fr/web/api/webgl_api/by_example/video_textures/index.html
index ab1ea5a388..ab1ea5a388 100644
--- a/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html
+++ b/files/fr/web/api/webgl_api/by_example/video_textures/index.html
diff --git a/files/fr/web/api/webgl_api/données/index.html b/files/fr/web/api/webgl_api/data/index.html
index f41b0e2f1d..f41b0e2f1d 100644
--- a/files/fr/web/api/webgl_api/données/index.html
+++ b/files/fr/web/api/webgl_api/data/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
index c7afe5f9ae..c7afe5f9ae 100644
--- a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
index 534d6ef995..534d6ef995 100644
--- a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
index 1c9efb8966..1c9efb8966 100644
--- a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
index ccbff1a2d6..ccbff1a2d6 100644
--- a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
index 4388934aeb..4388934aeb 100644
--- a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
index db767fe9bb..db767fe9bb 100644
--- a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
index 2bd786c015..2bd786c015 100644
--- a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
diff --git a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
index 6e1d7bb67d..6e1d7bb67d 100644
--- a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html
+++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
diff --git a/files/fr/web/api/webglrenderingcontext/canevas/index.html b/files/fr/web/api/webglrenderingcontext/canvas/index.html
index 6b7965a1d7..6b7965a1d7 100644
--- a/files/fr/web/api/webglrenderingcontext/canevas/index.html
+++ b/files/fr/web/api/webglrenderingcontext/canvas/index.html
diff --git a/files/fr/web/api/webglrenderingcontext/activer/index.html b/files/fr/web/api/webglrenderingcontext/enable/index.html
index 4d3b41d6c0..4d3b41d6c0 100644
--- a/files/fr/web/api/webglrenderingcontext/activer/index.html
+++ b/files/fr/web/api/webglrenderingcontext/enable/index.html
diff --git a/files/fr/web/api/webrtc_api/connectivity/index.html b/files/fr/web/api/webrtc_api/connectivity/index.html
new file mode 100644
index 0000000000..8b512d7127
--- /dev/null
+++ b/files/fr/web/api/webrtc_api/connectivity/index.html
@@ -0,0 +1,54 @@
+---
+title: Introduction à l'architecture WebRTC
+slug: Web/Guide/API/WebRTC/WebRTC_architecture
+tags:
+  - WebRTC
+translation_of: Web/API/WebRTC_API/Connectivity
+---
+<p class="summary">(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.</p>
+
+<h2 id="Qu’est-ce_que_ICE">Qu’est-ce que ICE?</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir :</p>
+
+<h2 id="Qu’est-ce_que_STUN">Qu’est-ce que STUN?</h2>
+
+<p><a href="http://fr.wikipedia.org/wiki/Simple_Traversal_of_UDP_through_NATs">Session Traversal Utilities for NAT (STUN)</a> (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair.</p>
+
+<p>Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p>
+
+<h2 id="Qu’est-ce_que_NAT">Qu’est-ce que NAT?</h2>
+
+<p><a href="http://fr.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.</p>
+
+<p>Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN.</p>
+
+<h2 id="Qu’est-ce_que_TURN">Qu’est-ce que TURN?</h2>
+
+<p>Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.</p>
+
+<p><img alt="Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p>
+
+<h2 id="Qu’est-ce_que_SDP">Qu’est-ce que SDP?</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.</p>
+
+<h2 id="Qu’est-ce_qu'une_OffreRéponse_et_un_Canal_de_Signal">Qu’est-ce qu'une Offre/Réponse et un Canal de Signal?</h2>
+
+<p>Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble.</p>
+
+<p>L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus.</p>
+
+<p>Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal.</p>
+
+<h2 id="Qu’est-ce_qu’un_candidat_ICE">Qu’est-ce qu’un candidat ICE?</h2>
+
+<p>Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN).</p>
+
+<h2 id="L'échange_entier_dans_un_diagramme_compliqué">L'échange entier dans un diagramme compliqué</h2>
+
+<p><a href="https://hacks.mozilla.org/wp-content/uploads/2013/07/webrtc-complete-diagram.png"><img alt="Un schéma architectural complet montrant l'ensemble du processus WebRTC." src="https://mdn.mozillademos.org/files/6119/webrtc-complete-diagram.png" style="display: block; height: 559px; margin: 0px auto; width: 641px;"></a></p>
diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.html b/files/fr/web/api/webrtc_api/session_lifetime/index.html
new file mode 100644
index 0000000000..0b14f417fb
--- /dev/null
+++ b/files/fr/web/api/webrtc_api/session_lifetime/index.html
@@ -0,0 +1,21 @@
+---
+title: Introduction à WebRTC
+slug: WebRTC/Introduction
+translation_of: Web/API/WebRTC_API/Session_lifetime
+---
+<div class="note">
+  <p>WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p>
+</div>
+<h2 id="Etablir_la_connexion">Etablir la connexion</h2>
+<p>La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.</p>
+<h3 id="Signalisation">Signalisation</h3>
+<p>La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'<a href="https://developers.google.com/appengine/docs/python/channel/overview" title="https://developers.google.com/appengine/docs/python/channel/overview">API Google Channel</a>) pour AppEngine.</p>
+<h2 id="Transmission">Transmission</h2>
+<h3 id="getUserMedia">getUserMedia</h3>
+<p>Objet LocalMediaStream</p>
+<h2 id="Reception">Reception</h2>
+<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à <a title="about:config">about:config</a> et positionnez 'media.navigator.enabled' à 'true'.</p>
+<div class="note">
+  <p>Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Essayez aussi la <a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de service d'appel</a>, sa page source, et son <a href="https://github.com/anantn/webrtc-demo/">serveur source</a>.</p>
+</div>
+<p> </p>
diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html
new file mode 100644
index 0000000000..e550e4adbb
--- /dev/null
+++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html
@@ -0,0 +1,360 @@
+---
+title: L’essentiel du WebRTC
+slug: Web/Guide/API/WebRTC/WebRTC_basics
+tags:
+  - WebRTC
+translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
+translation_of_original: Web/API/WebRTC_API/WebRTC_basics
+---
+<div class="summary">
+<p>Maintenant que vous comprenez l'<a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="Introduction à l'architecture WebRTC">architecture WebRTC</a>, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias  pair à pair qui fonctionne</p>
+</div>
+
+<h2 id="Contenu_semi-ancien_à_partir_de_RTCPeerConnection">Contenu semi-ancien, à partir de RTCPeerConnection</h2>
+
+<p>Les informations ci-dessous proviennent de RTCPeerConnection; elles  pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai.</p>
+
+<h2 id="Usage_basique">Usage basique</h2>
+
+<p>l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine  et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion.</p>
+
+<p>Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer:</p>
+
+<pre class="notranslate"><code>var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// Helper functions
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i &lt; videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.close();
+}
+
+function error(err) {
+  endCall();
+}</code></pre>
+
+<p><strong>Initialiser un appel</strong></p>
+
+<p>l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire.</p>
+
+<pre class="notranslate"><code>// recuperer la liste des "amis" a partir du serveur
+// l'utilisateur selectionne un amis avec qui lancer la connection
+navigator.getUserMedia({video: true}, function(stream) {
+  // l'ajout d'un stream locale ne declanche pas onaddstream,
+  // donc il faut l'appeler manuellement.
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.createOffer(function(offer) {
+    pc.setLocalDescription(offer, function() {
+      // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment.
+    }, error);
+  }, error);
+});</code></pre>
+
+<p><strong>Répondre à un appel</strong></p>
+
+<p>sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un  objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</p>
+
+<p>Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant.</p>
+
+<pre class="notranslate"><code>var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+    pc.createAnswer(function(answer) {
+      pc.setLocalDescription(answer, function() {
+        // envoi de la réponse au serveur qui la transmettra a l'appelant
+      }, error);
+    }, error);
+  }, error);
+});</code></pre>
+
+<p><strong>Gestion de la réponse</strong></p>
+
+<p>retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. </p>
+
+<pre class="notranslate"><code>// pc a été déclaré </code>précédemment<code>, lors de l'envoi de l'offre.
+var offer = getResponseFromFriend();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);</code></pre>
+
+<h2 id="Ancien_contenu_en_approche!">Ancien contenu en approche!</h2>
+
+<p>Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.</p>
+
+<div class="note">
+<p>Ne pas utiliser les examples de cette page. Voir l'article <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">signalisation et appel vidéo</a> ,pour des example mis a jour sur l'utilisation des medias WebRTC.</p>
+</div>
+
+<h2 id="Note">Note</h2>
+
+<p>Cette page contient des informations périmées selon <a href="http://stackoverflow.com/a/25065359/3760500">http://stackoverflow.com/a/25065359/3760500</a></p>
+
+<blockquote>
+<p>Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense.</p>
+</blockquote>
+
+<h2 id="Shims_Bibliothèque_d’interception_d’API">Shims (Bibliothèque d’interception d’API)</h2>
+
+<p>Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.</p>
+
+<pre class="brush: js notranslate">var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
+var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre>
+
+<h2 id="PeerConnection">PeerConnection</h2>
+
+<p>C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.</p>
+
+<pre class="brush: js notranslate">var pc = new PeerConnection(configuration, options);</pre>
+
+<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3>
+
+<p>L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.</p>
+
+<pre class="brush: js notranslate">var configuration = {
+    iceServers: [
+        {url: "stun:23.21.150.121"},
+        {url: "stun:stun.l.google.com:19302"},
+        {url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
+    ]
+}</pre>
+
+<p>Google met à disposition un <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">serveur STUN public</a> que nous pouvons utiliser. J'ai également créé un compte chez http://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification.</p>
+
+<h3 id="options_Cf._Note_avant"><strong><code>options</code></strong> (Cf. "Note" avant)</h3>
+
+<p>Selon le type de connexion, vous devez passer des options.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var options = {
+    optional: [
+        {DtlsSrtpKeyAgreement: true},
+        {RtpDataChannels: true}
+    ]
+}</pre>
+
+<p><code>DtlsSrtpKeyAgreement</code> est exigé pour Chrome et Firefox pour interagir.</p>
+
+<p><code>RtpDataChannels</code> est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox.</p>
+
+<h2 id="ICECandidate">ICECandidate</h2>
+
+<p>Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) {
+    // candidate exists in e.candidate
+    if (e.candidate == null) { return }
+    send("icecandidate", JSON.stringify(e.candidate));
+    pc.onicecandidate = null;
+};</pre>
+
+<p>Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP.</p>
+
+<h2 id="Canal_de_Signal">Canal de Signal</h2>
+
+<p>Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées…</p>
+
+<p>C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser <a href="http://firebase.com">FireBase</a> parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur.</p>
+
+<p>Pour l'instant imaginez seulement que deux méthodes existent: <code>send()</code> va prendre une clé et lui affecter des données et <code>recv()</code> appelle un descripteur lorsqu'une clé a une valeur.</p>
+
+<p>La structure de la base de données ressemble à ceci :</p>
+
+<pre class="brush: js notranslate" lang="json">{
+    "": {
+        "candidate:": …
+        "offer": …
+        "answer": …
+    }
+}</pre>
+
+<p>Les connexions sont divisées par un <code>roomId</code> et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP.</p>
+
+<h2 id="Offre">Offre</h2>
+
+<p>Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc).</p>
+
+<p>Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) {
+    pc.setLocalDescription(offer);
+
+    send("offer", JSON.stringify(offer));
+}, errorHandler, constraints);</pre>
+
+<h3 id="errorHandler"><strong><code>errorHandler</code></strong></h3>
+
+<p>S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) {
+    console.error(err);
+};</pre>
+
+<h3 id="constraints"><strong><code>constraints</code></strong></h3>
+
+<p>Options pour l'offre SDP.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var constraints = {
+    mandatory: {
+        OfferToReceiveAudio: true,
+        OfferToReceiveVideo: true
+    }
+};</pre>
+
+<p><code>OfferToReceiveAudio/Video</code> Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels.</p>
+
+<p>Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP.</p>
+
+<h2 id="Réponse">Réponse</h2>
+
+<p>Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.</p>
+
+<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) {
+    offer = new SessionDescription(JSON.parse(offer))
+    pc.setRemoteDescription(offer);
+
+    pc.createAnswer(function (answer) {
+        pc.setLocalDescription(answer);
+
+        send("answer", JSON.stringify(answer));
+    }, errorHandler, constraints);
+});</pre>
+
+<h2 id="DataChannel">DataChannel</h2>
+
+<p>J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs.</p>
+
+<p><em>Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt.</em></p>
+
+<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre>
+
+<p>L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) <code>ondatachannel</code> dans le PeerConnection. Vous devez appeler <code>createDataChannel()</code> une fois avant de créer l'offre.</p>
+
+<h3 id="channelName"><strong><code>channelName</code></strong></h3>
+
+<p>Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. <em>AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur <code>createAnswer()</code>.</em></p>
+
+<h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3>
+
+<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre>
+
+<p>Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> pour plus d'informations sur les options.</p>
+
+<h3 id="Méthodes_et_événements_de_canal">Méthodes et événements de canal</h3>
+
+<h4 id="onopen"><strong><code>onopen</code></strong></h4>
+
+<p>Exécuté lorsque la connexion est établie.</p>
+
+<h4 id="onerror"><strong><code>onerror</code></strong></h4>
+
+<p>Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.</p>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) {
+    console.error("Channel Error:", err);
+};</pre>
+
+<h4 id="onmessage"><strong><code>onmessage</code></strong></h4>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) {
+    console.log("Got message:", e.data);
+}</pre>
+
+<p>Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations.</p>
+
+<h4 id="onclose"><strong><code>onclose</code></strong></h4>
+
+<p>Exécuté si l'autre pair ferme la connexion.</p>
+
+<h3 id="Lier_les_événements"><strong>Lier les événements</strong></h3>
+
+<p>Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec <code>createChannel</code>. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback <code>ondatachannel</code> dans le PeerConnection afin d'accéder au même canal.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) {
+    e.channel.onmessage = function () { … };
+};</pre>
+
+<p>Le canal est disponible dans l’objet événement passé dans le descripteur en tant que <code>e.channel</code>.</p>
+
+<h4 id="send"><strong><code>send()</code></strong></h4>
+
+<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre>
+
+<p>Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.</p>
+
+<h4 id="close"><strong><code>close()</code></strong></h4>
+
+<p>Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page.</p>
+
+<h2 id="Media">Media</h2>
+
+<p>Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag <code>&lt;video&gt;</code> dans le document avec l'attribut <code>autoplay</code>.</p>
+
+<h3 id="Obtenir_les_médias_de_lutilisateur">Obtenir les médias de l'utilisateur</h3>
+
+<pre class="brush: js notranslate">&lt;video id="preview" autoplay&gt;&lt;/video&gt;
+
+var video = document.getElementById("preview");
+navigator.getUserMedia(mediaOptions, function (stream) {
+    video.src = URL.createObjectURL(stream);
+}, errorHandler);</pre>
+
+<p><strong><code>mediaOptions</code></strong></p>
+
+<p>Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var mediaOptions = {
+    video: true,
+    audio: true
+};</pre>
+
+<p>Si vous voulez juste une conversation audio, supprimez la clé <code>video</code>.</p>
+
+<h4 id="errorHandler_2"><strong><code>errorHandler</code></strong></h4>
+
+<p>Exécuté s'il y a une erreur retournée par le support demandé.</p>
+
+<h3 id="Événements_Médias_et_Méthodes">Événements Médias et Méthodes</h3>
+
+<h4 id="addStream"><strong><code>addStream</code></strong></h4>
+
+<p>Ajoute le flux de <code>getUserMedia</code> au PeerConnection.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre>
+
+<h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4>
+
+<pre class="brush: js notranslate">&lt;video id="otherPeer" autoplay&gt;&lt;/video&gt;
+
+var otherPeer = document.getElementById("otherPeer");
+pc.onaddstream = function (e) {
+    otherPeer.src = URL.createObjectURL(e.stream);
+};</pre>
+
+<p>Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec <code>addStream</code>. Vous avez besoin d'un autre tag <code>&lt;video&gt;</code> pour afficher les médias de l'autre pair.</p>
+
+<p>Le premier argument est un objet d'événement avec les flux de média de l'autre pair.</p>
+
+<h2 id="Afficher_la_Source">Afficher la Source</h2>
+
+<p>Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à <a href="http://github.com/louisstow/WebRTC">mon repo WebRTC</a>.</p>
+
+<ul>
+ <li>
+  <p><strong>Exemple de DataChannels :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/datachannels.html">code</a>, <a href="http://louisstow.github.io/WebRTC/datachannels.html">demo</a></p>
+ </li>
+ <li>
+  <p><strong>Exemple de média :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/media.html">code</a>, <a href="http://louisstow.github.io/WebRTC/media.html">demo</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.html b/files/fr/web/api/webrtc_api/taking_still_photos/index.html
new file mode 100644
index 0000000000..854d0dd3f7
--- /dev/null
+++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.html
@@ -0,0 +1,161 @@
+---
+title: Prendre des photos avec la webcam
+slug: WebRTC/Prendre_des_photos_avec_la_webcam
+tags:
+  - API
+  - Avancé
+  - WebRTC
+  - getusermedia
+translation_of: Web/API/WebRTC_API/Taking_still_photos
+---
+<h2 id="Introduction_et_demo">Introduction et demo</h2>
+<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/" title="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/" title="http://codepo8.github.com/interaction-cam/">en demo</a>.</p>
+<h2 id="Les_balises_HTML">Les balises HTML</h2>
+<p>La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.</p>
+<pre class="brush:html;">&lt;video id="video"&gt;&lt;/video&gt;
+&lt;button id="startbutton"&gt;Prendre une photo&lt;/button&gt;
+&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;img src="http://placekitten.com/g/320/261" id="photo" alt="photo"&gt;
+</pre>
+<h2 id="Le_script_complet">Le script complet</h2>
+<p>Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.</p>
+<pre class="brush:js;">(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+
+  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+
+  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+
+})();</pre>
+<h2 id="Les_explications_pas_à_pas.">Les explications pas à pas.</h2>
+<p>Voici ce qui se passe.</p>
+<h3 id="Fonction_anonyme">Fonction anonyme</h3>
+<pre class="brush:js;">(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;</pre>
+<p>Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.</p>
+<div class="warning">
+ <p>À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p>
+</div>
+<h3 id="Obtenir_la_vidéo">Obtenir la vidéo</h3>
+<p>Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:</p>
+<pre class="brush:js;">  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);</pre>
+<p>Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:</p>
+<pre class="brush:js;">  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );</pre>
+<p>Firefox Nightly nécessite de définir la propriété <code>mozSrcObject</code> de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut <code>src</code>. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.</p>
+<h3 id="Redimensionner_la_vidéo">Redimensionner la vidéo</h3>
+<p>Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.</p>
+<pre class="brush:js;">  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);</pre>
+<p>Nous nous abonnons à l'évènement <code>canplay</code> de la vidéo et lisons ses dimensions en utilisant <code>videoHeight</code> et <code>videoWidth</code>. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons <code>streaming</code> à true pour faire cette vérification une seule fois vu que l'évènement <code>canplay</code> se déclenchera à répétition.</p>
+<p>C'est tout ce qu'il faut pour jouer la vidéo.</p>
+<h3 id="Prendre_une_photo">Prendre une photo</h3>
+<p>Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction <code>takepicture</code> function.</p>
+<pre class="brush:js;">  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);</pre>
+<p>Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface,  et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.</p>
+<pre class="brush:js;">  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+})();</pre>
+<p>C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.</p>
+<h2 id="Support">Support</h2>
+<p>Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:</p>
+<ul>
+ <li>Entrez "about:config" dans la barre d'adresse et confirmez les changements</li>
+ <li>Trouver l'entrée "media.navigator.enabled" et positionnez la à true</li>
+</ul>
diff --git a/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html
index 36b68601ff..36b68601ff 100644
--- a/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html
+++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html
diff --git a/files/fr/web/api/window/afterprint_event/index.html b/files/fr/web/api/window/afterprint_event/index.html
new file mode 100644
index 0000000000..bb62ef775d
--- /dev/null
+++ b/files/fr/web/api/window/afterprint_event/index.html
@@ -0,0 +1,63 @@
+---
+title: afterprint
+slug: Web/Events/afterprint
+translation_of: Web/API/Window/afterprint_event
+---
+<p>L'événement <strong>afterprint</strong> est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/beforeprint">beforeprint</a></li>
+</ul>
diff --git a/files/fr/web/api/window/beforeprint_event/index.html b/files/fr/web/api/window/beforeprint_event/index.html
new file mode 100644
index 0000000000..970bfb6580
--- /dev/null
+++ b/files/fr/web/api/window/beforeprint_event/index.html
@@ -0,0 +1,74 @@
+---
+title: beforeprint
+slug: Web/Events/beforeprint
+tags:
+  - Evènement
+  - Reference
+translation_of: Web/API/Window/beforeprint_event
+---
+<p>L'événement <code><strong>beforeprint</strong></code> est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En utilisant <code>window.addEventListener()</code> :</p>
+
+<pre class="notranslate">window.addEventListener("beforeprint", (evenement) =&gt; {
+  console.log("Before print");
+});</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/afterprint">afterprint</a></li>
+</ul>
diff --git a/files/fr/web/api/window/beforeunload_event/index.html b/files/fr/web/api/window/beforeunload_event/index.html
new file mode 100644
index 0000000000..c0b22cfb83
--- /dev/null
+++ b/files/fr/web/api/window/beforeunload_event/index.html
@@ -0,0 +1,139 @@
+---
+title: beforeunload
+slug: Web/Events/beforeunload
+translation_of: Web/API/Window/beforeunload_event
+---
+<p>L'événement <strong><code>beforeunload</code></strong> est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.</p>
+
+<p>Lorsqu'une chaîne de caractères est assignée à la propriété <code>returnValue</code> de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires <code>beforeunload</code>.</p>
+</div>
+
+<div class="warning">
+<p> Attacher un gestionnaire d'événement <code>beforeunload</code> à <code>window</code> ou à <code>document</code> empêche les navigateurs d'utiliser leur mémoire cache ; consulter <a href="https://developer.mozilla.org/fr/docs/Utilisation_du_cache_de_Firefox_1.5">Utilisation du cache de Firefox 1.5</a> ou <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a> (en anglais).</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Propagation</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Annulable</td>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <td>Object cible</td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readOnlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Est-ce que l'événement se propage ?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readOnlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Est-il possible d'annuler l'événement ?</td>
+  </tr>
+  <tr>
+   <td><code>returnValue</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>La valeur de retour de l'événement (le message à afficher à l'utlisateur)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// est équivalent à
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});</pre>
+
+<p>Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:</p>
+
+<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome &lt;34
+});</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}.</p>
+
+<p>Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">specification HTML5 </a> pour plus de détails.</p>
+
+<p>Noter aussi que de nombreux navigateurs ignorent le résultat  de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans <a>about:config</a> pour faire de même. <span id="result_box" lang="fr"><span>Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement</span></span><span lang="fr"><span> que le document peut être déchargé.</span></span></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+ <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51</a></li>
+</ul>
diff --git a/files/fr/web/api/window/devicemotion_event/index.html b/files/fr/web/api/window/devicemotion_event/index.html
new file mode 100644
index 0000000000..8d58d934f4
--- /dev/null
+++ b/files/fr/web/api/window/devicemotion_event/index.html
@@ -0,0 +1,97 @@
+---
+title: devicemotion
+slug: FUEL/Window/devicemotion_event
+translation_of: Web/API/Window/devicemotion_event
+---
+<p>L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">DeviceMotionEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/API/EventTarget" title="EventTarget est une interface implémentée par des objets qui peuvent recevoir des évènements et avoir des auditeurs."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/API/DOMString" title="Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, DOMString est directement associé à String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>acceleration</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/API/DeviceAcceleration" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DeviceAcceleration</code></a></td>
+   <td>The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.</td>
+  </tr>
+  <tr>
+   <td><code>accelerationIncludingGravity </code><span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/API/DeviceAcceleration" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DeviceAcceleration</code></a></td>
+   <td>The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.</td>
+  </tr>
+  <tr>
+   <td><code>interval</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td>double</td>
+   <td>The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.</td>
+  </tr>
+  <tr>
+   <td><code>rotationRate</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/API/DeviceRotationRate" title="Un objet DeviceRotationRate fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes."><code>DeviceRotationRate</code></a></td>
+   <td>The rates of rotation of the device about all three axes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">function handleMotionEvent(event) {
+
+    var x = event.accelerationIncludingGravity.x;
+    var y = event.accelerationIncludingGravity.y;
+    var z = event.accelerationIncludingGravity.z;
+
+    // Faire quelque chose de génial.
+}
+
+window.addEventListener("devicemotion", handleMotionEvent, true);
+</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla_event_reference/deviceorientation"><code>deviceorientation</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/deviceorientation_event/index.html b/files/fr/web/api/window/deviceorientation_event/index.html
new file mode 100644
index 0000000000..2bae31987e
--- /dev/null
+++ b/files/fr/web/api/window/deviceorientation_event/index.html
@@ -0,0 +1,176 @@
+---
+title: deviceorientation
+slug: FUEL/Window/deviceorientation
+translation_of: Web/API/Window/deviceorientation_event
+---
+<p>L'événement <strong><code>deviceorientation</code></strong> est déclenché lorsque de nouvelles données sont disponibles à partir d'un capteur d'orientation à propos de l'orientation actuelle du dispositif par rapport à la trame de coordonnées terrestres. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir <a href="/fr/docs/DOM/Orientation_and_motion_data_explained">explications sur les données de mouvements et d'orientations</a> pour plus de détails.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#deviceorientation">DeviceOrientation Event</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">DeviceOrientationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/API/EventTarget" title="EventTarget est une interface implémentée par des objets qui peuvent recevoir des évènements et avoir des auditeurs."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/API/DOMString" title="Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, DOMString est directement associé à String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>alpha</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.</td>
+  </tr>
+  <tr>
+   <td><code>beta</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.</td>
+  </tr>
+  <tr>
+   <td><code>gamma</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td>double (float)</td>
+   <td>The current orientation of the device around the Y axis; that is, how far the device is turned left or right.</td>
+  </tr>
+  <tr>
+   <td><code>absolute</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>boolean</code></a></td>
+   <td>This value is <code>true</code> if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is <code>false</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="pass: js">if (window.DeviceOrientationEvent) {
+    window.addEventListener("deviceorientation", function(event) {
+        // alpha: rotation around z-axis
+        var rotateDegrees = event.alpha;
+        // gamma: left to right
+        var leftToRight = event.gamma;
+        // beta: front back motion
+        var frontToBack = event.beta;
+
+        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
+    }, true);
+}
+
+var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
+    // Faire quelque chose d'étonnant
+};
+</pre>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p></p><div class="blockIndicator warning"><strong><a href="https://github.com/mdn/browser-compat-data">Nous convertissons les données de compatibilité dans un format JSON</a></strong>.
+            Ce tableau de compatibilité utilise encore l'ancien format
+            car nous n'avons pas encore converti les données qu'il contient.
+            <strong><a href="/fr/docs/MDN/Contribute/Structures/Compatibility_tables">Vous pouvez nous aider en contribuant !</a></strong></div>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Ordinateur</a></li>
+        <li><a>Mobile</a></li>
+    </ul>
+</div><p></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>7.0</td>
+   <td>3.6<sup>[1]</sup></td>
+   <td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
+   <td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
+   <td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>3.0</td>
+   <td>3.6<sup>[1]</sup></td>
+   <td><span style="color: #f00;">Pas de support</span></td>
+   <td>12</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 3.6, 4, et 5 a supporté <a href="/frdocs/Web/Events/MozOrientation">mozOrientation</a> contre l'événement standard <strong><code>DeviceOrientation</code></strong>.</p>
+
+<h2 id="Evénements_lilés">Evénements lilés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Events/devicemotion"><code>devicemotion</code></a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/DeviceMotionEvent" title="The DeviceMotionEvent provides web developers with information about the speed of changes for the device's position and orientation."><code>DeviceMotionEvent</code></a></li>
+ <li><a href="/fr/docs/Web/API/Window/ondeviceorientation" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>window.ondeviceorientation</code></a></li>
+ <li><a href="/fr/docs/Web/API/Detecting_device_orientation">Détection de l'orientation du dispositif</a></li>
+ <li><a href="/fr/docs/DOM/Orientation_and_motion_data_explained">Explications sur les données de mouvements et d'orientations</a></li>
+ <li>Simulation d'événements d'orientation sur navigateur de bureau avec  <a href="http://louisremi.github.com/orientation-devtool/">orientation-devtool</a></li>
+</ul>
diff --git a/files/fr/web/api/window/domcontentloaded_event/index.html b/files/fr/web/api/window/domcontentloaded_event/index.html
new file mode 100644
index 0000000000..ce6a198e3e
--- /dev/null
+++ b/files/fr/web/api/window/domcontentloaded_event/index.html
@@ -0,0 +1,84 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p>L’évènement <strong><code>DOMContentLoaded</code></strong> est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestion de l’évènement</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface <code>Window</code> pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}.</p>
+
+<p>L’évènement <a href="/fr/docs/Web/Events/load" title="/fr/docs/Mozilla_event_reference/load"><code>load</code></a>, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser <a href="/fr/docs/Web/Events/load" title="/fr/docs/Mozilla_event_reference/load"> <code>load</code> </a>là où <code>DOMContentLoaded</code> serait beaucoup plus approprié.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le JavaScript synchrone interromp l’analyse du DOM.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.</p>
+</div>
+
+<h2 id="Accélérer">Accélérer</h2>
+
+<p>Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">rendre votre JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimiser le chargement des feuilles de style</a>. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_basique">Utilisation basique</h3>
+
+<pre class="brush: js">window.addEventListener("DOMContentLoaded", (event) =&gt; {
+    console.log("DOM entièrement chargé et analysé");
+  });
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></p>
+</div>
+
+<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}}</li>
+ <li>Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/load_event/index.html b/files/fr/web/api/window/load_event/index.html
new file mode 100644
index 0000000000..53672aa244
--- /dev/null
+++ b/files/fr/web/api/window/load_event/index.html
@@ -0,0 +1,92 @@
+---
+title: load
+slug: Web/Events/load
+tags:
+  - Event
+  - Window
+translation_of: Web/API/Window/load_event
+---
+<p>L’évènement <code>load</code> est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt>Spécification</dt>
+ <dd><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt>Interface</dt>
+ <dd>UIEvent</dd>
+ <dt>Bouillonne</dt>
+ <dd>Non</dd>
+ <dt>Annulable</dt>
+ <dd>Non</dd>
+ <dt>Cible</dt>
+ <dd>Document, Element</dd>
+ <dt>Action par défaut</dt>
+ <dd>Aucune.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>target</td>
+   <td><a href="/fr/docs/Web/API/EventTarget">EventTarget</a></td>
+   <td>La cible de l’évènement (la cible la plus haute dans l’arbre <a href="/fr/docs/Comment_cr%C3%A9er_un_arbre_DOM">DOM</a>)</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td><a href="/fr/docs/Web/API/DOMString">DOMString</a></td>
+   <td>Le type de l’évènement</td>
+  </tr>
+  <tr>
+   <td>bubbles</td>
+   <td>boolean</td>
+   <td>Si l’évènement bouillonne ou non</td>
+  </tr>
+  <tr>
+   <td>cancelable</td>
+   <td>boolean</td>
+   <td>Si l’évènement est annulable ou non</td>
+  </tr>
+  <tr>
+   <td>view</td>
+   <td><a href="/fr/docs/Web/API/WindowProxy">WindowProxy</a></td>
+   <td><a href="/fr/docs/Web/API/Document/defaultView">document.defaultView</a> (la fenêtre du document)</td>
+  </tr>
+  <tr>
+   <td>detail</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div>
+<pre>&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("Toutes les ressources sont chargées !");
+  });
+&lt;/script&gt;</pre>
+</div>
+
+<h2 id="Évènements_liés">Évènements liés</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/onresize/index.html b/files/fr/web/api/window/onresize/index.html
deleted file mode 100644
index d2c0d6304f..0000000000
--- a/files/fr/web/api/window/onresize/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: window.onresize
-slug: Web/API/Window/onresize
-tags:
-  - API
-  - DOM
-  - Gestionnaires d'évènements
-  - Propriété
-  - évènements
-translation_of: Web/API/GlobalEventHandlers/onresize
----
-<p>{{ ApiRef() }}</p>
-
-<p>La propriété <code><strong>GlobalEventHandlers.onresize</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements)</em> qui survient quand un évènement {{event("resize")}} est reçu.</p>
-
-<h2 id="Syntax" name="Syntax">Syntaxe</h2>
-
-<pre class="eval">window.onresize = <em>funcRef</em>;
-</pre>
-
-<h3 id="Parameters" name="Parameters">Paramètres</h3>
-
-<ul>
- <li><code>funcRef</code> est une référence à une fonction.</li>
-</ul>
-
-<h2 id="Example" name="Example">Exemple</h2>
-
-<pre>window.onresize = doFunc;
-</pre>
-
-<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>onresize test<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Resize the browser window to fire the resize event.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Window height: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>height<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Window width: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
-  <span class="keyword token">var</span> heightOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#height'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">var</span> widthOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#width'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-
-  <span class="keyword token">function</span> <span class="function token">resize</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    heightOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerHeight<span class="punctuation token">;</span>
-    widthOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerWidth<span class="punctuation token">;</span>
-  <span class="punctuation token">}</span>
-
-  window<span class="punctuation token">.</span>onresize <span class="operator token">=</span> resize<span class="punctuation token">;</span>
-</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<h2 id="Notes" name="Notes">Notes</h2>
-
-<p>L’événement <code>resize</code> est déclenché après le redimensionnement de la fenêtre.</p>
-
-<h2 id="Specification" name="Specification">Spécification</h2>
-
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/api/window/pagehide_event/index.html b/files/fr/web/api/window/pagehide_event/index.html
new file mode 100644
index 0000000000..8971ae1044
--- /dev/null
+++ b/files/fr/web/api/window/pagehide_event/index.html
@@ -0,0 +1,69 @@
+---
+title: pagehide
+slug: Web/Events/pagehide
+translation_of: Web/API/Window/pagehide_event
+---
+<p>L’évènement <code>pagehide</code> est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 160px;">Spécification</dt>
+ <dd style="margin: 0 0 0 160px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide" lang="en-US">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Interface</dt>
+ <dd style="margin: 0 0 0 160px;"><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Bouillonne</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Annulable</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Cible</dt>
+ <dd style="margin: 0 0 0 160px;">Document (dispatché sur Window)</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 160px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés" style="">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne en temps normal ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>persisted</code> {{readonlyInline}}</td>
+   <td>{{jsxref("boolean")}}</td>
+   <td>Si l’entrée est chargée depuis le cache ou non.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Évènements_liés">Évènements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Events/pageshow"><code>pageshow</code></a></li>
+ <li><a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pagehide">Utilisation du cache de Firefox 1.5 — L’évènement pagehide</a></li>
+</ul>
diff --git a/files/fr/web/api/window/pageshow_event/index.html b/files/fr/web/api/window/pageshow_event/index.html
new file mode 100644
index 0000000000..ba9e55f03e
--- /dev/null
+++ b/files/fr/web/api/window/pageshow_event/index.html
@@ -0,0 +1,132 @@
+---
+title: pageshow
+slug: Web/Events/pageshow
+translation_of: Web/API/Window/pageshow_event
+---
+<p>L’évènement <code>pageshow</code> est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement <code>onload</code>).</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 160px;">Spécification</dt>
+ <dd style="margin: 0 0 0 160px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow" lang="en-US">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Interface</dt>
+ <dd style="margin: 0 0 0 160px;"><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Bouillonne</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Annulable</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Cible</dt>
+ <dd style="margin: 0 0 0 160px;">Document (dispatché sur Window)</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 160px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés" style="">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne en temps normal ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>persisted</code> {{readonlyInline}}</td>
+   <td>{{jsxref("boolean")}}</td>
+   <td>Si l’entrée est chargée depuis le cache ou non.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L’exemple suivant va afficher dans la console des informations sur l’évènement <code>pageshow</code>, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après <code>onload</code> :</p>
+
+<pre class="brush: js">window.addEventListener('pageshow', function(event) {
+    console.log('pageshow:');
+    console.log(event);
+});</pre>
+
+<p>Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise <code>&lt;body&gt;</code>, de la même manière que <code>onload</code> :</p>
+
+<pre class="brush: html">&lt;body onload="myonload()" onpageshow="mypageshowcode()"&gt;</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Évènements_liés">Évènements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Events/pagehide"><code>pagehide</code></a></li>
+ <li><a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pageshow">Utilisation du cache de Firefox 1.5 — L’évènement pageshow</a></li>
+</ul>
diff --git a/files/fr/web/api/window/unload_event/index.html b/files/fr/web/api/window/unload_event/index.html
new file mode 100644
index 0000000000..676b6187e3
--- /dev/null
+++ b/files/fr/web/api/window/unload_event/index.html
@@ -0,0 +1,156 @@
+---
+title: unload
+slug: Web/Events/unload
+tags:
+  - JavaScript
+  - events
+translation_of: Web/API/Window/unload_event
+---
+<p><br>
+ <span class="seoSummary">L'événement <code>unload</code> est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.</span></p>
+
+<p>Il est lancé après :</p>
+
+<ol>
+ <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (événement annulable)</li>
+ <li><a href="/en-US/docs/Mozilla_event_reference/pagehide" title="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li>
+</ol>
+
+<p>Le document se trouve alors dans un état particulier :</p>
+
+<ul>
+ <li>Toutes les ressources existent encore (img, iframe etc.)</li>
+ <li>Plus rien n'est encore visible par l'utilisateur final</li>
+ <li>Les intéractions avec l'interface sont désactivées (<code>window.open</code>, <code>alert</code>, <code>confirm</code>, etc.)</li>
+ <li>Aucune erreur ne viendra interrompre le flux de déchargement.</li>
+</ul>
+
+<p>Veuiller noter que l'événement <code>unload</code> suit l'ordre du document : le cadre parent est déchargé <em>avant</em> le <code>unload</code> d'un cadre enfant (voir l'exemple ci-dessous).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Événement propageable</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Annulable</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Objets cibles</td>
+   <td>defaultView, Document, Element</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("UIEvent")}} si généré depuis un élément de l'interface utilisateur, {{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <td>Action par défaut</td>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>La cible de l'événement (la cible de plus haut niveau dans le DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>Le type d'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si l'événement remonte ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si l'événement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>fenêtre</code> du document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Cadre parent&lt;/title&gt;
+    &lt;script&gt;
+      window.addEventListener('beforeunload', function(event) {
+        console.log('Je suis le 1er.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('Je suis le 3ème.');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe src="child-frame.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ci-dessous, le contenu de <code>child-frame.html</code>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Cadre enfant&lt;/title&gt;
+    &lt;script&gt;
+      window.addEventListener('beforeunload', function(event) {
+        console.log('Je suis le 2nd.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('Je suis le 4ème et dernier…');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      ☻
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages <code>console.log</code>.</p>
+
+<h2 id="Événements_liés">Événements liés</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#unload-a-document">Unloading Documents — unload a document</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">Event Module Definition — unload</a></li>
+</ul>
diff --git a/files/fr/web/api/window/url/index.html b/files/fr/web/api/window/url/index.html
deleted file mode 100644
index 223701977c..0000000000
--- a/files/fr/web/api/window/url/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Window.URL
-slug: Web/API/Window/URL
-translation_of: Web/API/URL
-translation_of_original: Web/API/Window/URL
----
-<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p>
-
-<p>La propriété <strong><code>Window.URL</code></strong> retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<p>Utilisation de la méthode statique:</p>
-
-<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre>
-
-<p>Utilisation d'un objet instancié:</p>
-
-<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre>
-
-<h2 id="Specification">Specification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#dom-url', 'URL')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>8.0<sup>[2]</sup></td>
-   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br>
-    {{CompatGeckoDesktop("19.0")}}</td>
-   <td>10.0</td>
-   <td>15.0<sup>[2]</sup></td>
-   <td>6.0<sup>[2]</sup><br>
-    7.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
-   <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br>
-    {{CompatGeckoMobile("19.0")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>15.0<sup>[2]</sup></td>
-   <td>6.0<sup>[2]</sup></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard <code>nsIDOMMozURLProperty</code> internal type. In practice, this didn't make any difference.</p>
-
-<p>[2] Implemented under the non-standard name <code>webkitURL</code>.</p>
diff --git a/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html
deleted file mode 100644
index ae762bf333..0000000000
--- a/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html
+++ /dev/null
@@ -1,343 +0,0 @@
----
-title: Décoder et encoder en base64
-slug: Web/API/WindowBase64/Décoder_encoder_en_base64
-tags:
-  - Advanced
-  - Base64
-  - JavaScript
-  - Reference
-  - Typed Arrays
-  - URI
-  - URL
-  - Unicode Problem
-  - atob()
-  - btoa()
-translation_of: Glossary/Base64
----
-<p><strong>Base64</strong> est un groupe de schéma pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains <a href="https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding">contenus MIME</a>.</p>
-
-<p>Les schémas d'encodage en base64 sont principalement utilisés lorsqu'il s'agit d'enregistrer ou d'envoyer des données binaires via un media qui a été conçu pour gérer du texte. Cette transformation permet de conserver l'intégrité et la véracité des données envoyées lors du transport. Base64 est utilisé par plusieurs applications, notamment celles qui gèrent les courriels avec <a href="https://fr.wikipedia.org/wiki/MIME">MIME</a>, et le stockage de données complexes en <a href="/fr/docs/XML">XML</a>.</p>
-
-<p>Pour JavaScript, il existe deux fonctions utilisées pour encoder et décoder des chaînes en base64 :</p>
-
-<ul>
- <li>{{domxref("window.atob","atob()")}}</li>
- <li>{{domxref("window.btoa","btoa()")}}</li>
-</ul>
-
-<p>La fonction <code>atob()</code> permet de décoder des données encodées en une chaîne de caractères en base 64. La fonction <code>btoa()</code>, quant à elle, permet de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</p>
-
-<p>Les deux méthodes, <code>atob()</code> et <code>btoa()</code>, fonctionnent sur des chaînes de caractères. Si vous voulez utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffers</code></a>, lisez <a href="#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8">ce paragraphe</a>.</p>
-
-<table class="topicpage-table">
- <tbody>
-  <tr>
-   <td>
-    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
-
-    <dl>
-     <dt><a href="/fr/docs/Web/HTTP/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs">URIs de données</a></dt>
-     <dd><small>Les URIs de données, définies par la <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents.</small></dd>
-     <dt><a href="https://fr.wikipedia.org/wiki/Base_64" title="https://fr.wikipedia.org/wiki/Base_64">Base64</a></dt>
-     <dd><small>Article Wikipédia sur l'encodage en base64.</small></dd>
-     <dt>{{domxref("window.atob","atob()")}}</dt>
-     <dd><small>Méthode permettant de décoder une chaîne de donnée qui a été encodée en base64.</small></dd>
-     <dt>{{domxref("window.btoa","btoa()")}}</dt>
-     <dd><small>Méthode permettant de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</small></dd>
-     <dt><a href="#The_.22Unicode_Problem.22">Le « problème Unicode »</a></dt>
-     <dd><small>Pour la plupart des navigateurs, l'utilisation de <code>btoa()</code> sur une chaîne de caractères Unicode entraînera une exception <code>Character Out Of Range</code>. Ce paragraphe indique quelques solutions.</small></dd>
-     <dt><a href="/fr/docs/URIScheme" title="/fr/docs/URIScheme">URIScheme</a></dt>
-     <dd><small>Une liste de schémas URI supportés par Mozilla</small>.</dd>
-     <dt><a href="/fr/Add-ons/Code_snippets/StringView" title="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a></dt>
-     <dd>Dans cet article, nous publions une bibliothèque dont les buts sont :
-     <ul>
-      <li>de créer une interface pour les chaînes de caractères à la façon du langage <a class="external" href="https://fr.wikipedia.org/wiki/C_%28langage%29" title="https://fr.wikipedia.org/wiki/C_%28langage%29">C</a> (i.e. un tableau de code de caractères —<a href="/fr/docs/Web/API/ArrayBufferView" title="/fr/docs/Web/API/ArrayBufferView"> <code>ArrayBufferView</code></a> en JavaScript) basée sur l'interface JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffer</code></a>,</li>
-      <li>de créer un ensemble de méthodes pour ces objets qui fonctionnent <strong>sur des tableaux de nombres</strong> plutôt que sur chaînes de caractères JavaScript immuables,</li>
-      <li>de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les <a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</li>
-     </ul>
-     </dd>
-    </dl>
-
-    <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p>
-   </td>
-   <td>
-    <h2 class="Tools" id="Tools" name="Tools">Outils</h2>
-
-    <ul>
-     <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Réécrire <code>atob()</code>et <code>btoa()</code> en utilisant des <code>TypedArray</code>s et l'UTF-8</a></li>
-     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés.</a></li>
-    </ul>
-
-    <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p>
-
-    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets connexes</h2>
-
-    <ul>
-     <li><a href="/fr/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li>
-     <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li>
-     <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li>
-     <li><a href="/fr/docs/Web/API/Uint8Array"><code>Uint8Array</code></a></li>
-     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></li>
-     <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li>
-     <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li>
-     <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li>
-    </ul>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Le_«_problème_Unicode_»">Le « problème Unicode »</h2>
-
-<p>Les objets <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> sont des chaînes de caractères encodées sur 16 bits. Pour la plupart des navigateurs, lorsqu'on appelle <code>window.btoa</code> sur une chaîne Unicode, cela entraîne une exception <code>Character Out Of Range</code> si la représentation du caractère dépasse les 8 bits ASCII. Deux méthodes existent pour résoudre le problème :</p>
-
-<ul>
- <li>échapper la chaîne dans son intégralité puis l'encoder,</li>
- <li>convertir la chaîne UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> en un tableau UTF-8 de caractères puis l'encoder.</li>
-</ul>
-
-<p>Voici ces deux méthodes :</p>
-
-<h3 id="Première_solution_–_échapper_la_chaîne_avant_de_lencoder">Première solution  – échapper la chaîne avant de l'encoder</h3>
-
-<pre class="brush:js notranslate">function utf8_to_b64( str ) {
-  return window.btoa(unescape(encodeURIComponent( str )));
-}
-
-function b64_to_utf8( str ) {
-  return decodeURIComponent(escape(window.atob( str )));
-}
-
-// Usage:
-utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
-b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</pre>
-
-<p>Cette solution a été proposée dans un article de <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>.</p>
-
-<h3 id="Seconde_solution_–_réécrire_atob_et_btoa_en_utilisant_des_TypedArray_avec_de_lUTF-8">Seconde solution – réécrire <code>atob()</code> et <code>btoa()</code> en utilisant des <code>TypedArray</code> avec de l'UTF-8</h3>
-
-<div class="note"><strong>Note :</strong> Le code suivant peut également être utilisé pour obtenir un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a> depuis une chaîne en base 64 (et vice-versa, voir ci-après). <strong>Pour un article concernant une bibliothèque complète sur les tableaux typés, voir <a href="/fr/Add-ons/Code_snippets/StringView" title="/fr/Add-ons/Code_snippets/StringView">cet article</a></strong>.</div>
-
-<pre class="brush: js notranslate">"use strict";
-
-/*\
-|*|
-|*|  utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8
-|*|
-|*|  https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64
-|*|
-\*/
-
-/* Décoder un tableau d'octets depuis une chaîne en base64 */
-
-function b64ToUint6 (nChr) {
-
-  return nChr &gt; 64 &amp;&amp; nChr &lt; 91 ?
-      nChr - 65
-    : nChr &gt; 96 &amp;&amp; nChr &lt; 123 ?
-      nChr - 71
-    : nChr &gt; 47 &amp;&amp; nChr &lt; 58 ?
-      nChr + 4
-    : nChr === 43 ?
-      62
-    : nChr === 47 ?
-      63
-    :
-      0;
-
-}
-
-function base64DecToArr (sBase64, nBlocksSize) {
-
-  var
-    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
-    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 &gt;&gt; 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 &gt;&gt; 2, taBytes = new Uint8Array(nOutLen);
-
-  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx &lt; nInLen; nInIdx++) {
-    nMod4 = nInIdx &amp; 3;
-    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) &lt;&lt; 18 - 6 * nMod4;
-    if (nMod4 === 3 || nInLen - nInIdx === 1) {
-      for (nMod3 = 0; nMod3 &lt; 3 &amp;&amp; nOutIdx &lt; nOutLen; nMod3++, nOutIdx++) {
-        taBytes[nOutIdx] = nUint24 &gt;&gt;&gt; (16 &gt;&gt;&gt; nMod3 &amp; 24) &amp; 255;
-      }
-      nUint24 = 0;
-
-    }
-  }
-
-  return taBytes;
-}
-
-/* encodage d'un tableau en une chaîne en base64 */
-
-function uint6ToB64 (nUint6) {
-
-  return nUint6 &lt; 26 ?
-      nUint6 + 65
-    : nUint6 &lt; 52 ?
-      nUint6 + 71
-    : nUint6 &lt; 62 ?
-      nUint6 - 4
-    : nUint6 === 62 ?
-      43
-    : nUint6 === 63 ?
-      47
-    :
-      65;
-
-}
-
-function base64EncArr (aBytes) {
-
-  var nMod3 = 2, sB64Enc = "";
-
-  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx &lt; nLen; nIdx++) {
-    nMod3 = nIdx % 3;
-    if (nIdx &gt; 0 &amp;&amp; (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
-    nUint24 |= aBytes[nIdx] &lt;&lt; (16 &gt;&gt;&gt; nMod3 &amp; 24);
-    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
-      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 &gt;&gt;&gt; 18 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 12 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 6 &amp; 63), uint6ToB64(nUint24 &amp; 63));
-      nUint24 = 0;
-    }
-  }
-
-  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
-
-}
-
-/* Tableau UTF-8 en DOMString et vice versa */
-
-function UTF8ArrToStr (aBytes) {
-
-  var sView = "";
-
-  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx &lt; nLen; nIdx++) {
-    nPart = aBytes[nIdx];
-    sView += String.fromCharCode(
-      nPart &gt; 251 &amp;&amp; nPart &lt; 254 &amp;&amp; nIdx + 5 &lt; nLen ? /* six bytes */
-        /* (nPart - 252 &lt;&lt; 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */
-        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
-      : nPart &gt; 247 &amp;&amp; nPart &lt; 252 &amp;&amp; nIdx + 4 &lt; nLen ? /* five bytes */
-        (nPart - 248 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
-      : nPart &gt; 239 &amp;&amp; nPart &lt; 248 &amp;&amp; nIdx + 3 &lt; nLen ? /* four bytes */
-        (nPart - 240 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
-      : nPart &gt; 223 &amp;&amp; nPart &lt; 240 &amp;&amp; nIdx + 2 &lt; nLen ? /* three bytes */
-        (nPart - 224 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
-      : nPart &gt; 191 &amp;&amp; nPart &lt; 224 &amp;&amp; nIdx + 1 &lt; nLen ? /* two bytes */
-        (nPart - 192 &lt;&lt; 6) + aBytes[++nIdx] - 128
-      : /* nPart &lt; 127 ? */ /* one byte */
-        nPart
-    );
-  }
-
-  return sView;
-
-}
-
-function strToUTF8Arr (sDOMStr) {
-
-  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
-
-  /* mapping... */
-
-  for (var nMapIdx = 0; nMapIdx &lt; nStrLen; nMapIdx++) {
-    nChr = sDOMStr.charCodeAt(nMapIdx);
-    nArrLen += nChr &lt; 0x80 ? 1 : nChr &lt; 0x800 ? 2 : nChr &lt; 0x10000 ? 3 : nChr &lt; 0x200000 ? 4 : nChr &lt; 0x4000000 ? 5 : 6;
-  }
-
-  aBytes = new Uint8Array(nArrLen);
-
-  /* transcription... */
-
-  for (var nIdx = 0, nChrIdx = 0; nIdx &lt; nArrLen; nChrIdx++) {
-    nChr = sDOMStr.charCodeAt(nChrIdx);
-    if (nChr &lt; 128) {
-      /* one byte */
-      aBytes[nIdx++] = nChr;
-    } else if (nChr &lt; 0x800) {
-      /* two bytes */
-      aBytes[nIdx++] = 192 + (nChr &gt;&gt;&gt; 6);
-      aBytes[nIdx++] = 128 + (nChr &amp; 63);
-    } else if (nChr &lt; 0x10000) {
-      /* three bytes */
-      aBytes[nIdx++] = 224 + (nChr &gt;&gt;&gt; 12);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &amp; 63);
-    } else if (nChr &lt; 0x200000) {
-      /* four bytes */
-      aBytes[nIdx++] = 240 + (nChr &gt;&gt;&gt; 18);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &amp; 63);
-    } else if (nChr &lt; 0x4000000) {
-      /* five bytes */
-      aBytes[nIdx++] = 248 + (nChr &gt;&gt;&gt; 24);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &amp; 63);
-    } else /* if (nChr &lt;= 0x7fffffff) */ {
-      /* six bytes */
-      aBytes[nIdx++] = 252 + /* (nChr &gt;&gt;&gt; 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 24 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
-      aBytes[nIdx++] = 128 + (nChr &amp; 63);
-    }
-  }
-
-  return aBytes;
-
-}
-</pre>
-
-<h4 id="Tests">Tests</h4>
-
-<pre class="brush: js notranslate">/* Tests */
-
-var entréeChaîne = "base64 \u2014 Mozilla Developer Network";
-
-var entréeUTF8 = strToUTF8Arr(entréeChaîne);
-
-var base64 = base64EncArr(entréeUTF8);
-
-alert(base64);
-
-var sortieUT8 = base64DecToArr(base64);
-
-var sortieChaîne = UTF8ArrToStr(sortieUT8);
-
-alert(sortieChaîne);</pre>
-
-<h4 id="Annexe_Décoder_une_chaîne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">Annexe : Décoder une chaîne en base64 en un objet <a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></h4>
-
-<p>Ces fonctions permettent de créer des objets <a href="/fr/docs/Web/API/Uint8Array">uint8Arrays</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">arrayBuffers</a> à partir de chaînes en base64 :</p>
-
-<pre class="brush: js notranslate">var monTableau = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
-
-var monBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
-
-alert(monBuffer.byteLength);</pre>
-
-<div class="note"><strong>Note :</strong> La fonction <code>base64DecToArr(sBase64[, <em>nTailleBloc</em>])</code> renvoie un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument <code>nTailleBloc</code>, qui représente le nombre d'octets dont la propriété <code>uint8Array.buffer.bytesLength</code> doit être un multiple (<code>1</code> ou pas de paramètre pour l'ASCII, <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">les chaînes binaires</a> ou les chaînes encodées UTF-8, <code>2</code> pour les chaînes UTF-16, <code>4</code> pour les chaînes UTF-32).</div>
-
-<p>Pour une bibliothèque plus complète, voir <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("window.atob","atob()")}}</li>
- <li>{{domxref("window.btoa","btoa()")}}</li>
- <li><a href="/fr/docs/Web/HTTP/data_URIs" title="/fr/docs/Web/HTTP/data_URIs">URIs de données </a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Tableaux typés</a></li>
- <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li>
- <li><a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes, basée sur les tableaux typés</a></li>
- <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString">DOMString</a></li>
- <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li>
- <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup" title="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup"><code>nsIURIFixup()</code></a></li>
- <li><a href="https://fr.wikipedia.org/wiki/Base64" title="https://fr.wikipedia.org/wiki/Base64">Article sur la base64 sur Wikipédia</a></li>
-</ul>
diff --git a/files/fr/web/api/windowbase64/atob/index.html b/files/fr/web/api/windoworworkerglobalscope/atob/index.html
index b04c255040..b04c255040 100644
--- a/files/fr/web/api/windowbase64/atob/index.html
+++ b/files/fr/web/api/windoworworkerglobalscope/atob/index.html
diff --git a/files/fr/web/api/windowbase64/btoa/index.html b/files/fr/web/api/windoworworkerglobalscope/btoa/index.html
index 7d993f35fa..7d993f35fa 100644
--- a/files/fr/web/api/windowbase64/btoa/index.html
+++ b/files/fr/web/api/windoworworkerglobalscope/btoa/index.html
diff --git a/files/fr/web/api/windowtimers/clearinterval/index.html b/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html
index 8041342b1d..8041342b1d 100644
--- a/files/fr/web/api/windowtimers/clearinterval/index.html
+++ b/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html
diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.html b/files/fr/web/api/xmlhttprequest/abort_event/index.html
new file mode 100644
index 0000000000..0585331ebe
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/abort_event/index.html
@@ -0,0 +1,89 @@
+---
+title: abort
+slug: Web/Events/abort_(ProgressEvent)
+translation_of: Web/API/XMLHttpRequest/abort_event
+---
+<p>L'événement <strong>abort</strong> est déclenché lorsque la progression a été interompue (Non causé par une erreur)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">ProgressEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>lengthComputable </code>{{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Specifies whether or not the total size of the transfer is known. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>loaded</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>total</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("loadstart")}}</li>
+ <li>{{event("progress")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("loadend")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Surveillance de la progression</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html
index fc3bb319ee..fc3bb319ee 100644
--- a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html
+++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html
diff --git a/files/fr/web/api/xmlserializer/index.html b/files/fr/web/api/xmlserializer/index.html
new file mode 100644
index 0000000000..feb76df6e0
--- /dev/null
+++ b/files/fr/web/api/xmlserializer/index.html
@@ -0,0 +1,54 @@
+---
+title: XMLSerializer
+slug: XMLSerializer
+tags:
+  - XML
+translation_of: Web/API/XMLSerializer
+---
+<p> </p>
+<p><code>XMLSerializer</code> sert à convertir des sous-arborescence DOM ou des documents DOM en texte. <code>XMLSerializer</code> est accessible aux scripts sans privilèges.</p>
+<div class="note">
+  <p><code>XMLSerializer</code> sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.</p>
+</div>
+<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3>
+<dl>
+  <dt>
+    serializeToString</dt>
+  <dd>
+    Retourne la sous-arborescence sérialisée sous la forme d'une chaîne de caractères</dd>
+  <dt>
+    serializeToStream</dt>
+  <dd>
+    La sous-arborescence débutant par l'élément spécifié est sérialisée en un flux d'octets en utilisant l'encodage de caractères indiqué.</dd>
+</dl>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval"> var s = new XMLSerializer();
+ var d = document;
+ var str = s.serializeToString(d);
+ alert(str);
+</pre>
+<pre class="eval"> var s = new XMLSerializer();
+ var stream = {
+   close : function()
+   {
+     alert("Flux fermé");
+   },
+   flush : function()
+   {
+   },
+   write : function(string, count)
+   {
+     alert("'" + string + "'\n nb d'octets : " + count + "");
+   }
+ };
+ s.serializeToStream(document, stream, "UTF-8");
+</pre>
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3>
+<ul>
+  <li><a class="external" href="http://www.xulplanet.com/references/objref/XMLSerializer.html">Reference (en)</a> (XULPlanet)</li>
+  <li><a href="fr/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+  <li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and serializing XML (en)</a> (XULPlanet)</li>
+  <li><a class="external" href="http://kb.mozillazine.org/Parsing_and_serializing_XML#Parsing_strings_into_DOM_trees">Parsing and serializing XML (en)</a> (MozillaZine)</li>
+  <li><a href="fr/XMLHttpRequest">XMLHttpRequest</a></li>
+  <li><a href="fr/DOMParser">DOMParser</a></li>
+</ul>
diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.html b/files/fr/web/api/xsltprocessor/basic_example/index.html
new file mode 100644
index 0000000000..8d78422777
--- /dev/null
+++ b/files/fr/web/api/xsltprocessor/basic_example/index.html
@@ -0,0 +1,65 @@
+---
+title: Exemple basique
+slug: XSLT_dans_Gecko/Exemple_basique
+translation_of: Web/API/XSLTProcessor/Basic_Example
+---
+<p></p><ol>
+<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li>
+</ol><p></p>
+
+<h2 id="Exemple_basique" name="Exemple_basique">Exemple basique</h2>
+
+<p>Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.</p>
+
+<p>La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xml) contient les informations à propos de l'article. En utilisant l'instruction de traitement <code>?xml-stylesheet?</code>, il est lié à la feuille de style XSLT (exemple.xsl) via son attribut <code>href</code>.</p>
+
+<p>Une feuille de style XSLT débute par l'élément <code>xsl:stylesheet</code>, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds <code>Author</code>. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via <code>apply-templates</code>) correspondant aux nœuds <code>Author</code> qui sont les descendants du nœud <code>Authors</code>.</p>
+
+<p>Figure 1 : exemple XSLT simple</p>
+
+<p>Document XML (exemple.xml) :</p>
+
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;?xml-stylesheet type="text/xsl" href="exemple.xsl"?&gt;
+  &lt;Article&gt;
+    &lt;Title&gt;Mon article&lt;/Title&gt;
+    &lt;Authors&gt;
+      &lt;Author&gt;M. Foo&lt;/Author&gt;
+      &lt;Author&gt;M. Bar&lt;/Author&gt;
+    &lt;/Authors&gt;
+    &lt;Body&gt;Ceci est le texte de mon article.&lt;/Body&gt;
+  &lt;/Article&gt;
+</pre>
+
+<p>Feuille de style XSL (exemple.xsl) :</p>
+
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
+
+    &lt;xsl:output method="text"/&gt;
+
+    &lt;xsl:template match="/"&gt;
+      Article - &lt;xsl:value-of select="/Article/Title"/&gt;
+      Auteurs : &lt;xsl:apply-templates select="/Article/Authors/Author"/&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="Author"&gt;
+      - &lt;xsl:value-of select="." /&gt;
+    &lt;/xsl:template&gt;
+
+  &lt;/xsl:stylesheet&gt;
+</pre>
+
+<p>Sortie dans le navigateur :</p>
+
+<pre>  Article - Mon article
+  Auteurs :
+  - M. Foo
+  - M. Bar
+</pre>
+
+<p>{{PreviousNext("XSLT dans Gecko", "XSLT dans Gecko:Génération de HTML")}}</p>
diff --git a/files/fr/web/api/xsltprocessor/browser_differences/index.html b/files/fr/web/api/xsltprocessor/browser_differences/index.html
new file mode 100644
index 0000000000..5b5a0c99c3
--- /dev/null
+++ b/files/fr/web/api/xsltprocessor/browser_differences/index.html
@@ -0,0 +1,22 @@
+---
+title: Différences entre les navigateurs
+slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs
+translation_of: Web/API/XSLTProcessor/Browser_Differences
+---
+<p></p><ol>
+<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li>
+</ol><p></p>
+
+<h2 id="Diff.C3.A9rences_entre_les_navigateurs" name="Diff.C3.A9rences_entre_les_navigateurs">Différences entre les navigateurs</h2>
+
+<ul>
+ <li>Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0 (en)</a> du W3C.</li>
+ <li>IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.</li>
+ <li>Netscape 6.x ne supporte que partiellement XSLT 1.0.</li>
+</ul>
+
+<p>{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}</p>
diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.html b/files/fr/web/api/xsltprocessor/generating_html/index.html
new file mode 100644
index 0000000000..ca333bb2ac
--- /dev/null
+++ b/files/fr/web/api/xsltprocessor/generating_html/index.html
@@ -0,0 +1,190 @@
+---
+title: Génération de HTML
+slug: XSLT_dans_Gecko/Génération_de_HTML
+translation_of: Web/API/XSLTProcessor/Generating_HTML
+---
+<p></p><ol>
+<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li>
+<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li>
+</ol><p></p>
+
+<h2 id="G.C3.A9n.C3.A9ration_de_HTML" name="G.C3.A9n.C3.A9ration_de_HTML">Génération de HTML</h2>
+
+<p>Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.</p>
+
+<p>L'élément <code>&lt;body&gt;</code> de l'article contient maintenant des éléments HTML (des balises <code>&lt;strong&gt;</code> et <code>&lt;em&gt;</code>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud <code>xsl:output</code> de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, <code><a class="external" href="http://devedge.netscape.com/2002/de" rel="freelink">http://devedge.netscape.com/2002/de</a></code>, à qui nous donnons le préfixe myNS <code>(xmlns:myNS="<span class="nowiki">http://devedge.netscape.com/2002/de</span>")</code>.</p>
+
+<p><small><strong>Figure 2 : fichier XML (example2.xml)<span class="comment">voir l'exemple | voir le source</span></strong></small> <span class="comment">Document XML (example2.xml):</span> <span class="comment">&lt;div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"&gt;</span></p>
+
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet type="text/xsl" href="example.xsl"?&gt;
+  &lt;myNS:Article xmlns:myNS="<a class="external" href="http://devedge.netscape.com/2002/de" rel="freelink">http://devedge.netscape.com/2002/de</a>"&gt;
+    &lt;myNS:Title&gt;Mon article&lt;/myNS:Title&gt;
+    &lt;myNS:Authors&gt;
+      &lt;myNS:Author company="Foopy Corp."&gt;M. Foo&lt;/myNS:Author&gt;
+      &lt;myNS:Author&gt;M. Bar&lt;/myNS:Author&gt;
+    &lt;/myNS:Authors&gt;
+    &lt;myNS:Body&gt;
+      En &lt;em&gt;Espagne&lt;/em&gt;, les &lt;strong&gt;pluies&lt;/strong&gt; se concentrent
+      principalement dans les plaines.
+    &lt;/myNS:Body&gt;
+  &lt;/myNS:Article&gt;
+</pre>
+
+<p>La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à <code>HTML</code> à l'aide de l'élément <code>xsl:output</code>. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.</p>
+
+<p><small><strong>Figure 3 : feuille de style XSL avec 2 espaces de nommage</strong> (example2.xsl)</small> <span class="comment">feuille de style XSL (example2.xsl):</span></p>
+
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+
+    &lt;xsl:output method="html"/&gt;
+    ...
+  &lt;/xsl:stylesheet&gt;
+</pre>
+
+<p>Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.</p>
+
+<p><small><strong>Figure 4 : Création du document HTML de base</strong></small> <span class="comment">feuille de style XSL (example2.xsl):</span></p>
+
+<pre>  ...
+  &lt;xsl:template match="/"&gt;
+  &lt;html&gt;
+
+    &lt;head&gt;
+
+      &lt;title&gt;
+        &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+      &lt;/title&gt;
+
+      &lt;style type="text/css"&gt;
+        .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+      &lt;/style&gt;
+
+    &lt;/head&gt;
+
+    &lt;body&gt;
+      &lt;p class="myBox"&gt;
+        &lt;span class="title"&gt;
+          &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+        &lt;/span&gt; &lt;br /&gt;
+
+        Auteurs :   &lt;br /&gt;
+          &lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
+      &lt;/p&gt;
+
+      &lt;p class="myBox"&gt;
+        &lt;xsl:apply-templates select="//myNS:Body"/&gt;
+      &lt;/p&gt;
+
+    &lt;/body&gt;
+
+  &lt;/html&gt;
+  &lt;/xsl:template&gt;
+  ...
+</pre>
+
+<p>Nous avons besoin de trois <code>xsl:template</code> supplémentaires pour parachever l'exemple. Le premier <code>xsl:template</code> est utilisé pour les nœuds <code>Author</code>, alors que le deuxième traite le nœud <code>body</code>. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.</p>
+
+<p><strong><small>Figure 5 : Les 3 modèles finaux</small></strong> <span class="comment">feuille de style XSL (example2.xsl):</span></p>
+
+<pre>  ...
+  &lt;xsl:template match="myNS:Author"&gt;
+     --   &lt;xsl:value-of select="." /&gt;
+
+    &lt;xsl:if test="@company"&gt;
+     ::   &lt;strong&gt;  &lt;xsl:value-of select="@company" /&gt;  &lt;/strong&gt;
+    &lt;/xsl:if&gt;
+
+    &lt;br /&gt;
+  &lt;/xsl:template&gt;
+
+  &lt;xsl:template match="myNS:Body"&gt;
+    &lt;xsl:copy&gt;
+      &lt;xsl:apply-templates select="@*|node()"/&gt;
+    &lt;/xsl:copy&gt;
+  &lt;/xsl:template&gt;
+
+  &lt;xsl:template match="@*|node()"&gt;
+    &lt;xsl:copy&gt;
+      &lt;xsl:apply-templates select="@*|node()"/&gt;
+    &lt;/xsl:copy&gt;
+  &lt;/xsl:template&gt;
+  ...
+</pre>
+
+<p>La feuille de style XSLT finale est donc :</p>
+
+<p><small><strong>Figure 6 : feuille de style XSLT finale <span class="comment">voir l'exemple | voir le source</span></strong></small> <span class="comment">feuille de style XSL :</span></p>
+
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+
+    &lt;xsl:output method="html" /&gt;
+
+    &lt;xsl:template match="/"&gt;
+      &lt;html&gt;
+
+        &lt;head&gt;
+
+          &lt;title&gt;
+            &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+          &lt;/title&gt;
+
+          &lt;style type="text/css"&gt;
+            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+          &lt;/style&gt;
+
+        &lt;/head&gt;
+
+        &lt;body&gt;
+          &lt;p class="myBox"&gt;
+            &lt;span class="title"&gt;
+              &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+            &lt;/span&gt; &lt;br /&gt;
+
+            Authors:   &lt;br /&gt;
+              &lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
+            &lt;/p&gt;
+
+          &lt;p class="myBox"&gt;
+            &lt;xsl:apply-templates select="//myNS:Body"/&gt;
+          &lt;/p&gt;
+
+        &lt;/body&gt;
+
+      &lt;/html&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="myNS:Author"&gt;
+       --   &lt;xsl:value-of select="." /&gt;
+
+      &lt;xsl:if test="@company"&gt;
+       ::   &lt;b&gt;  &lt;xsl:value-of select="@company" /&gt;  &lt;/b&gt;
+      &lt;/xsl:if&gt;
+
+      &lt;br /&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="myNS:Body"&gt;
+      &lt;xsl:copy&gt;
+        &lt;xsl:apply-templates select="@*|node()"/&gt;
+      &lt;/xsl:copy&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="@*|node()"&gt;
+        &lt;xsl:copy&gt;
+          &lt;xsl:apply-templates select="@*|node()"/&gt;
+        &lt;/xsl:copy&gt;
+    &lt;/xsl:template&gt;
+  &lt;/xsl:stylesheet&gt;
+</pre>
+
+<p>{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}</p>
diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html
new file mode 100644
index 0000000000..16413c5d89
--- /dev/null
+++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html
@@ -0,0 +1,60 @@
+---
+title: FAQ sur les transformations XSL dans Mozilla
+slug: FAQ_sur_les_transformations_XSL_dans_Mozilla
+tags:
+  - XSLT
+translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ
+---
+<p>
+</p>
+<h4 id="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F" name="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F"> Pourquoi ma feuille de style ne s'applique pas ? </h4>
+<p>Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir <code>text/xml</code> ou <code>application/xml</code>. L'espace de nommage XSLT est <code><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span></code>. Utilisez l'instruction de traitement <code>&lt;?xml-stylesheet ?&gt;</code> plutôt que l'élément non standard <code>xml:stylesheet</code>. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que <a class="external" href="http://livehttpheaders.mozdev.org/">LiveHTTPHeaders (en)</a> ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité.
+</p>
+<h4 id="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F" name="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F"> Cela fonctione dans IE, mais pas dans Mozilla ? </h4>
+<p>Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation.
+</p>
+<h4 id="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F" name="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F"> Puis-je désactiver l'échappement de la sortie avec <code>disable-output-escaping</code> ? </h4>
+<p>Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter <b>d-o-e</b> plutôt que de provoquer des crashes ou de ralentir le processus.
+</p>
+<h4 id="Que_dire_de_document.write_.3F" name="Que_dire_de_document.write_.3F"> Que dire de <code>document.write</code> ? </h4>
+<p>Tout comme pour le XHTML, <code>document.write</code> n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit :
+</p>
+<pre>      &lt;xsl:if test="system-property('xsl:vendor')='Transformiix'"&gt;
+        &lt;!-- Balisage propre à Mozilla --&gt;
+      &lt;/xsl:if&gt;
+      &lt;xsl:if test="system-property('xsl:vendor')='Microsoft'"&gt;
+        &lt;!-- Balisage propre à IE --&gt;
+      &lt;/xsl:if&gt;
+</pre>
+<p>Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire :
+</p>
+<pre>      &lt;xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt"
+              test="system-property('msxsl:version')=3"&gt;
+        &lt;!-- MSXML3 specific markup --&gt;
+      &lt;/xsl:if&gt;
+</pre>
+<h4 id="Que_dire_de_media.3D.22print.22.3F" name="Que_dire_de_media.3D.22print.22.3F"> Que dire de <code>media="print"</code>? </h4>
+<p>Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un <code>media</code> particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de <code>media</code> dans &lt;?xml-stylesheet ?&gt; est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si <code>media</code> n'est pas spécifié, ou si le <code>media</code> spécifié comporte <code>screen</code>.
+</p><p>Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient <code>media</code> comme les pages sans XSLT<b>.</b>
+</p>
+<h4 id="Comment_faire_transformNode.3F" name="Comment_faire_transformNode.3F"> Comment faire <code>transformNode</code>? </h4>
+<p>Il existe <code>transformToDocument</code> et <code>transformToFragment</code> depuis Mozilla 1.2, voir <a href="fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a>.
+</p>
+<h4 id="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F" name="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F"> Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? </h4>
+<p>Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support.
+</p>
+<h4 id="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F" name="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F"> Comment compiler une version autonome de TransforMiiX ? </h4>
+<p>Voir l'article sur <a href="fr/Compilation_de_TransforMiiX">Compilation de TransforMiiX</a>.
+</p>
+<div class="originaldocinfo">
+<h2 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original"> Informations sur le document original </h2>
+<ul><li> Auteur(s) : Axel Hecht
+</li><li> Dernière mise à jour : 2 février 2005
+</li><li> Copyright : Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license
+</li></ul>
+</div>
+<p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XSL_Transformations_in_Mozilla_FAQ", "ja": "ja/XSL_Transformations_in_Mozilla_FAQ" } ) }}