From 8be08b2f3d7d89f450b4eca058961680cacff69d Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 11 Nov 2021 08:13:17 +0100 Subject: Fix markdown conversion errors (#3018) --- files/fr/web/guide/user_input_methods/index.html | 44 +++++++++++------------- 1 file changed, 21 insertions(+), 23 deletions(-) (limited to 'files/fr/web/guide/user_input_methods') diff --git a/files/fr/web/guide/user_input_methods/index.html b/files/fr/web/guide/user_input_methods/index.html index 286b5940c5..b2f48453e0 100644 --- a/files/fr/web/guide/user_input_methods/index.html +++ b/files/fr/web/guide/user_input_methods/index.html @@ -3,15 +3,13 @@ title: Entrées utilisateur et méthodes slug: Web/Guide/User_input_methods translation_of: Web/Guide/User_input_methods --- -
-

Les entrées utilisateur modernes vont au-delà du simple clavier et souris: pensez aux écrans tactiles par exemple. Cet article fournit des recommendations pour gérer les entrées utilisateur et implémenter les contrôles des Open Web Apps, ainsi que des FAQs, des exemples concrets, et des liens pour ceux qui ont besoin d'informations supplémentaires sur les technologies utilisées. Les APIs et événements abordés sont en autre les événements tactiles, l'API Pointer Lock, l'API Screen Orientation, l'API Fullscreen et Drag & Drop.

-
+

Les entrées utilisateur modernes vont au-delà du simple clavier et souris: pensez aux écrans tactiles par exemple. Cet article fournit des recommendations pour gérer les entrées utilisateur et implémenter les contrôles des Open Web Apps, ainsi que des FAQs, des exemples concrets, et des liens pour ceux qui ont besoin d'informations supplémentaires sur les technologies utilisées. Les APIs et événements abordés sont en autre les événements tactiles, l'API Pointer Lock, l'API Screen Orientation, l'API Fullscreen et Drag & Drop.

Workflow entrées utilisateur et contrôles

La diagramme suivant illustre le déroulement des opérations typique pour implémenter les mécanismes d'entrée utilisateur:

-

+

Tout d'abord vous devez décider quels mécanismes en entrées vous voulez prendre en charge dans votre application: souris, clavier, doigt, etc. Une fois que vous avez décidé, vous pouvez les contrôler en utilisant les outils offerts par la plateforme web ou par des bibliothèques JavaScript.

@@ -40,7 +38,7 @@ window.addEventListener("keyup", handleKeyUp, true);

où handleKeyDown et handleKeyUp sont des fonctions implémentant les contrôles sur les événements keydown et keyup.

-

Note: Jetez un coup d'oeil à la Référence des événements et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier.

+

Note : Jetez un coup d'oeil à la Référence des événements et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier.

Souris

@@ -64,7 +62,7 @@ element.addEventListener("touchmove", handleMove, false);

où element est l'élément du DOM sur lequel vous voulez enregistrer les événements tactiles.

-

Note: Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des événements tactiles.

+

Note : Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des événements tactiles.

Événements de pointeur

@@ -72,7 +70,7 @@ element.addEventListener("touchmove", handleMove, false);

Quand vous avez affaire à des appareils qui incorporent de multiples formes d'entrée, comme la souris, le toucher du doigt et la saisie au stylet, il peut être difficile de développer une solution qui marche pour tous ces mécanismes de contrôle différents. Les événements de pointeur aident les développeurs à gérer plus facilement les événements sur les appareils en normalisant le traitement de chacun d'entre eux. Un pointeur peut être n'importe quel contact sur l'écran, fait par le curseur d'une souris, d'un stylo, le toucher (y compris multi-touch) ou autre périphérique d'entrée de pointage. Les événements génériques pour gérer la saisie du pointeur ressemblent beaucoup à ceux pour la souris: pointerdown, pointermove, pointerup, pointerover, pointerout, etc.

-

Note: Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le polyfill pointer.js est disponible sur le compte GitHub de Mozilla.

+

Note : Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le polyfill pointer.js est disponible sur le compte GitHub de Mozilla.

Implémentez les contrôles

@@ -86,7 +84,7 @@ element.addEventListener("touchmove", handleMove, false); 
element.requestPointerLock();
-

Note: Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}.

+

Note : Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}.

Orientation de l'écran

@@ -96,26 +94,26 @@ element.addEventListener("touchmove", handleMove, false);

Les données d'orientation peuvent être récupérées à travers l'attribut {{domxref("screen.orientation")}} ou à travers la media query orientation. Quand screen.orientation change, l'événement {{domxref("screen.orientationchange")}} est declenché sur l'objet screen. Verrouiller l'orientation de l'écran en possible en invoquant la méthode {{domxref("screen.lockOrientation")}}, tandis que la méthode {{domxref("screen.unlockOrientation")}} supprime le verrouillage de l'écran précédemment définit.

-

Note: Pour plus d'informations sur l'API Screen Orientation API consultez Gérer l'orientation de l'écran.

+

Note : Pour plus d'informations sur l'API Screen Orientation API consultez Gérer l'orientation de l'écran.

Plein écran

Vous pourriez avoir besoin de présenter un élément de votre application (comme une {{ htmlelement("video") }} par exemple) en mode plein écran. Vous pouvez y parvenir en appelant {{domxref("Element.requestFullscreen()")}} sur cet élément. Gardez à l'esprit que beaucoup de navigateurs l'implémentent encore avec un préfixe de fournisseur, vous aurez donc probablement besoin de découper votre code ainsi:

-
var elem = document.getElementById("myvideo");
-if (elem.requestFullscreen) {
-  elem.requestFullscreen();
-} else if (elem.msRequestFullscreen) {
-  elem.msRequestFullscreen();
-} else if (elem.mozRequestFullScreen) {
-  elem.mozRequestFullScreen();
-} else if (elem.webkitRequestFullscreen) {
-  elem.webkitRequestFullscreen();
-}
+
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+} else if (elem.msRequestFullscreen) {
+  elem.msRequestFullscreen();
+} else if (elem.mozRequestFullScreen) {
+  elem.mozRequestFullScreen();
+} else if (elem.webkitRequestFullscreen) {
+  elem.webkitRequestFullscreen();
+}
-

Note: Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation utiliser le plein écran.

+

Note : Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation utiliser le plein écran.

Drag & Drop

@@ -126,7 +124,7 @@ element.addEventListener("touchmove", handleMove, false); 
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être déplacé')">
     Ce texte <strong>peut</strong> être déplacé.
-
</div>
+</div>

Ici, on

@@ -136,7 +134,7 @@ element.addEventListener("touchmove", handleMove, false);
-

Note: Vous pouvez trouver plus d'informations dans la documentation MDN Drag & Drop.

+

Note : Vous pouvez trouver plus d'informations dans la documentation MDN Drag & Drop.

contentEditable

@@ -148,7 +146,7 @@ element.addEventListener("touchmove", handleMove, false); </div>
-

Note: Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide Contenu Éditable.

+

Note : Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide Contenu Éditable.

Exemples

-- cgit v1.2.3-54-g00ecf