initial commit

13 files changed, 1760 insertions, 0 deletions

diff --git a/files/fr/webapi/browser/index.html b/files/fr/webapi/browser/index.html
new file mode 100644
index 0000000000..776952894f
--- /dev/null
+++ b/files/fr/webapi/browser/index.html
@@ -0,0 +1,209 @@
+---
+title: Using the Browser API
+slug: WebAPI/Browser
+tags:
+  - WebAPI
+translation_of: Mozilla/Gecko/Chrome/API/Browser_API/Using
+---
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'API HTML Browser (Navigateur HTML) est une extension de l'élément {{HTMLElement("iframe")}} qui permet aux applications d'implémenter des navigateurs ou des applications de navigations. Cela implique deux choses principales :</p>
+
+<ul>
+ <li>Il faut faire apparaître l'élément <code>iframe</code> comme une fenêtre de navigation à part entière au sein du contenu intégré. Cela signifie que les propriétés <span id="summary_alias_container"><span id="short_desc_nonedit_display"><a href="/fr/docs/DOM/window.top" title="/fr/docs/DOM/window.top"><code>window.top</code></a>, <a href="/fr/docs/DOM/window.parent" title="/fr/docs/DOM/window.parent"><code>window.parent</code></a>, <a href="/fr/docs/DOM/window.frameElement" title="/fr/docs/DOM/window.frameElement"><code>window.frameElement</code></a> et autres ne devraient pas refléter la structure de la frame.</span></span> Il est également possible d'exprimer ce qui est intégré au sein de l'application web.</li>
+ <li>Une API pour manipuler et surveiller l'état du contenu.</li>
+</ul>
+
+<p>Il est également possible de communiquer sur le fait que le contenu intégré soit une <a href="/fr/docs/Apps" title="/fr/docs/Apps">application web</a>. Dans ce cas, le contenu sera chargé avec le contexte pertinent (comme les permissions).</p>
+
+<h2 id="Utilisation">Utilisation</h2>
+
+<p>Un élément {{HTMLElement("iframe")}} est transformé en fenêtre de navigateur en utilisant l'attribut {{htmlattrxref("mozbrowser","iframe")}} :</p>
+
+<pre class="brush: html">&lt;iframe src="http://hostname.tld" mozbrowser&gt;</pre>
+
+<p>Afin d'intégrer une application web, il faut également renseigner l'attribut {{htmlattrxref("mozapp","iframe")}}, la valeur sera le chemin vers le manifeste de l'application :</p>
+
+<pre>&lt;iframe src="http://hostname.tld" mozapp='http://chemin/du/manifeste.webapp' mozbrowser&gt;</pre>
+
+<p>Enfin, en utilisant l'attribut {{htmlattrxref("remote","iframe")}} le contenu de l'élément{{HTMLElement("iframe")}} peut être chargé en utilisant uniquement un processus fils qui sera séparé de celui de la page qui contient l'élément {{HTMLElement("iframe")}}.</p>
+
+<pre>&lt;iframe src="http://hostname.tld" mozbrowser remote&gt;</pre>
+
+<div class="warning">
+<p><strong>Warning :</strong> Ce dernier attribut est indispensable pour des raisons de sécurité lors du chargement de contenu provenant d'une origine inconnue. Si vous ne l'utilisez pas, cela rendra votre application vulnérable aux attaques d'un site web malveillant.</p>
+</div>
+
+<h2 id="Permissions_de_l'application">Permissions de l'application</h2>
+
+<p>Chaque application qui souhaite intégrer une fenêtre de navigateur devra avoir la permission <code>browser</code> au sein du <a href="/fr/docs/Web/Apps/Manifest" title="/fr/docs/Web/Apps/Manifest">manifeste d'application</a>.</p>
+
+<pre class="brush: json">{
+  "permissions": {
+    "browser": {}
+  }
+}</pre>
+
+<p>Si elle souhaite intégrer une application web, l'application hôte devra disposer de la permission <code>embed-apps</code>.</p>
+
+<pre class="brush: json">{
+  "permissions": {
+    "browser": {},
+    "embed-apps": {}
+  }
+}</pre>
+
+<h2 id="Méthodes_supplémentaires">Méthodes supplémentaires</h2>
+
+<p>Afin d'être conforme aux spécifications d'un navigateur  {{HTMLElement("iframe")}}, Firefox OS étend l'interface DOM {{domxref("HTMLIFrameElement")}}. Ces nouvelles méthodes permettent d'augmenter les capacités de l'élément  {{HTMLElement("iframe")}} :</p>
+
+<h3 id="Les_méthodes_de_navigation">Les méthodes de navigation</h3>
+
+<p>Ces méthodes permettent de naviguer au sein de l'historique de l'élément {{HTMLElement("iframe")}}. Elles sont nécessaires afin d'implémenter les boutons de pages précédentes, suivantes ou le bouton d'actualisation de la page.</p>
+
+<ul>
+ <li>{{domxref("HTMLIFrameElement.reload","reload()")}} : permet de recharger le contenu de l'élément {{HTMLElement("iframe")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.stop","stop()")}} : permet d'arrêter le chargement du contenu de l'élément {{HTMLElement("iframe")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.getCanGoBack","getCanGoBack()")}} : permet de de savoir s'il est possible de naviguer dans les pages précédentes (s'il y en a).</li>
+ <li>{{domxref("HTMLIFrameElement.goBack","goBack()")}} : remplace l'emplacement de l'élément {{HTMLElement("iframe")}} par l'emplacement précédent contenu dans l'historique.</li>
+ <li>{{domxref("HTMLIFrameElement.getCanGoForward","getCanGoForward()")}} : permet de savoir s'il est possible de naviguer vers la (les) page(s) suivante(s).</li>
+ <li>{{domxref("HTMLIFrameElement.goForward","goForward()")}} : remplace l'emplacement de l'élément {{HTMLElement("iframe")}} par l'emplacement suivant contenu dans l'historique.</li>
+</ul>
+
+<h3 id="Les_méthodes_liées_aux_performances">Les méthodes liées aux performances</h3>
+
+<p>Ces méthodes sont utilisées pour gérer les ressources utilisées par un navigateur contenu dans un élément {{HTMLElement("iframe")}}. Cela est particulièrement utile lorsqu'il s'agit d'un navigateur utilisant des onglets.</p>
+
+<ul>
+ <li>{{domxref("HTMLIFrameElement.setVisible","setVisible()")}}: modifie la visibilité du navigateur {{HTMLElement("iframe")}}. Cela peut avoir un impact sur l'allocation des ressources et des fonctions d'utilisations comme {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.getVisible","getVisible()")}} : permet de connaître l'état de visibilité du navigateur {{HTMLElement("iframe")}} à un moment.</li>
+ <li>{{domxref("HTMLIFrameElement.purgeHistory","purgeHistory()")}} : permet de supprimer toutes les ressources associées au navigateur {{HTMLElement("iframe")}} (comme les cookies, le cache...) .</li>
+</ul>
+
+<h3 id="Méthodes_liées_aux_événements">Méthodes liées aux événements</h3>
+
+<p>Afin de gérer le contenu du navigateur {{HTMLElement("iframe")}} il est nécessaire d'introduire de nouveaux événements (voir ci-après). Les méthodes suivantes peuvent être utilisées pour manipuler ces événements :</p>
+
+<ul>
+ <li>L'élément {{HTMLElement("iframe")}} aura le support des méthodes suivantes de l'interface {{domxref("EventTarget")}} : {{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}} et {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.sendMouseEvent","sendMouseEvent()")}} : permet d'envoyer un événement {{domxref("MouseEvent")}} au contenu de l'élément {{HTMLElement("iframe")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.sendTouchEvent","sendTouchEvent()")}} : permet d'envoyer un événement {{domxref("TouchEvent")}} au contenu de l'élément {{HTMLElement("iframe")}}. Cette méthode n'est disponible que pour les appareils disposant d'une interface tactile.</li>
+ <li>{{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}} : permet de définir un gestionnaire d'événement pour surveiller le premier événement {{event("MozAfterPaint")}} du navigateur  {{HTMLElement("iframe")}}.</li>
+ <li>{{domxref("HTMLIFrameElement.removeNextPaintListener","removeNextPaintListener()")}} : permet de supprimer un gestionnaire d'événement qui avait été créé avec {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.</li>
+</ul>
+
+<h3 id="Méthodes_diverses">Méthodes diverses</h3>
+
+<p>Ces méthodes sont des utilitaires destinés aux applications qui conteiennent un navigateur {{HTMLElement("iframe")}}.</p>
+
+<ul>
+ <li>{{domxref("HTMLIFrameElement.getScreenshot","getScreenshot()")}} : permet de prendre une capture d'écran du contenu du navigateur {{HTMLElement("iframe")}}. Ceci est surtout utile pour avoir un aperçu en vignettes pour une application de navigation à onglets.</li>
+</ul>
+
+<h2 id="Événements">Événements</h2>
+
+<p>Afin de permettre à une application de manipuler le navigateur {{HTMLElement("iframe")}}, l'application peut écouter, surveiller les nouveaux événements qui se passent au sein du navigateur  {{HTMLElement("iframe")}}. Il est possible de surveiller les événements suivant :</p>
+
+<ul>
+ <li>{{event("mozbrowserasyncscroll")}} : est envoyé lorsque la position du déroulement (<em>scrolling</em>) change au sein du navigateur  {{HTMLElement("iframe")}}</li>
+ <li>{{event("mozbrowserclose")}} : est envoyé lorsque la méthode {{domxref("window.close()")}} est appelée au sein du navigateur {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsercontextmenu")}}: est envoyé lorsque le navigateur {{HTMLElement("iframe")}} tente d'ouvrir un menu contextuel. Cela permet notamment de manipuler l'élément  {{HTMLElement("menuitem")}} disponible dans le contenu du navigateur {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsererror")}} : est envoyé lorsqu'il y a une erreur pendant le chargement d'un contenu dans le navigateur {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsericonchange")}} : est envoyé lorsqu'il y a une modification du favicon du navigateur {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowserloadend")}} : est envoyé lorsque le navigateur {{HTMLElement("iframe")}} a terminé de charger tout ses composants.</li>
+ <li>{{event("mozbrowserloadstart")}} : est envoyé lorsque le navigateur  {{HTMLElement("iframe")}} commence à charger une nouvelle page.</li>
+ <li>{{event("mozbrowserlocationchange")}} : est envoyé lorsqu'il y a un changement d'emplacement (un changement de page par exemple) dans le navigateur {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowseropenwindow")}} : est envoyé lorsque la méthode {{domxref("window.open()")}} est appelée à partir du navigateur {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsersecuritychange")}} : est envoyé lorsqu'il y a un changement de l'état SSL du navigateur {{HTMLElement("iframe")}}. Cet événement fournit deux propriétés : <code>state</code> qui est une chaîne de caractères qui peut prendre les valeurs <code>"broken"</code>, <code>"secure"</code> ou <code>"insecure"</code> ; <code>isEV</code> qui doit valoir <code>true</code> si le certificat SSL courant est un certificat Extend Validation (cependant, à l'heure actuelle, il renvoie toujours <code>false</code> tant que le bogue {{bug(764496)}} n'est pas réparé).</li>
+ <li>{{event("mozbrowsershowmodalprompt")}} : est envoyé lorsque les méthodes {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} ou {{domxref("window.prompt","prompt()")}} sont appelées depuis un navigateur {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowsertitlechange")}} : est envoyé lorsqu'il y a un changement de la propriété <code>document.title</code> dans le navigateur  {{HTMLElement("iframe")}}.</li>
+ <li>{{event("mozbrowserusernameandpasswordrequired")}} : est envoyé lorsqu'une authentification HTTP est demandée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, nous verrons comment implémenter un navigateur intégré de manière simplifiée.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Dans le code HTML, il faut juste ajouter une barre pour la saisie de l'URL, un bouton « Aller à », un bouton « Arrêter » et un élément  {{HTMLElement("iframe")}} pour le navigateur.</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;input id="url"&gt;
+  &lt;button id="go"&gt;Aller à&lt;/button&gt;
+  &lt;button id="stop"&gt;Arrêter&lt;/button&gt;
+&lt;/header&gt;
+
+&lt;iframe src="about:blank" mozbrowser remote&gt;&lt;/iframe&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Il est possible de passer du bouton « Aller à » au bouton « Arrêter »  (et vice versa) en utilisant ce fragment de code CSS :</p>
+
+<pre class="brush: css">button:disabled {
+  display: none;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Et maintenant, il faut ajouter les fonctionnalités nécessaires au navigateur :</p>
+
+<pre class="brush: js">document.addEventListener("DOMContentLoaded", function () {
+  var url  = document.getElementById("url");
+  var go   = document.getElementById("go");
+  var stop = document.getElementById("stop");
+
+  var browser = document.getElementsByTagName("iframe")[0];
+
+  // Cette fonction permet de passer entre le bouton "Aller" au bouton "Arreter"
+  // (et vice versa). Si le navigateur charge, le bouton "Aller" est désactivé
+  // et le bouton "Arrêter" est activé. Sinon, on a l'état inverse.
+  function uiLoading(isLoading) {
+      go.disabled =  isLoading;
+    stop.disabled = !isLoading;
+  }
+
+  go.addEventListener("touchend", function () {
+    browser.setAttribute("src", url.value);
+  });
+
+  stop.addEventListener("touchend", function () {
+    browser.stop();
+  });
+
+  // Quand le navigateur charge, on change l'état des boutons "Aller" et "Arrêter"
+  browser.addEventListener('mozbrowserloadstart', function () {
+    uiLoading(true);
+  });
+
+  // Quand le navigateur a fini de charger du contenu,
+  // on change l'état des boutons "Aller" et "Arrêter"
+  browser.addEventListener('mozbrowserloadend', function () {
+    uiLoading(false);
+  });
+
+  // Si jamais il y a une erreur il faut également
+  // changer l'état des boutons "Aller" et "Arrêter"
+  browser.addEventListener('mozbrowsererror', function (event) {
+    uiLoading(false);
+    alert("Erreur de chargement : " + event.detail);
+  });
+
+  // Lorsqu'un utilisateur suit un lien il faut s'assurer que
+  // l'emplacement de la nouvelle page apparaît dans la barre d'URL
+  browser.addEventListener('mozbrowserlocationchange', function (event) {
+    url.value = event.detail;
+  });
+});</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>{{domxref("HTMLIFrameElement")}}</li>
+</ul>
diff --git a/files/fr/webapi/camera/index.html b/files/fr/webapi/camera/index.html
new file mode 100644
index 0000000000..20053d8670
--- /dev/null
+++ b/files/fr/webapi/camera/index.html
@@ -0,0 +1,23 @@
+---
+title: Camera API
+slug: WebAPI/Camera
+tags:
+  - Video
+  - WebAPI
+translation_of: Archive/B2G_OS/API/Camera_API
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<p>L'API <strong>Camera</strong> permet aux applications de gérer la caméra (ou l'appareil photo) de l'appareil. Cela leur permet de prendre des photos, d'enregistrer des vidéos et d'obtenir des informations concernant le focus, le zoom, la balance des blancs, le flash... Cette API à privilèges ne peut être utilisée que par les applications certifiées.</p>
+<div class="note">
+ <p><strong>Note :</strong> Sauf si vous avez l'intention de développer une application remplaçant l'application Caméra/Appareil Photo par défaut, vous ne devriez pas utiliser cette API. Si vous souhaitez simplement accéder à la caméra (ou l'appareil photo) de votre appareil, vous devriez utiliser l'API <a href="/fr/docs/WebAPI/Web_Activities" title="/en-US/docs/Web/API/Web_Activities">Web Activities</a>.</p>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{domxref("window.navigator.mozCameras", "navigator.mozCameras")}}</li>
+ <li>{{domxref("CameraManager")}}</li>
+ <li>{{domxref("CameraControl")}}</li>
+ <li>{{domxref("CameraCapabilities")}}</li>
+</ul>
+<p> </p>
diff --git a/files/fr/webapi/detecting_device_orientation/index.html b/files/fr/webapi/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..63d99497df
--- /dev/null
+++ b/files/fr/webapi/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/webapi/idle/index.html b/files/fr/webapi/idle/index.html
new file mode 100644
index 0000000000..1679ac97f7
--- /dev/null
+++ b/files/fr/webapi/idle/index.html
@@ -0,0 +1,65 @@
+---
+title: Idle API
+slug: WebAPI/Idle
+translation_of: Archive/B2G_OS/API/Idle_API
+---
+<div>
+ {{non-standard_header}} {{B2GOnlyHeader2('certified')}}</div>
+<h2 id="Summary">Summary</h2>
+<p>L'API Idle est utilisée pour notifier une application lorsque l'utilisateur est inactif. Cela permet à une application d'intervenir lorsque l'utilisateur ne fait rien avec son appareil. Le cas d'utilisation le plus courant consiste à économiser la batterie; dans ce cas, Il est couramment utilisé en conjonction avec le <a href="/en-US/docs/WebAPI/Power_Management">Power Management API</a>.</p>
+<h2 id="Surveiller_un_utilisateur_inactif">Surveiller un utilisateur inactif</h2>
+<p>Quand une application veut être averti de l'inactivité du système, elle doit inscrire un <strong>idle observer</strong>. Un idle observer est un objet composé de trois propriétés :</p>
+<ul>
+ <li>Une propriété <code>time</code> qui définit le temps, exprimé en secondes, qui doit passer après la dernière action de l'utilisateur avant que l'utilisateur est considéré comme inactif.</li>
+ <li>Une propriété <code>onidle</code>, qui est une fonction appelée lorsque l'utilisateur est considéré comme inactif.</li>
+ <li>Une propriété <code>onactive</code>, qui est une fonction appelée lorsque l'utilisateur redevient actif.</li>
+</ul>
+<h3 id="Exemple_diminuer_la_luminosité_de_l'écran_lorsque_l'utilisateur_est_inactif">Exemple: diminuer la luminosité de l'écran lorsque l'utilisateur est inactif</h3>
+<p>Dans cet exemple, un observateur idle est mis en place pour réduire la luminosité de l'écran à 50 % lorsque l'utilisateur est inactif pendant 10 secondes et le restaurer à 100 % lorsque l'utilisateur est de nouveau actif. Un deuxième observateur est mis en place pour éteindre l'écran lorsque l'utilisateur est inactif pendant au moins 15 secondes.</p>
+<pre class="brush: js">// REMARQUE: mozPower fait partie de l'API de gestion de puissance (Power Management API)
+
+var fadeLight = {
+  time: 10, // 10 secondes
+
+  onidle: function () {
+    // L'utilisateur ne semble pas actif, nous allons diminuer la luminosité de l'écran
+    navigator.mozPower.screenBrightness = 0.5;
+  },
+
+  onactive: function () {
+    // OK, l'utilisateur est de retour, nous allons ré-éclairer l'écran
+    navigator.mozPower.screenBrightness = 1;
+  }
+}
+
+var screenOff = {
+  time: 15, // quinze seconds
+
+  onidle: function () {
+    // OK, l'utilisateur a eu sa chance, mais il est vraiment inactif, nous allons désactiver l'écran
+    navigator.mozPower.screenEnabled = false;
+  },
+
+  onactive: function () {
+    // OK, l'utilisateur est de retour, nous allons allumer l'écran
+    navigator.mozPower.screenEnabled = true;
+  }
+}
+
+// Enregistrer les observateurs inactifs
+
+navigator.addIdleObserver(fadeLight);
+navigator.addIdleObserver(screenOff);
+</pre>
+<p>Ce code définit deux objets idle observer : <code>fadeLight</code> et <code>screenOff</code>, puis appelle {{domxref("window.navigator.addIdleObserver","navigator.addIdleObserver()")}} une fois pour chacun d'eux afin de les enregistrer dans le système. Les applications peuvent mettre en place autant d'observateurs inactif que nécessaire.</p>
+<p>Si l'application n'a plus besoin de surveiller l’inactivité de l'utilisateur, il peut enlever les observateurs en appelant la méthode {{domxref("window.navigator.removeIdleObserver","navigator.removeIdleObserver()")}}, comme indiqué ci-dessous :</p>
+<pre class="brush:js">navigator.removeIdleObserver(fadeLight);
+navigator.removeIdleObserver(screenOff);
+</pre>
+<h2 id="Spécification">Spécification</h2>
+<p>Ne fait partie d'aucune spécification pour le moment ; cependant, cette API sera discutée au W3C dans le cadre de la <a href="http://www.w3.org/2012/sysapps/" rel="external">System Applications Working Group</a>.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{domxref("window.navigator.addIdleObserver","navigator.addIdleObserver()")}}</li>
+ <li>{{domxref("window.navigator.removeIdleObserver","navigator.removeIdleObserver()")}}</li>
+</ul>
diff --git a/files/fr/webapi/index.html b/files/fr/webapi/index.html
new file mode 100644
index 0000000000..63cb0a8ed1
--- /dev/null
+++ b/files/fr/webapi/index.html
@@ -0,0 +1,123 @@
+---
+title: WebAPI
+slug: WebAPI
+tags:
+  - Portail
+translation_of: Web/API
+---
+<p>Le terme <strong>WebAPI</strong> permet de regrouper différentes API permettant d'accéder aux composants ou aux caractéristiques des appareil (comme la batterie, les vibrations...). Elles permettent aussi d'accéder aux informations enregistrées sur l'appareil (liste de contacts, agenda...). En créant ces API, nous espérons offrir de nouvelles possibilités au Web, jusqu'a présent réservées aux plates-formes propriétaires.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La documentation semble légère sur le sujet : il n'en est rien. Beaucoup de documents ont été écrits et des liens sont en train d'être ajoutés. Nous travaillons beaucoup à améliorer cela, de nombreux articles apparaîtront très prochainement. Vous pouvez consulter la page <a href="/fr/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">de l'état de documentation sur WebAPI </a>qui récapitule le travail fait sur la documentation WebAPI.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Pour obtenir des explications rapides sur chaque badge, consultez la documentation sur les <a href="/fr/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">applications </a>.</p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Les API de Communication</h2>
+
+<dl>
+ <dt><a href="/fr/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt>
+ <dd>L'API WebBluetooth permet d'accéder, à un bas niveau, aux fonctionnalités Bluetooth de l'appareil.</dd>
+ <dt><a href="/fr/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API permet de connaître les informations concernant la connexion : force du signal, informations sur l'opérateur ...</dd>
+ <dt><a href="/fr/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt>
+ <dd>Cette API fournit des informations de bases sur la connexion réseau utilisée (la vitesse de connexion entre autres).</dd>
+ <dt><a href="/fr/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API enregistres des données sur l'utilisation des données réseaux et fournit cette information aux applications disposant des privilèges nécessaires.</dd>
+ <dt><a href="/fr/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API permet aux applications d'interagir avec les appels téléphoniques en utilisant l'interface utilisateur.</dd>
+ <dt><a href="/fr/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt>
+ <dd>Cette API permet aux applications d'envoyer/recevoir des SMS et d'accéder aux messages enregistrés dans l'appareil.</dd>
+ <dt><a href="/fr/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API est un API avec privilèges permettant de fournir des informations liées au WiFi : réseau utilisé, force du signal, réseaux disponibles...</dd>
+</dl>
+
+<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Les API Matériel</h2>
+
+<dl>
+ <dt><a href="/fr/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt>
+ <dd>Cette API fournit un accès au capteur de lumière environnante. Cela permet à l'application de connaître la luminosité présente autour de l'appareil.</dd>
+ <dt><a href="/fr/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt>
+ <dd>Cette API fournit des informations sur la batterie (niveau de la charge, savoir si l'appareil est en cours de charge...).</dd>
+ <dt><a href="/fr/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API permet aux applications de prendre des photos et/ou d'enregistrer des vidéos en utilisant l'appareil photo et/ou la caméra.</dd>
+ <dt><a href="/fr/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt>
+ <dd>Cette API fournit des informations sur la position géographique de l'appareil.</dd>
+ <dt><a href="/fr/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
+ <dd>Cette API permet aux applications de verrouiller l'accès du pointeur (de la souris) et d'accéder aux déplacements (relatifs) et non aux coordonnées absolues. Cela est particulièrement utile pour les jeux.</dd>
+ <dt><a href="/fr/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt>
+ <dd>Cette API permet aux application d'allumer ou d'éteindre l'écran, le processeur, de connaître la puissance de l'appareil, le processeur... Elle permet aussi de surveiller (écoute et inspection) les événements de verrouillage des ressources (resources lock).</dd>
+ <dt><a href="/fr/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt>
+ <dd>Cette API permet aux applications de détecter si quelque chose est à proximité de l'appareil (par exemple le visage de l'utilisateur).</dd>
+ <dt><a href="/fr/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt>
+ <dd>Cette API permet d'envoyer des notifications lorsque l'appareil change d'orientation.</dd>
+ <dt><a href="/fr/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt>
+ <dd>Cette API permet d'envoyer des notifications lorsque l'écran change d'orientation. Il est aussi possible d'utiliser cette API pour permettre à l'API d'indiquer l'orientation à utiliser par l'application.</dd>
+ <dt><a href="/fr/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a></dt>
+ <dd>Cette API permet aux applications de contrôler les vibrations de l'appareil. Cela peut permettre de faire vibrer l'appareil pendant un jeu par exemple. <strong>Cette API n'est pas conçue</strong> pour provoquer des vibrations de notifications (dans ce cas il faut utiliser l'API <a href="/fr/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm</a>).</dd>
+ <dd style="margin-left: 160px;"><span class="alllinks"><a href="https://developer.mozilla.org/fr/docs/tag/WebAPI" title="tag/CSS">Voir tout...</a></span></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Les API de gestion des données</h2>
+
+<dl>
+ <dt><a href="/fr/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a></dt>
+ <dd>Cette API permet d'interagir avec les fichiers en écriture tout en gérant les options de verrouillages.</dd>
+ <dt><a href="/fr/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
+ <dd>Permet de stocker des informations côté client et fournit un support pour effectuer des recherches de manière performante. <strong>Ces documents doivent être déplacés.</strong></dd>
+ <dt><a href="/fr/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API permet aux applications de connaître et de modifier les options liées à la configuration du système, enregistrées de manière permanente dans l'appareil.</dd>
+</dl>
+
+<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Les autres API</h2>
+
+<dl>
+ <dt><a href="/fr/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt>
+ <dd>Cette API permet aux applications de planifier des notifications. Elle offre également  la possibilité de lancer une application de manière automatique à un moment donné.</dd>
+ <dt><a href="/fr/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API d'applications web offre la possibilité de gérer et d'installer des applications web. Cette API permet aussi aux applications de définir les informations liées au paiement.</dd>
+ <dt><a href="/fr/docs/WebAPI/Browser" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt>
+ <dd>Cette API offre la possibilité de construire un navigateur web en n'utilisant que des technologies Web (et donc un navigateur dans un navigateur).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt>
+ <dd>Cette API permet aux applications de recevoir des notifications, notamment lorsque l'utilisateur n'est pas en train d'utiliser l'appareil.</dd>
+ <dt><a href="/fr/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API permet de gérer les autorisations des applications au sein d'un même endroit. Elle est utilisée par l'application Réglages.</dd>
+ <dt><a href="/fr/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt>
+ <dd>Cette API permet à la plate-forme d'envoyer des messages de notifications à certaines applications en particulier.</dd>
+ <dt><a href="/fr/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API offre la possibilité de régler l'heure. Le fuseau horaire est lui réglé avec l'<a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings"> API Settings</a>.</dd>
+ <dt><a href="/fr/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt>
+ <dd>Cette API permet à une application de déléguer une activité à une autre application. Un application peut, par exemple, demander à une autre application de sélectionner (ou de créer) une photo et de la renvoyer à la première application. C'est généralement l'utilisateur qui sera capable de configurer la façon dont les applications seront choisies.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community">La communauté WebAPI</h2>
+
+<p>Si vous souhaitez avoir de l'aide concernant ces API, il y a plusieurs moyens d'échanger avec les autres développeurs.</p>
+
+<ul>
+ <li>Le forum WebAPI : {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li>
+ <li>Le canal IRC WebAPI : <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">N'oubliez pas la <em>netiquette</em>...</a></span></p>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets Annexes</h2>
+
+<ul>
+ <li>Le <a href="/fr/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a>, représentant la structure du document HTML comme un arbre</li>
+ <li><a href="/fr/docs/JavaScript" title="JavaScript">JavaScript</a> - Langage de script largement utilisé sur le Web.</li>
+ <li><a href="/fr/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: Une liste de sujets en lien avec WebAPI ainsi que l'état de leur documentation</li>
+</ul>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/fr/webapi/mobile_connection/index.html b/files/fr/webapi/mobile_connection/index.html
new file mode 100644
index 0000000000..b815442da0
--- /dev/null
+++ b/files/fr/webapi/mobile_connection/index.html
@@ -0,0 +1,151 @@
+---
+title: Mobile Connection
+slug: WebAPI/Mobile_Connection
+tags:
+  - WebAPI
+translation_of: Archive/B2G_OS/API/Mobile_Connection_API
+---
+<p>{{ draft }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>Cette API a été conçue pour 2 choses :</p>
+<ul>
+  <li>Permettre l'accès à des informations précises sur l'état de la connection mobile de l'appareil</li>
+  <li>Permettre l'accès à certaines fonctionnalités de l'appareil contenues dans l'<abbr title="Integrated Circuit Card">ICC</abbr> (la carte <abbr title="Subscriber Identity Module">SIM</abbr>/<abbr title="Removable User Identity Module">RUIM</abbr>).</li>
+</ul>
+<p>Cette API peut donc accéder à des fonctionnalités qui pourront avoir un impact sur l'abonnement de l'utilisateur (certaines fonctionnalités seront payantes ou pourront endommager l'<abbr title="Integrated Circuit Card">ICC</abbr>) : elle est donc limitée aux applications certifiées.</p>
+<p>Le point d'entrée de cette API est la propriété {{domxref("window.navigator.mozMobileConnection","navigator.mozMobileConnection")}} , cette propriété est une instance de l'interface {{domxref("MozMobileConnection")}}.</p>
+<h2 id="État_de_la_connexion_mobile">État de la connexion mobile</h2>
+<p>L'état de la connexion mobile se partage en deux. D'un côté, la connexion <code>voice</code> et de l'autre la connexion <code>data</code>. Les données relatives à chaque type de connexion sont accessibles à travers les propriétés {{domxref("MozMobileConnection.voice")}} et {{domxref("MozMobileConnection.data")}} qui renvoient toutes les deux un objet {{domxref("MozMobileConnectionInfo")}}.</p>
+<p>Ces objets donnent accès à toutes les informations liées à la qualité du réseau (<a href="/fr/docs/DOM/MozMobileConnectionInfo.signalStrength" title="/en-US/docs/DOM/MozMobileConnectionInfo.signalStrength">la force du signal</a>, <a href="/fr/docs/DOM/MozMobileConnectionInfo.relSignalStrength" title="/en-US/docs/DOM/MozMobileConnectionInfo.relSignalStrength">la qualité du signal</a>, la position des <a href="/fr/docs/DOM/MozMobileConnectionInfo.cell" title="/en-US/docs/DOM/MozMobileConnectionInfo.cell">cellules réseau</a>, <a href="/fr/docs/DOM/MozMobileConnectionInfo.emergencyCallsOnly" title="/en-US/docs/DOM/MozMobileConnectionInfo.emergencyCallsOnly">la restriction de l'usage</a>, <a href="/fr/docs/DOM/MozMobileConnectionInfo.roaming" title="/en-US/docs/DOM/MozMobileConnectionInfo.roaming">les données en itinérance</a>, etc.), et à <a href="/fr/docs/DOM/MozMobileConnectionInfo.network" title="/en-US/docs/DOM/MozMobileConnectionInfo.network">l'opérateur réseau</a>.</p>
+<pre class="brush: js">var cnx = navigator.mozMobileConnection;
+
+console.log("L'opérateur voix est :" + cnx.voice.network.longName);
+
+if (cnx.voice.connected) {
+  console.log("La force du signal est :" + (+cnx.voice.relSignalStrength) + "%");
+} else {
+  console.log("L'état de la connexion est : " + cnx.voice.state);
+}
+</pre>
+<h2 id="Les_fonctionnalités_ICC">Les fonctionnalités ICC</h2>
+<p>Les fonctionnalités offertes par l'<abbr title="Integrated Circuit Card">ICC</abbr> peuvent se ranger dans deux catégories :  la gestion de l'<abbr title="Integrated Circuit Card">ICC</abbr> même ou l'utilisation des commandes disponibles et intégrées au sein de <a href="http://en.wikipedia.org/wiki/SIM_Application_Toolkit" title="http://en.wikipedia.org/wiki/SIM_Application_Toolkit">STK</a> (<em>SIM Application Toolkit</em>).</p>
+<h3 id="Les_actions_de_base">Les actions de base</h3>
+<p>Le {{domxref("MozMobileConnection")}} fournit un ensemble de méthodes pour gérer les différents comportements des cartes <abbr title="Integrated Circuit Card">ICC</abbr>.</p>
+<div class="note">
+  <p><strong>Note :</strong> L'ensemble des méthodes de l'interface <code>MozMobileConnection</code> sont intégralement asynchrones. Elles renvoient toutes un objet {{domxref("DOMRequest")}} qui possède les gestionnaires d'événements <code>onsuccess</code> et <code>onerror</code> afin de gérer les succès ou échecs suite à l'appel de la méthode.</p>
+</div>
+<h4 id="Verrouillage_de_la_carte">Verrouillage de la carte</h4>
+<p>Tant que la carte est verrouillée, un utilisateur sera incapable de l'utiliser pour atteindre le réseau mobile. Il est possible de gérer le verrouillage de la carte avec les méthodes {{domxref("MozMobileConnection.getCardLock","getCardLock()")}}, {{domxref("MozMobileConnection.setCardLock","setCardLock()")}} et {{domxref("MozMobileConnection.unlockCardLock","unlockCardLock()")}}.</p>
+<p>Si le {{domxref("MozMobileConnection.getCardLock","getCardLock()")}} permet d'obtenir certaines informations précises sur le verrouillage, il est également possible d'avoir des informations plus concises sur le verrouillage grâce à {{domxref("MozMobileConnection.cardState")}} qui renvoie une chaîne de caractères représentant l'état actuel du verrouillage.</p>
+<div class="note">
+  <p><strong>Note :</strong> Même dans le cas où les requêtes ont réussi, cela ne signifie pas forcément que les opérations aient été réussies. C'est pourquoi les changements d'état de la carte sont suivis grâce à des événements indépendants :</p>
+  <ul>
+    <li>L'événement {{event("icccardlockerror")}} est déclenché à chaque fois qu'un appel à {{domxref("MozMobileConnection.setCardLock","setCardLock()")}} ou {{domxref("MozMobileConnection.unlockCardLock","unlockCardLock()")}} échoue.</li>
+    <li>L'événement {{event("cardstatechange")}} est déclenché à chaque fois que la propriété {{domxref("MozMobileConnection.cardState","cardState")}} change.</li>
+  </ul>
+</div>
+<pre class="brush: js">var cnx = navigator.mozMobileConnection;
+
+function unlockCard() {
+  var unlockOptions = {
+    lockType: "pin",
+    pin     : prompt("Veuillez saisir votre PIN")
+  }
+
+  var unlock = cnx.unlockCardLock(unlockOptions);
+
+  unlock.onsuccess = function () {
+    console.log("Le code PIN a bien été reçu.");
+
+    if (this.result.success === false) {
+      if (this.result.retryCount &gt; 0) {
+        console.log("Vous avez fait une faute dans votre code PIN : " + this.result.retryCount + " essais restants.");
+      } else {
+        console.log("Votre carte est vérrouillée, vous devez contact votre opérateur afin de recevoir un code de déblocage.");
+      }
+    }
+  }
+
+  unlock.onerror = function () {
+    console.log("Il y a eu un problème !")
+  }
+}
+
+cnx.addEventListener('icccardlockerror', function () {
+  // S'il y a une erreur, demander à l'utilisateur de resaisir le code PIN
+  unlockCard();
+});
+
+cnx.addEventListener('cardsatechange', function () {
+  // Dans le cas où l'état de la carte change et nécessite un dévérouillage
+  if (cnx.cardState === 'pinRequired') {
+    unlockCard();
+  }
+}
+
+// Le premier appel à unlockCard s'il est nécessaire
+if (cnx.cardState === 'pinRequired') {
+  unlockCard();
+}
+</pre>
+<h4 id="Les_messages_MMI">Les messages MMI</h4>
+<p>Un message <abbr title="Man Machine Interface">MMI</abbr> est un code, lisible par les humains, qui, une fois tapé avec le clavier du téléphone, déclenche une action spécifique depuis le <a class="external" href="http://en.wikipedia.org/wiki/Radio_Interface_Layer" title="Wikipedia: Radio Interface Layer">RIL</a> ou d'obtenir une réponse depuis le réseau via une requête <a class="external" href="http://fr.wikipedia.org/wiki/Unstructured_Supplementary_Service_Data" title="Wikipedia: Unstructured Supplementary Service Data">USSD</a>. Un exemple : taper un code pour obtenir le numéro <a href="http://fr.wikipedia.org/wiki/International_Mobile_Equipment_Identity" title="http://en.wikipedia.org/wiki/International_Mobile_Station_Equipment_Identity">IMEI</a> du téléphone.</p>
+<p>De tels messages sont envoyés en utilisant la méthode  {{domxref("MozMobileConnection.sendMMI()")}} (et peuvent être annulés avec {{domxref("MozMobileConnection.cancelMMI","cancelMMI()")}}). Même si la réponse sera un objet {{domxref("DOMRequest")}}, la réponse à un tel message pourra être gérée de deux manières :</p>
+<ul>
+  <li>Si le code <abbr title="Man Machine Interface">MMI</abbr> doit envoyer une requête <abbr title="Unstructured Supplementary Service Data">USSD</abbr>, le <code>success</code> de la requête signifie que le <abbr title="Radio Interface Layer">RIL</abbr> a correctement traîté, puis envoyé la requête <abbr title="Unstructured Supplementary Service Data">USSD</abbr> sur le réseau. Cependant, la réponse du réseau est renvoyée via l'événement {{event("ussdreceived")}}.</li>
+  <li>Si le code <abbr title="Man Machine Interface">MMI</abbr> n'est pas associé à un code <abbr title="Unstructured Supplementary Service Data">USSD</abbr> mais à une autre requête <abbr title="Radio Interface Layer">RIL</abbr>, son résultat (s'il est nécessaire) sera renvoyé grâce aux gestionnaire d'événements <code>success</code> ou <code>error</code>.</li>
+</ul>
+<pre class="brush: js">var cnx = navigator.mozMobileConnection;
+
+cnx.addEventHandler('ussdreceived', function (evt) {
+  console.log('Message réseau : ' + evt.data.message);
+});
+
+var MMIRequest = cnx.sendMMI(prompt('Provide a valid MMI'));
+
+MMIRequest.onerror = function() {
+  console.log("Il y a eu un problème...");
+}
+</pre>
+<h4 id="Options_de_renvoi_d'appels">Options de renvoi d'appels</h4>
+<p>Les options de renvoi d'appels permettent de définir la façon dont un appel peut, ou non, être transféré vers un autre numéro de téléphone.</p>
+<p>Ces options sont gérées par les méthodes {{domxref("MozMobileConnection.getCallForwardingOption","getCallForwardingOption()")}} et {{domxref("MozMobileConnection.setCallForwardingOption","setCallForwardingOption()")}} .</p>
+<pre class="brush: js">var options = {
+  action      : MozMobileCFInfo.CALL_FORWARD_ACTION_ENABLE,
+  reason      : MozMobileCFInfo.CALL_FORWARD_REASON_UNCONDITIONAL,
+  serviceClass: MozMobileConnectionInfo.ICC_SERVICE_CLASS_VOICE,
+  number      : prompt('À quelle numéro doit être transféré l appel ?'),
+  timeSeconds : 5
+};
+
+var setOption = navigator.mozMobileConnection.setCallForwardingOption(options);
+
+setOption.onsuccess = function () {
+  console.log('Options paramétrées avec succès');
+}
+
+setOption.onerror = function () {
+  console.log('Impossible de paramétrer les options : ' + this.error.name);
+}
+</pre>
+<h3 id="Commandes_STK">Commandes STK</h3>
+<p>Les commandes STK dépendent de plusieurs facteurs (opérateur, modèle de puces...) mais sont toujours accessibles via la propriété {{domxref("MozMobileConnection.icc")}} qui renverra un objet {{domxref("MozIccManager")}}.</p>
+<div class="warning">
+  <p><strong>Avertissement :</strong> Il est recommandé de n'utiliser les commandes STK uniquement si vous êtes parfaitement conscient de ce que vous faites. En effet, cela peut endommager la puce électronique et la rendre inutilisable.</p>
+</div>
+<h2 id="Spécification">Spécification</h2>
+<p>Cette API n'appartient à aucune spécification.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+  <li>{{domxref("window.navigator.mozMobileConnection","navigator.mozMobileConnection")}}</li>
+  <li>{{domxref("MozMobileConnection")}}</li>
+  <li>{{domxref("MozMobileConnectionInfo")}}</li>
+  <li>{{domxref("MozMobileICCInfo")}}</li>
+  <li>{{domxref("MozMobileNetworkInfo")}}</li>
+  <li>{{domxref("MozMobileCFInfo")}}</li>
+  <li>{{domxref("MozMobileCellInfo")}}</li>
+  <li>{{domxref("MozIccManager")}}</li>
+  <li>{{domxref("MozStkCommandEvent")}}</li>
+</ul>
diff --git a/files/fr/webapi/network_information/index.html b/files/fr/webapi/network_information/index.html
new file mode 100644
index 0000000000..076718cbcc
--- /dev/null
+++ b/files/fr/webapi/network_information/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/webapi/network_stats/index.html b/files/fr/webapi/network_stats/index.html
new file mode 100644
index 0000000000..363d5ca3fe
--- /dev/null
+++ b/files/fr/webapi/network_stats/index.html
@@ -0,0 +1,89 @@
+---
+title: Network Stats
+slug: WebAPI/Network_Stats
+tags:
+  - WebAPI
+translation_of: Archive/B2G_OS/API/Network_Stats_API
+---
+<p>{{ draft }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>L'API Network Stats (statistiques réseaux) permet de surveiller l'utilisation des données et de fournir ces informations aux applications disposant des privilèges nécessaires.</p>
+<p>On peut accéder aux données grâce à {{domxref("window.navigator.mozNetworkStats","navigator.mozNetworkStats")}} qui est une instance de l'interface {{domxref("MozNetworkStatsManager")}}.</p>
+<h2 id="Accès_aux_données">Accès aux données</h2>
+<p>Les informations concernant le volume de données envoyé/reçu est automatiquement enregistré par le système. On peut y accéder avec la méthode {{domxref("MozNetworkStatsManager.getNetworkStats()")}}. Cette méthode prend un objet de configuration comme premier paramètre, celui-ci doit contenir les propriétés suivantes :</p>
+<ul>
+  <li><code>start</code> : Un objet Date représentant le moment à partir duquel la donnée est mesurée.</li>
+  <li><code>end </code>: Un objet Date représentant le moment auquel arrêter la mesure de la donnée.</li>
+  <li><code>connectionType</code> : L'origine de la donnée. Cela peut être <code>wifi</code>, <code>mobile</code> ou <code>null</code>. Si elle vaut <code>null</code>, les données mesurées via les deux canaux sont fusionnées. Afin de savoir quel type d'origine est disponible, la propriété {{domxref("MozNetworkStatsManager.connectionTypes")}} renvoie une <a href="/fr/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> de chaînes de caractères représentant chaque origine.</li>
+</ul>
+<p>Lorsqu'elle est appelée, cette méthode renvoie un objet {{domxref("DOMRequest")}} permettant de savoir si la requête d'informations a réussi ou échoué. Si elle a réussi, le résultat de la requête, <code>result</code>, est un objet {{domxref("MozNetworkStats")}}.</p>
+<pre class="brush: js">var manageWifi   = navigator.mozNetworkStats.connectionTypes.indexOf('wifi')   &gt; -1;
+var manageMobile = navigator.mozNetworkStats.connectionTypes.indexOf('mobile') &gt; -1;
+
+var config = {
+  start: new Date(),
+  end  : new Date(),
+  connectionType: manageWifi ? 'wifi' : null
+};
+
+var request = navigator.mozNetworkStats.getNetworkStats(config);
+
+request.onsuccess = function () {
+  console.log("Données reçues : " + request.result.data[0].rxBytes + " bytes");
+  console.log("Données envoyées : " + request.result.data[0].txBytes + " bytes")
+}
+
+request.onerror = function () {
+  console.log("Il y a eu un problème : ", request.error);
+}
+</pre>
+<h2 id="Échantillonage_temporel">Échantillonage temporel</h2>
+<p>Afin de voir comment évolue l'utilisation des données au cours du temps, on stocke l'information sous forme de morceaux. Chaque morceau de données représente la quantité de données échangées depuis l'enregistrement du précédent morceau.</p>
+<p>Lorsqu'une requête est faite pour obtenir ces statistiques, un objet {{domxref("MozNetworkStats")}} est envoyé qui contient autant de « morceaux » que possible pour l'intervalle <code>start</code>-<code>end</code>.  Le nombre total de morceaux dépend de deux paramètres (ces paramètres sont en lecture seule) :</p>
+<ul>
+  <li>{{domxref("MozNetworkStatsManager.sampleRate")}}, qui représente le temps écoulé entre deux morceaux de données</li>
+  <li>{{domxref("MozNetworkStatsManager.maxStorageSamples")}}, qui représente le nombre maximum de « morceaux » à envoyer pour chaque type de connexion.</li>
+</ul>
+<p>Chaque morceau de données est un objet {{domxref("MozNetworkStatsData")}} et tous les morceaux de données d'un moment donné sont accessibles via la propriété {{domxref("MozNetworkStats.data")}}. Cette propriété est un <a href="/fr/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> d'objets {{domxref("MozNetworkStatsData")}}.</p>
+<pre class="brush: js">var rate = navigator.mozNetworkStats.sampleRate;
+var max  = navigator.mozNetworkStats.maxStorageSample;
+
+var config = {
+  start: new Date() - (rate * max), // Cela permet d'obtenir tous les morceaux de données disponibles.
+  end  : new Date(),
+  connectionType: 'mobile'
+};
+
+var request = navigator.mozNetworkStats.getNetworkStats(config);
+
+request.onsuccess = function () {
+  var total = {
+    receive: 0,
+    send   : 0
+  };
+
+  this.result.forEach(function (chunk) {
+    total.receive += chunk.rxBytes;
+    total.send    += chunk.txBytes;
+  });
+
+  console.log("Depuis : " + config.start.toString());
+  console.log("Données reçues : " + (total.receive * 1000).toFixed(2) + "Ko");
+  console.log("Données envoyées : " + (total.send * 1000).toFixed(2) + "Ko")
+}
+
+request.onerror = function () {
+  console.log("Il y a eu un problème : ", request.error);
+}</pre>
+<h2 id="Spécification">Spécification</h2>
+<p>Cette API ne fait partie d'aucune spécification.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+  <li>{{domxref("window.navigator.mozNetworkStats","navigator.mozNetworkStats")}}</li>
+  <li>{{domxref("MozNetworkStats")}}</li>
+  <li>{{domxref("MozNetworkStatsData")}}</li>
+  <li>{{domxref("MozNetworkStatsManager")}}</li>
+  <li><a href="/en-US/docs/WebAPI/Network_Stats_2_0_proposal" title="/en-US/docs/WebAPI/Network_Stats_2_0_proposal">NetworkStats API 2.0 proposal</a></li>
+</ul>
diff --git a/files/fr/webapi/pointer_lock/index.html b/files/fr/webapi/pointer_lock/index.html
new file mode 100644
index 0000000000..e3d6ea14f3
--- /dev/null
+++ b/files/fr/webapi/pointer_lock/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/webapi/power_management/index.html b/files/fr/webapi/power_management/index.html
new file mode 100644
index 0000000000..71767d3fb1
--- /dev/null
+++ b/files/fr/webapi/power_management/index.html
@@ -0,0 +1,123 @@
+---
+title: Gestion de l'énergie
+slug: WebAPI/Power_Management
+tags:
+  - B2G
+  - Firefox OS
+  - Non Standard
+  - Power Management
+  - WebAPI
+translation_of: Archive/B2G_OS/API/Power_Management_API
+---
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>L'API de gestion de l'énergie, propose des outils pour gérer la consommation énergétique de l'appareil.</p>
+<h2 id="Gestion_de_l'énergie">Gestion de l'énergie</h2>
+<p>L'API : Power Management , permet d'agir directement sur la consommation d'énergie (écran, processeur, etc...).<br>
+  <span id="result_box" lang="fr"><span class="hps">L'interface principale</span> <span class="hps">pour gérer l'alimentation</span> <span class="hps">est</span> <span class="hps">accessible</span></span><br>
+  via {{domxref("window.navigator.mozPower","navigator.mozPower")}} qui est une instance de l'interface {{domxref("PowerManager")}}.</p>
+<h3 id="Opérations_d'alimentation_de_base"><span class="short_text" id="result_box" lang="fr"><span class="hps">Opérations d'alimentation</span> <span class="hps">de base</span></span></h3>
+<p>L'interface {{domxref("PowerManager")}} permet de gérer la consommation énergétique d'un appareil grâce à de simples opérations.</p>
+<h4 id="Opérations_globales_d'alimentation">Opérations globales d'alimentation</h4>
+<p>Il est possible d'éteindre l'appareil avec la méthode {{domxref("PowerManager.powerOff()","powerOff()")}} ou de le redémarrer via la méthode {{domxref("PowerManager.reboot()","reboot()")}}.</p>
+<pre class="brush: js">// Redémarre l'appareil.
+navigator.mozPower.reboot();
+// Eteint l'appareil.
+navigator.mozPower.powerOff();</pre>
+<h4 id="Opérations_d'alimentation_de_l'écran"><span class="short_text" id="result_box" lang="fr"><span class="hps">Opérations d'alimentation</span> <span class="hps">de l'écran</span></span></h4>
+<p>L'écran peut être éteint ou rallumé avec la propriété {{domxref("PowerManager.screenEnabled","screenEnabled")}} en lecture-écriture.</p>
+<p>Mais il est aussi possible d'agir sur l'écran de manière plus précise, en changeant par exemple la luminosité avec la propriété {{domxref("PowerManager.screenBrightness","screenBrightness")}} en lecture-écriture. Cette propriété définit, sur une échelle de 0 à 1, quel est le niveau de luminosité du rétro-éclairage de l'écran (0 étant la luminosité minimale et 1 la luminosité maximale).</p>
+<pre class="brush: js">// Il est inutile de changer la luminosité si
+// l'écran est éteint.
+if (navigator.mozPower.screenEnabled) {
+  navigator.mozPower.screenBrightness = 0.5;
+}</pre>
+<h4 id="Opération_sur_la_consommation_du_processeur">Opération sur la consommation du processeur</h4>
+<p>Même s'il n'est pas possible d'éteindre directement le processeur, il est cependant possible de <span id="result_box" lang="fr"><span class="hps">dire s'il</span> <span class="hps">peut être arrêté</span> <span class="hps">ou, si</span> <span class="hps">l'écran</span> <span class="hps">est hors tension</span><span>.</span></span> Cela peut être défini avec la propriété : {{domxref("PowerManager.cpuSleepAllowed","cpuSleepAllowed")}}.<br>
+  Elle détermine si le processeur se mettra en veille une fois que l'écran a été éteint (true) ou si le processeur continuera de fonctionner normalement (false), auquel cas l'appareil ne passera pas en veille.</p>
+<h3 id="Opérations_d'alimentation_avancées">Opérations d'alimentation avancées</h3>
+<p>L'énergie peut être mieux gérée lorsque l'application en charge de l'énergie est capable de recevoir des informations quant aux besoins énergétiques des applications tierces. La lecture d'une vidéo, par exemple, sera plus agréable si l'écran ne s'éteint pas automatiquement après quelques secondes de lecture.</p>
+<h4 id="Inhibiteur_de_mise_en_veille">Inhibiteur de mise en veille</h4>
+<p>Toute application peut faire une requête d'inhibition de la mise en veille.<br>
+  Une requête d'inhibition de mise en veille est une façon d’empêcher l'appareil de mettre en veille ses ressources matérielles (écran, processeur, son etc...).  Cette requête peut être appelée grâce à la méthode {{domxref("window.navigator.requestWakeLock","navigator.requestWakeLock()")}} .</p>
+<p>L'inhibition de la mise en veille est requise pour des ressources spécifiques qui pourraient être indisponibles pour diverses raisons.<br>
+  Par exemple, sur un appareil mobile, le gestionnaire d'énergie peut décider d'éteindre l'écran après une période d'inactivité pour économiser de l'énergie.</p>
+<p>L'application qui gère une ressource vérifie la disponibilité de la mise en veille de la ressource associée, avant de la désactiver. Une page peut ainsi empêcher que l'économiseur d'écran s'active ou que l'écran s'éteigne.</p>
+<p>Par défaut, Firefox OS autorise l'écran, le processeur, le wifi, à se mettre en veille. Néanmoins, toute application peut manipuler une ressource matérielle et définir sa propre politique de mise en veille pour cette ressource. Le gestionnaire de ressource peut décider par exemple d'ignorer la requête d’inhibition de mise en veille de l'écran demandée par des applications en arrière plan.</p>
+<pre class="brush: js">var lock = navigator.requestWakeLock('screen');</pre>
+<p>La méthode {{domxref("window.navigator.requestWakeLock","requestWakeLock")}} retourne un objet contenant une propriété <code>topic</code> représentant, le nom de la ressource spécifique verrouilée ainsi qu'une methode <code>unlock()</code> qui peut être utiliser pour annuler manuellement l’inhibition. Notons que si l'application est close (réellement close et pas seulement en arrière plan) toutes les inhibitions seront libérées automatiquement.</p>
+<h4 id="Gérer_un_inhibiteur_de_mise_en_veille">Gérer un inhibiteur de mise en veille</h4>
+<p>Les applications certifiées, sont capables de gérer le blocage de mise en veille et d'être notifiées changements sur l'état de ce verrouillage. Toute application désirant gérer l'énergie doit en fait écouter tout changement de l'état du blocage de veille de l'écran et du processeur. Ceci peut être réalisé à l'aide de la méthode {{domxref("PowerManager.addWakeLockListener()")}}.<br>
+  Il est également possible d’arrêter d'écouter les requêtes de verrouillage via la méthode {{domxref("PowerManager.removeWakeLockListener()","")}}.</p>
+<p>La méthode {{domxref("PowerManager.addWakeLockListener()","addWakeLockListener")}} prends en paramètre une fonction de rappel (<em>callback</em>) acceptant deux paramètres : une première chaine de caractères représentant une ressource à gérer (dans notre cas l'écran, le processeur ou le wifi) et une seconde chaine de caractères représentant l'état du blocage de veille pour la ressoure concernée.</p>
+<p>Le verrou de la mise en veille peut avoir trois états :</p>
+<dl>
+  <dt>
+    <code>unlocked</code></dt>
+  <dd>
+    Personne ne détient le verrou pour bloquer la veille de la ressource donnée</dd>
+  <dt>
+    <code>locked-foreground</code></dt>
+  <dd>
+    Au moins une application détient le verrou et est visible.</dd>
+  <dt>
+    <code>locked-background</code></dt>
+  <dd>
+    Au moins une application détient le verrou, cependant aucune d'entre elle n'est visible.</dd>
+</dl>
+<pre class="brush: js">// Utilisé pour garder une trace du
+// dernier changement d'état de WakeLock.
+var screenTimeout,
+
+// Une référence sur le gestionnaire d'énergie.
+    power = window.navigator.mozPower,
+
+// Ici l'action pour gérer l'état du WakeLock.
+    powerAction = {
+  // Si il n'y a aucun WakeLock, on va suspendre l'appareil.
+  // * Éteindre l'écran
+  // * Permettre au processeur de se mettre en veille.
+    unlocked: function suspendDevice() {
+    power.cpuSleepAllowed = true;
+    power.screenEnabled   = false;
+  },
+
+  // Si il y a un WakeLock mais les application qui le requièrent
+  // sont toutes en arrière plan, on éteint juste l'écran.
+  'locked-background': function shutOffOnlyScreen() {
+    power.cpuSleepAllowed = false;
+    power.screenEnabled   = false;
+  },
+
+  // En fin s'il n'y a pas d'application active, requérant un WakeLock,
+  // et bien il n'y a rien à faire!
+ }
+
+function screenLockListener(topic, state) {
+  // Si la ressource désignée par le WakeLock n'est pas l'écran ne rien faire.
+  if ('screen' !== topic) { return; }
+
+  // Chaque fois que l'état de WakeLock change,
+  // on arrête toute opération de gestion d'énergie en cours.
+  window.clearTimeout(screenTimeout);
+
+  // Si il y a une action définie pour l'état donnée.
+  if (powerAction[state]) {
+    // On retard l'action de 3s.
+    screenTimeout = window.setTimeout(powerAction[state], 3000);
+  }
+}
+// On s'assure que notre application de gestion de l'énergie écoute,
+// tout les changements sur l'état de WakeLock d'une ressource donnée.
+power.addWakeLockListener(cpuLockListener);
+power.addWakeLockListener(screenLockListener);</pre>
+<p> </p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<p>Cette API ne fait partie d'aucune spécification actuellement.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+  <li>{{ domxref("window.navigator.mozPower","navigator.mozPower") }}</li>
+  <li>{{ domxref("PowerManager") }}</li>
+  <li>{{ domxref("window.navigator.requestWakeLock()","navigator.requestWakeLock()") }}</li>
+</ul>
diff --git a/files/fr/webapi/proximity/index.html b/files/fr/webapi/proximity/index.html
new file mode 100644
index 0000000000..e5b3d1e199
--- /dev/null
+++ b/files/fr/webapi/proximity/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/webapi/utiliser_les_événéments_de_luminosité/index.html b/files/fr/webapi/utiliser_les_événéments_de_luminosité/index.html
new file mode 100644
index 0000000000..4f30f285d0
--- /dev/null
+++ b/files/fr/webapi/utiliser_les_événéments_de_luminosité/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/webapi/websms/index.html b/files/fr/webapi/websms/index.html
new file mode 100644
index 0000000000..66bf727f00
--- /dev/null
+++ b/files/fr/webapi/websms/index.html
@@ -0,0 +1,62 @@
+---
+title: WebSMS
+slug: WebAPI/WebSMS
+tags:
+  - WebAPI
+translation_of: Archive/B2G_OS/API/Mobile_Messaging_API
+---
+<p>L'API WebSMS permet à du contenu web de créer, envoyer ou recevoir des SMS (Short Message Services).</p>
+<p>Cette API est disponible en utilisant {{ domxref("window.navigator.mozSms") }} qui renvoie un objet {{ domxref("SmsManager") }}. Voir ci-après pour une liste complète des interfaces :</p>
+<h2 id="Interfaces_DOM">Interfaces DOM</h2>
+<ul>
+  <li>{{ domxref("window.navigator.mozSms") }}</li>
+  <li>{{ domxref("SmsManager") }}</li>
+  <li>{{ domxref("SmsRequest") }}</li>
+  <li>{{ domxref("SmsMessage") }}</li>
+  <li>{{ domxref("SmsEvent") }}</li>
+  <li>{{ domxref("SmsFilter") }}</li>
+  <li>{{ domxref("SmsCursor") }}</li>
+</ul>
+<h2 id="Interfaces">Interfaces</h2>
+<ul>
+  <li>{{ interface("nsISmsDatabaseService") }}</li>
+  <li>{{ interface("nsISmsRequestManager") }}</li>
+  <li>{{ interface("nsISmsService") }}</li>
+</ul>
+<h2 id="Exemple_de_code_et_introduction_à_WebSMS">Exemple de code et introduction à WebSMS</h2>
+<ul>
+  <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="en/API/WebSMS/Introduction_to_WebSMS">Introduction to WebSMS</a></li>
+</ul>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>Pour des raisons évidentes, cette API est surtout destinée aux navigateurs mobiles.</p>
+<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 simple</td>
+      <td>{{ CompatNo() }}</td>
+      <td>{{ CompatGeckoMobile("12.0") }}</td>
+      <td>{{ CompatNo() }}</td>
+      <td>{{ CompatNo() }}</td>
+      <td>{{ CompatNo() }}</td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
+<h2 id="Réglages_et_disponibilité">Réglages et disponibilité</h2>
+<ul>
+  <li>WebSMS est désactivé par défaut et peut être activé en passant le paramètre <code>dom.sms.enabled</code> à <code>true</code>.</li>
+  <li>Une liste blanche comportant les hôtes autorisés à utiliser l'API WebSMS doit être définie en utilisant le paramètre <code>dom.sms.whitelist</code> La valeur par défaut est la chaîne de caractères vide.</li>
+  <li>WebSMS est seulement disponible pour les applications certifiées sur Firefox OS (B2G)</li>
+</ul>
+<h2 class="note" id="Voir_aussi">Voir aussi</h2>
+<ul>
+  <li><a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebSMS" title="https://wiki.mozilla.org/WebAPI/WebSMS">WebSMS API</a> (document de conception en anglais)</li>
+</ul>