initial commit

6 files changed, 765 insertions, 0 deletions

diff --git a/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html b/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..686d138cfc
--- /dev/null
+++ b/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html
@@ -0,0 +1,96 @@
+---
+title: Création et déclenchement d'événements
+slug: Web/Guide/DOM/Events/Creating_and_triggering_events
+tags:
+  - API
+  - Avancé
+  - DOM
+  - Guide
+  - JavaScript
+  - évènements
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>Cet article montre comment créer et distribuer des événements DOM. De tels événements sont généralement appelés <strong>événements synthétiques</strong> afin de les distinguer des événements levés par le navigateur lui-même.</p>
+
+<h2 id="Création_dévénements_personnalisés">Création d'événements personnalisés</h2>
+
+<p>Les événements peuvent être créés avec le constructeur <a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="/fr/docs/Web/API/Event"> <code>Event</code> </a>de cette manière :</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+//Ecouter l'événement.
+elem.addEventListener('build', function (e) { ... }, false);
+
+//distribuer l'événement.
+elem.dispatchEvent(event);</pre>
+
+<p>Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir <a href="#Ancienne_approche" title="#Ancienne_approche"> l'ancienne approche </a> ci-dessous.</p>
+
+<h3 id="Ajout_de_données_personnalisée_-_CustomEvent">Ajout de données personnalisée - CustomEvent ()</h3>
+
+<p>Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété <code><u> <strong>detail</strong></u></code> peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="Lancienne_approche"><a id="Ancienne_approche" name="Ancienne_approche"></a>L'ancienne approche</h3>
+
+<p>L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :</p>
+
+<pre class="brush: js">// Crée l'événement
+var event = document.createEvent('Event');
+
+// Nomme l'événement 'build'.
+event.initEvent('build', true, true);
+
+// Écoute l'événement.
+elem.addEventListener('build', function (e) {
+  // e.target correspond à elem
+}, false);
+
+// target peut être n'importe quel Element ou autre EventTarget.
+elem.dispatchEvent(event);
+
+</pre>
+
+<h2 id="Le_déclenchement_dévénements_intégrés">Le déclenchement d'événements intégrés</h2>
+
+<p>Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. <a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html" title="http://developer.mozilla.org/samples/domref/dispatchEvent.html"> Voir l'exemple en action. </a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    //Un gestionnaire appelé preventDefault.
+    alert("canceled");
+  } else {
+    //Aucun gestionnaires appelé preventDefault.
+    alert("not canceled");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/fr/web/guide/dom/events/evenement_medias/index.html b/files/fr/web/guide/dom/events/evenement_medias/index.html
new file mode 100644
index 0000000000..c34862e7db
--- /dev/null
+++ b/files/fr/web/guide/dom/events/evenement_medias/index.html
@@ -0,0 +1,266 @@
+---
+title: Evénements des Médias
+slug: Web/Guide/DOM/Events/evenement_medias
+tags:
+  - Media
+translation_of: Web/Guide/Events/Media_events
+---
+<p>Plusieurs événements sont envoyés lors de la gestion des médias inclus dans un documentHTML en utilisant les balises {{ HTMLElement("audio") }} et {{ HTMLElement("video") }} ; ce document les liste et fournit des informations sur leur utilisation.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nom de l'événement</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>abort</code></td>
+   <td>Envoyé lorsque la lecture est avortée ; par exemple, si le média est en cours de lecture et que cette lecture est recommencée depuis le début, cet événement est envoyé.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplay")}}</code></td>
+   <td>Envoyé lorsqu'il y a assez de données disponibles pour que le média puisse être lu, sur au moins quelques trames. Cet événement correspond à la valeur <code>HAVE_ENOUGH_DATA</code> de la propriété <code>readyState</code>.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplaythrough")}}</code></td>
+   <td>Envoyé quand l'état de disponibilité change pour <code>CAN_PLAY_THROUGH</code>, indiquant que le média peut être lu en entier sans interruption si la vitesse de téléchargement de celui-ci reste stable. Il sera également envoyé quand l'état de lecture bascule entre lecture et pause. <strong>Note</strong>: Changer manuellement la valeur <code>currentTime</code> peut éventuellement déclencher cet évenement dans firefox. Les autres navigateurs peuvent ne pas envoyer cet événement.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("durationchange")}}</code></td>
+   <td>Les métadonnées sont chargées ou ont changées, indiquant un changement de la durée du média. Cet événement est envoyé lorsque, par exemple, assez de données ont été téléchargées pour connaitre cette durée.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("emptied")}}</code></td>
+   <td>Les données du média ont été vidées ; par exemple, si le média a déjà été téléchargé, partiellement ou complètement, et que la méthode <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> a été appellée pour le re-télécharger.</td>
+  </tr>
+  <tr>
+   <td>encrypted {{experimental_inline}}</td>
+   <td>L'agent utilisateur a trouvé des données d'initialisation d'acquisition de licence dans les données du média.</td>
+  </tr>
+  <tr>
+   <td><code>ended</code></td>
+   <td>Envoyé quand la lecture du média est terminée.</td>
+  </tr>
+  <tr>
+   <td><code>error</code></td>
+   <td>Envoyé quand une erreur intervient. L'attribut <code>error </code>de l'élément contient plus d'informations. Voir <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>interruptbegin</code></td>
+   <td>Envoyé quand la lecture audio du média est interrompue sur un terminal Firefox OS, soit parce que l'application a été placée en arrière-plan, soit parce que la lecture d'un autre canal audio avec une priorité supérieure commence. Voir <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>interruptend</code></td>
+   <td>Envoyé lorsque la lecture audio du média interrompue recommence sur un terminal Firefox OS — quand l'interruption se termine. Soit quand l'application revient au premier plan, soit quand la lecture d'un autre canal audio avec une priorité supérieure est terminée. Voir <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadeddata")}}</code></td>
+   <td>La première frame du media a fini de se télécharger.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadedmetadata")}}</code></td>
+   <td>Les métadonnées du média ont fini de se télécharger ; tous les attributs ont désormais toutes les informations utiles qu'ils peuvent contenir.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadstart")}}</code></td>
+   <td>Envoyé lorsque le téléchargement du média commence.</td>
+  </tr>
+  <tr>
+   <td><code>mozaudioavailable</code></td>
+   <td>Envoyé lorsque qu'un tampon audio est fourni à la couche audio du lecteur pour traitement ; le tampon audio contient des échantilons sonores qui peuvent déjà être lus ou non au moment où l'évenement est reçu.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("pause")}}</code></td>
+   <td>Envoyé quand la lecture du média est mise en pause.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("play")}}</code></td>
+   <td>Envoyé quand la lecture du média commence après avoir été mise en pause ; c'est-à-dire quand elle reprend après un événement pause précédent.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("playing")}}</code></td>
+   <td>Envoyé quand la lecture du média commence (soit pour la première fois, soit après avoir été mise en pause ou soit après avoir été terminée puis relancée).</td>
+  </tr>
+  <tr>
+   <td><code>{{event("progress")}}</code></td>
+   <td>Envoyé de manière périodique pour informer de la progression du téléchargement du média. L'information sur le volume de données actuellement téléchargées est disponible dans la propriété <code>buffered</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("ratechange")}}</code></td>
+   <td>Envoyé lorsque la vitesse de lecture du média change.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeked")}}</code></td>
+   <td>Envoyé lorsqu'une opération de déplacement dans le média est terminée.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeking")}}</code></td>
+   <td>Envoyé lorsqu'une opération de déplacement dans le média commence.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("stalled")}}</code></td>
+   <td>Envoyé lorsque l'agent utilisateur essaye de télécharger des données du média mais que celle-ci sont indisponibles.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("suspend")}}</code></td>
+   <td>Envoyé lorsque le téléchargement du média est suspendu ; soit parce que ce téléchargement est fini, soit parce qu'il est mis en pause pour une autre raison.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("timeupdate")}}</code></td>
+   <td>La position de la tête de lecture dans le média indiquée par l'attribut <code>currentTime</code> de l'élément a changée.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("volumechange")}}</code></td>
+   <td>Envoyé lorsque le volume sonore du lecteur ou que l'attribut <code>muted</code> de l'élément changent.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("waiting")}}</code></td>
+   <td>Envoyé lorsqu'une opération demandée (comme la lecture) est reportée en attendant la fin d'une autre opération (comme le déplacement du média).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vous pouvez facilement écouter ces événements en utilisant du code ci-dessous :</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.addEventListener("seeked", function() { v.play(); }, true);
+v.currentTime = 10.0;
+</pre>
+
+<p>Ce code récupère le premier élément vidéo dans le document et y attache un écouteur qui se déclenche quand l'évenement <code>seeked</code> est envoyé. Cet écouteur appèle la méthode <code>play()</code> de l'élément, qui démarre la lecture.</p>
+
+<p>Ensuite, en ligne 3, l'exemple définit la propriété <code>currentTime</code> de l'élement à 10.0, ce qui provoque une opération de déplacement de la tête de lecture à 10 secondes dans le média. Cet opération déclenche l'envoi d'un évenement <code>seeking</code> quand elle commence, puis un évenement <code>seeked</code> quand elle se termine.</p>
+
+<p>En d'autres termes, l'exemple lance le changement de la position de la tête de lecture à 10 secondes dans le média, et lance la lecture quand c'est fait.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td>{{CompatChrome(42.0)}}
+    <p> </p>
+   </td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</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>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatChrome(42.0)}}
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Supprimé dans Gecko 1.9.2.</p>
diff --git a/files/fr/web/guide/dom/events/index.html b/files/fr/web/guide/dom/events/index.html
new file mode 100644
index 0000000000..475aa10cde
--- /dev/null
+++ b/files/fr/web/guide/dom/events/index.html
@@ -0,0 +1,18 @@
+---
+title: Event developer guide
+slug: Web/Guide/DOM/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - TopicStub
+  - events
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+
+<p>Tout ce que vous devez savoir sur les événements sera présenté ici. Nous travaillons sur le nettoyage ici maintenant.</p>
+
+<h2 id="Docs">Docs</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html b/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html
new file mode 100644
index 0000000000..f7f7f0c204
--- /dev/null
+++ b/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html
@@ -0,0 +1,76 @@
+---
+title: Les données d'orientation et de mouvement expliquées
+slug: Web/Guide/DOM/Events/Les_données_d_orientation_et_de_mouvement_expliquées
+tags:
+  - Coordonnées
+  - Mobile
+  - Mouvement
+  - Orientation
+  - rotation
+translation_of: Web/Guide/Events/Orientation_and_motion_data_explained
+---
+<p>{{ Draft() }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Lorsque vous utilisez des événements d'orientation et de mouvement, il est important de comprendre les valeurs que vous donne le navigateur. Cet article fournit des détails sur les systèmes de coordonnées en jeu et comment vous les utilisez.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> Actuellement, Firefox et Chrome ne gèrent pas ces  coordonnées de la même manière. Prenez-y garde en les utilisant.</p>
+</div>
+
+<h2 id="À_propos_des_cadres_de_coordonnées">À propos des cadres de coordonnées</h2>
+
+<p>Un <strong>cadre de coordonnées</strong> est un système grâce auquel l'orientation des trois axes (X, Y et Z) d'un objet est définie. Il existe deux cadres de coordonnées à prendre en compte lors de l'utilisation d'événements d'orientation et de mouvement:</p>
+
+<h3 id="Le_cadre_de_coordonnées_de_la_Terre">Le cadre de coordonnées de la Terre</h3>
+
+<p>Le cadre de coordonnées de la Terre est celui basé sur le centre de la Terre ; c'est-à-dire que les axes sont alignés sur la base de l'attraction de la gravité et de l'orientation nord magnétique standard. Nous utilisons des lettres majuscules ("X", "Y" et "Z") pour décrire les axes du cadre de coordonnées de la Terre.</p>
+
+<ul>
+ <li>L'axe <strong>X</strong>  suit le plan du sol, perpendiculaire à l'axe Y, et positif vers l'est (et donc négatif vers l'ouest).</li>
+ <li>L'axe <strong>Y</strong> suit le plan du sol et est positif vers le vrai nord (c'est-à-dire le pôle nord, pas le nord magnétique) et négatif vers le vrai sud.</li>
+ <li>L'axe <strong>Z</strong> est perpendiculaire au plan du sol ; pensez-y comme une ligne tracée entre l'appareil et le centre de la Terre. La valeur de la coordonnée Z est positive vers le haut (loin du centre de la Terre) et négative vers le bas (vers le centre de la Terre).</li>
+</ul>
+
+<h3 id="Le_cadre_de_coordonnées_de_l'appareil">Le cadre de coordonnées de l'appareil</h3>
+
+<p>Le cadre de coordonnées de l'appareil est basé sur le centre de l'appareil. Nous utilisons des lettres minuscules ("x", "y" et "z") pour décrire les axes du cadre de coordonnées de l'appareil.</p>
+
+<p><img alt="axes.png" class="default internal" src="/@api/deki/files/5694/=axes.png"></p>
+
+<ul>
+ <li>L'axe <strong>x</strong> est dans le plan de l'écran et est positif vers la droite et négatif vers la gauche.</li>
+ <li>L'axe <strong>y</strong> est dans le plan de l'écran et est positif vers le haut et négatif vers le bas.</li>
+ <li>L'axe <strong>z</strong> est perpendiculaire à l'écran ou au clavier et positif à partir de l'écran.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Sur un téléphone ou une tablette, l'orientation de l'appareil est toujours considérée par rapport à l'orientation standard de l'écran ; c'est l'orientation "portrait" sur la plupart des appareils. Sur un ordinateur portable, l'orientation est considérée par rapport au clavier. Si vous voulez détecter les changements d'orientation de l'appareil pour compenser, vous pouvez utiliser l'évènement <code>orientationchange</code>.</div>
+
+<h2 id="À_propos_de_la_rotation">À propos de la rotation</h2>
+
+<p>La rotation est décrite  pour un axe donné en nombre de degrés d'écart entre le cadre de coordonnées de l'appareil et le cadre de coordonnées de la Terre, et est mesurée en degrés.</p>
+
+<h3 id="Alpha">Alpha</h3>
+
+<p>La rotation autour de l'axe z -- c'est-à-dire, son déplacement latéral, vers la gauche ou la droite - fait changer l'angle de rotation alpha :</p>
+
+<p><img alt="alpha.png" class="default internal" src="/@api/deki/files/5695/=alpha.png"></p>
+
+<p>L'angle alpha est de 0° quand le haut de l'appareil pointe vers le pôle nord, et augmente lorsque l'appareil est tourné vers la gauche.</p>
+
+<h3 id="Beta">Beta</h3>
+
+<p>La rotation autour de l'axe x -- c'est-à-dire, l'inclinaison de l'appareil de ou vers l'utilisateur -- provoque le changement de l'angle de rotation <strong>beta</strong> :</p>
+
+<p><img alt="beta.png" class="default internal" src="/@api/deki/files/5696/=beta.png"></p>
+
+<p>L'angle beta est de 0° lorsque le haut et le bas de l'appareil sont à la même distance de la surface de la Terre, et augmente vers 180 ° lorsque l'appareil est incliné vers l'avant et diminue vers -180 ° lorsque l'appareil est incliné vers l'arrière.</p>
+
+<h3 id="Gamma">Gamma</h3>
+
+<p>La rotation autour de l'axe Y -- c'est-à-dire, l'inclinaison de l'appareil vers la gauche ou la droite -- modifie l'angle de rotation <strong>gamma</strong> :</p>
+
+<p><img alt="gamma.png" class="default internal" src="/@api/deki/files/5697/=gamma.png"></p>
+
+<p>L'angle gamma est de 0° lorsque les côtés gauche et droit de l'appareil sont à la même distance de la surface de la Terre et augmente vers 90 ° lorsque l'appareil est incliné vers la droite, et vers -90 ° lorsque l'appareil est incliné vers la gauche.</p>
diff --git a/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html b/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html
new file mode 100644
index 0000000000..97174a4763
--- /dev/null
+++ b/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html
@@ -0,0 +1,64 @@
+---
+title: Gérer à la fois événement tactile et événement de la souris
+slug: >-
+  Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris
+translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à <em>émuler</em> les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours <em>tel quel </em>sans modification directe.</p>
+
+<p>Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.</p>
+
+<h2 id="Déclenchement_de_l'événement">Déclenchement de l'événement</h2>
+
+<p>La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section <a href="https://w3c.github.io/touch-events/#mouse-events"><em>Interaction with Mouse Events and click</em></a> pour plus de détails), noter que <em>le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur.</em> Cette section décrit les exigences pouvant affecter une application.</p>
+
+<p>Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur <em>doit</em> déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.</p>
+
+<p>Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle <code>preventDefault()</code>.</p>
+
+<pre class="brush: js">// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Ordre_des_événements">Ordre des événements</h2>
+
+<p>Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est <em>représentatif:</em> pour une entrée :</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
+ <li><code>touchend</code></li>
+ <li><code>mousemove</code></li>
+ <li><code>mousedown</code></li>
+ <li><code>mouseup</code></li>
+ <li><code>click</code></li>
+</ul>
+
+<p>Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
+ <li><code>touchend</code></li>
+</ul>
+
+<h2 id="Community">Community</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Touch Events Community Group</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
+</ul>
+
+<h2 id="Related_topics_and_resources">Related topics and resources</h2>
+
+<ul>
+ <li><a href="/Web/API/Touch_events">Touch Events Overview</a></li>
+ <li><a href="/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li>
+ <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+</ul>
diff --git a/files/fr/web/guide/dom/events/touch_events/index.html b/files/fr/web/guide/dom/events/touch_events/index.html
new file mode 100644
index 0000000000..7f3cbae7b5
--- /dev/null
+++ b/files/fr/web/guide/dom/events/touch_events/index.html
@@ -0,0 +1,245 @@
+---
+title: Événements tactiles / Touch events
+slug: Web/Guide/DOM/Events/Touch_events
+tags:
+  - Tactile
+  - touch
+translation_of: Web/API/Touch_events
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (<em>touch events</em>) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).</p>
+
+<h2 id="Définitions">Définitions</h2>
+
+<dl>
+ <dt>Surface</dt>
+ <dd>La surface tactile. Cela peut être un écran ou un trackpad.</dd>
+</dl>
+
+<dl>
+ <dt><strong style="font-weight: bold;">Point de toucher (<em>Touch point</em>)</strong></dt>
+ <dd>Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{ domxref("TouchEvent") }}</dt>
+ <dd>Représente l'événement qui se produit quand l'action de toucher change.</dd>
+ <dt>{{ domxref("Touch") }}</dt>
+ <dd>Représente un point unique de contact entre l'utilisateur et la surface tactile.</dd>
+ <dt>{{ domxref("TouchList") }}</dt>
+ <dd>Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.</dd>
+ <dt>{{ domxref("DocumentTouch") }}</dt>
+ <dd>Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</p>
+
+<div class="note"><strong>Note :</strong> Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).</div>
+
+<h3 id="Initialiser_les_gestionnaires_d'événements">Initialiser les gestionnaires d'événements</h3>
+
+<p>Quand la page charge, la fonction <code>startup()</code> décrite ci-dessous est appelée par l'attribut <code>onload</code> de l'élément {{ HTMLElement("body") }}.</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+</pre>
+
+<p>Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.</p>
+
+<h3 id="Gérer_les_nouveaux_touchers">Gérer les nouveaux touchers</h3>
+
+<p>Quand un événement <code>touchstart</code> se produit, cela indique qu'un nouveau toucher s'est produit. La fonction <code>handleStart()</code> est alors appelée.</p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+</pre>
+
+<p>Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.</p>
+
+<p>Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).</p>
+
+<h3 id="Dessiner_avec_les_déplacements">Dessiner avec les déplacements</h3>
+
+<p>Chaque fois que le(s) doigt(s) bouge(nt), un événement <code>touchmove</code> est déclenché, ce qui provoque l'appel de la fonction <code>handleMove()</code> que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // mettre à jour la liste des touchers
+  }
+}
+</pre>
+
+<p>Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.</p>
+
+<p>Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.</p>
+
+<p>Une fois le segment dessiné, on appelle <a href="/fr/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau <code>ongoingTouches</code>.</p>
+
+<h3 id="Gérer_la_fin_d'un_toucher">Gérer la fin d'un toucher</h3>
+
+<p>Lorsqu'un utilisateur enlève son doigt de la surface, un événement <code>touchend</code> est envoyé. De la même manière, un événement <code>touchleave</code> sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction <code>handleEnd()</code> ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // On enlève le point
+  }
+}
+</pre>
+
+<p>Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.</p>
+
+<h3 id="Gérer_l'annulation_d'un_toucher">Gérer l'annulation d'un toucher</h3>
+
+<p>Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement <code>touchcancel</code> est envoyé et on appelle alors la fonction <code>handleCancel()</code>.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // on retire le point
+  }
+}
+</pre>
+
+<p>L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.</p>
+
+<h3 id="Fonctions_auxiliaires">Fonctions auxiliaires</h3>
+
+<p>Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.</p>
+
+<h4 id="Sélectionner_une_couleur_pour_chaque_toucher">Sélectionner une couleur pour chaque toucher</h4>
+
+<p>Afin que chaque contact soit différent, on utilisera la fonction <code>colorForTouch()</code> pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // creer un nombre hexadécimal
+  return "#" + id + id + id;
+}
+</pre>
+
+<p>Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".</p>
+
+<h4 id="Retrouver_un_toucher_en_cours">Retrouver un toucher en cours</h4>
+
+<p>La fonction <code>ongoingTouchIndexById()</code> analyse le tableau <code>ongoingTouches</code> pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i&lt;ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // toucher non trouvé
+}
+</pre>
+
+<p><a href="/samples/domref/touchevents.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Astuces_supplémentaires">Astuces supplémentaires</h2>
+
+<p>Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.</p>
+
+<h3 id="Gérer_les_clics">Gérer les clics</h3>
+
+<p>Étant donné que l'appel de la méthode <code>preventDefault()</code> sur l'événement  <code>touchstart</code> ou le premier événement <code>touchmove</code> de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  <code>preventDefault()</code> sur <code>touchmove</code> plutôt que sur <code>touchstart</code>. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt);
+}
+</pre>
+
+<h3 id="Appeler_preventDefault()_uniquement_pour_un_deuxième_toucher">Appeler preventDefault() uniquement pour un deuxième toucher</h3>
+
+<p>Pour éviter que des événements de zoom (comme <code>pinchZoom</code>) ne se produisent sur la page, il est possible d'appeler la méthode <code>preventDefault()</code> sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (<em>viewport</em>) pour éviter un zoom quelconque.</p>
+
+<dl>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Touch")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3>
+
+<p>Le paramètre <code>dom.w3c_touch_events.enabled</code> peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.</p>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("12.0") }}</p>
+
+<p>Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.</p>
+</div>
+
+<div class="note"><strong>Note : </strong>Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">API propriétaire pour les événements tactile.</a> Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.</div>