aboutsummaryrefslogtreecommitdiff
path: root/files/fr/orphaned/web
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2021-04-21 00:11:44 +0000
committerMDN <actions@users.noreply.github.com>2021-04-21 00:11:44 +0000
commitde630426a538c1f77d7c59e66827cb75693ed95b (patch)
treeff14c2d2677ed2137a84d3c322fa2f62e206e63a /files/fr/orphaned/web
parentd7a27823444dc11c7ff40ca63a78b3b37ab82837 (diff)
downloadtranslated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.gz
translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.tar.bz2
translated-content-de630426a538c1f77d7c59e66827cb75693ed95b.zip
[CRON] sync translated content
Diffstat (limited to 'files/fr/orphaned/web')
-rw-r--r--files/fr/orphaned/web/api/detecting_device_orientation/index.html220
-rw-r--r--files/fr/orphaned/web/api/document_object_model/events/index.html75
-rw-r--r--files/fr/orphaned/web/guide/events/index.html19
-rw-r--r--files/fr/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html77
4 files changed, 391 insertions, 0 deletions
diff --git a/files/fr/orphaned/web/api/detecting_device_orientation/index.html b/files/fr/orphaned/web/api/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..42b8cec296
--- /dev/null
+++ b/files/fr/orphaned/web/api/detecting_device_orientation/index.html
@@ -0,0 +1,220 @@
+---
+title: Détecter l'orientation de l'appareil
+slug: orphaned/Web/API/Detecting_device_orientation
+tags:
+ - Device Orientation
+ - Firefox OS
+ - Mobile
+ - Motion
+ - Orientation
+translation_of: Web/API/Detecting_device_orientation
+original_slug: 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>{{Compat("api.DeviceOrientationEvent")}}</p>
+
+<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/orphaned/web/api/document_object_model/events/index.html b/files/fr/orphaned/web/api/document_object_model/events/index.html
new file mode 100644
index 0000000000..7e3d544c5a
--- /dev/null
+++ b/files/fr/orphaned/web/api/document_object_model/events/index.html
@@ -0,0 +1,75 @@
+---
+title: Les évènements et le DOM
+slug: orphaned/Web/API/Document_Object_Model/Events
+tags:
+ - API
+ - DOM
+ - Guide
+ - évènements
+translation_of: Web/API/Document_Object_Model/Events
+original_slug: Web/API/Document_Object_Model/Events
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Ce chapitre décrit le modèle d'événement DOM. L'interface <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les <a href="https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener">écouteurs d'évènements</a> et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.</p>
+
+<p>Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">document sur les évènements DOM Niveau 3</a>.</p>
+
+<p>Voir aussi l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">exemple 5 : Propagation des évènements</a> dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Enregistrement des écouteurs d'évènements</h2>
+
+<p>Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+</pre>
+
+<p>C'est la méthode à utiliser dans les pages web modernes.</p>
+
+<p>Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.</p>
+
+<p>Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">attribut HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">Propriétés d'un élément DOM</h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>La fonction peut être définie pour prendre un paramètre d'<code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.</p>
+
+<h2 id="Accès_aux_interfaces_d'évènements">Accès aux interfaces d'évènements</h2>
+
+<p>Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux">objet fenêtre</a>, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.</p>
+
+<p>L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.</p>
+
+<pre class="brush: js">function foo(evt) {
+ // le paramètre evt est automatiquement assigné à l'objet évènement
+ alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les évènements et le DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>
diff --git a/files/fr/orphaned/web/guide/events/index.html b/files/fr/orphaned/web/guide/events/index.html
new file mode 100644
index 0000000000..4ed6e68693
--- /dev/null
+++ b/files/fr/orphaned/web/guide/events/index.html
@@ -0,0 +1,19 @@
+---
+title: Event developer guide
+slug: orphaned/Web/Guide/Events
+tags:
+ - DOM
+ - Event
+ - Guide
+ - TopicStub
+ - events
+translation_of: Web/Guide/Events
+original_slug: 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/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/fr/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html
new file mode 100644
index 0000000000..e0d044bfb2
--- /dev/null
+++ b/files/fr/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html
@@ -0,0 +1,77 @@
+---
+title: Les données d'orientation et de mouvement expliquées
+slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained
+tags:
+ - Coordonnées
+ - Mobile
+ - Mouvement
+ - Orientation
+ - rotation
+translation_of: Web/Guide/Events/Orientation_and_motion_data_explained
+original_slug: 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>