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/ajax/community/index.html | 4 +- files/fr/web/guide/ajax/getting_started/index.html | 34 ++++----- files/fr/web/guide/ajax/index.html | 6 +- .../index.html | 10 +-- .../buffering_seeking_time_ranges/index.html | 16 ++--- .../web/guide/audio_and_video_delivery/index.html | 8 +-- .../live_streaming_web_audio_and_video/index.html | 27 +++---- .../guide/audio_and_video_manipulation/index.html | 47 ++++++------- files/fr/web/guide/graphics/index.html | 22 +++--- .../web/guide/html/content_categories/index.html | 20 +++--- files/fr/web/guide/index.html | 82 ++++++++++------------ .../introduction_to_web_development/index.html | 5 +- files/fr/web/guide/user_input_methods/index.html | 44 ++++++------ 13 files changed, 151 insertions(+), 174 deletions(-) diff --git a/files/fr/web/guide/ajax/community/index.html b/files/fr/web/guide/ajax/community/index.html index da36f8abca..935a72879e 100644 --- a/files/fr/web/guide/ajax/community/index.html +++ b/files/fr/web/guide/ajax/community/index.html @@ -10,6 +10,4 @@ original_slug: Web/Guide/AJAX/Communauté

Si vous connaissez d'autres listes de diffusion, newsgroups, forums ou d'autres communautés ayant trait à AJAX, n'hésitez pas à ajouter un lien ci-dessous.

http://www.ajaxlines.com (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet.

http://www.ajaxmatters.com - Portail d'informations sur AJAX et les technologies Web associées (anglais). -


-Liens Interwikis -

{{ languages( { "en": "en/AJAX/Community", "ja": "ja/AJAX/Community" } ) }} +

\ No newline at end of file diff --git a/files/fr/web/guide/ajax/getting_started/index.html b/files/fr/web/guide/ajax/getting_started/index.html index 703af2bb55..9aa61def8d 100644 --- a/files/fr/web/guide/ajax/getting_started/index.html +++ b/files/fr/web/guide/ajax/getting_started/index.html @@ -8,7 +8,7 @@ original_slug: Web/Guide/AJAX/Premiers_pas ---

Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.

-

Présentation d’AJAX

+

Présentation d’AJAX

AJAX est un raccourci pour Asynchronous JavaScript And XML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet XMLHttpRequest pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger.

@@ -19,7 +19,7 @@ original_slug: Web/Guide/AJAX/Premiers_pas
  • recevoir et travailler avec des données provenant du serveur.
    • -

    Étape 1 — Lancement d’une requête HTTP

    +

    Étape 1 — Lancement d’une requête HTTP

    Pour faire une requête HTTP vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que XMLHttpRequest intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé XMLHTTP. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Entre temps, Microsoft a également implémenté XMLHttpRequest.

    @@ -31,8 +31,8 @@ else if (window.ActiveXObject) { // IE 6 et antérieurs httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } -
    -

    Note : Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.

    +
    +

    Note : Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.

    Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet httpRequest le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété onreadystatechange de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :

    @@ -68,7 +68,7 @@ httpRequest.send(); 
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    -

    Étape 2 — Gestion de la réponse du serveur

    +

    Étape 2 — Gestion de la réponse du serveur

    Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.

    @@ -112,7 +112,7 @@ httpRequest.send();

    Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’open() n’a pas été spécifié, ou a été défini à true). Si vous utilisez une requête synchrone, vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur.

    -

    Étape 3 — Un exemple simple

    +

    Étape 3 — Un exemple simple

    Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, test.html, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message alert(). Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier.

    @@ -156,16 +156,16 @@ httpRequest.send();
  • alertContents() vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier test.html dans un message alert().
    • -
    -

    Note : Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête Content-Type: application/xml, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.

    +
    +

    Note : Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête Content-Type: application/xml, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.

    -
    -

    Note 2 : Si vous ne spécifiez pas l’en-tête Cache-Control: no-cache, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir contourner le cache).

    +
    +

    Note : Si vous ne spécifiez pas l’en-tête Cache-Control: no-cache, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir contourner le cache).

    -
    -

    Note 3 : Si la variable httpRequest est utilisée globalement, des appels concurrents à makeRequest() peuvent s’écraser l’un l’autre, provoquant une situation de compétition (race condition). On peut s’en prémunir en déclarant la variable httpRequest locale à une closure contenant les fonctions AJAX.

    +
    +

    Note : Si la variable httpRequest est utilisée globalement, des appels concurrents à makeRequest() peuvent s’écraser l’un l’autre, provoquant une situation de compétition (race condition). On peut s’en prémunir en déclarant la variable httpRequest locale à une closure contenant les fonctions AJAX.

    Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode onreadystatechange lors de l’accès à la propriété status. Pour atténuer ce problème, vous pouvez entourer votre bloc if...then dans un try...catch :

    @@ -185,9 +185,9 @@ httpRequest.send(); } } -

    Étape 4 — Travailler avec des réponses XML

    +

    Étape 4 — Travailler avec des réponses XML

    -

    Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété responseText de l’objet, qui contenait le contenu du fichier test.html. Essayons maintenant la propriété responseXML.

    +

    Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété responseText de l’objet, qui contenait le contenu du fichier test.html. Essayons maintenant la propriété responseXML.

    Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (test.xml) contient ce qui suit :

    @@ -213,9 +213,9 @@ alert(root_node.firstChild.data);

    Ce code prend l’objet XMLDocument donné par responseXML et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.

    -

    Catégories

    +

    Catégories

    -

    Interwiki

    +

    Interwiki

    Étape 5 – Manipuler les données

    @@ -226,7 +226,7 @@ alert(root_node.firstChild.data); 
    <label>Vore nom :
   <input type="text" id="ajaxTextbox" />
 </label>
-<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+<span id="ajaxButton">
   Lancer une requête
 </span>
    diff --git a/files/fr/web/guide/ajax/index.html b/files/fr/web/guide/ajax/index.html index a7e13ac33a..1cfc6f249b 100644 --- a/files/fr/web/guide/ajax/index.html +++ b/files/fr/web/guide/ajax/index.html @@ -3,8 +3,6 @@ title: AJAX slug: Web/Guide/AJAX translation_of: Web/Guide/AJAX --- -
    Premiers pas
    -Une introduction à AJAX

    AJAX (Asynchronous JavaScript + XML) n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : HTML ou XHTML, les feuilles de styles CSS, JavaScript, le modèle objet de document (DOM), XML, XSLT, et l'objet XMLHttpRequest. Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur.

    @@ -13,7 +11,7 @@ Une introduction à AJAX

    S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : 

      -
    • La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais n'autorise pas davantage que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur doit envoyer des entêtes et négocier la transaction. 
      +
    • La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais n'autorise pas davantage que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur doit envoyer des entêtes et négocier la transaction. 
      La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les WebSockets). 
    • La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est totalement transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage.
      Ne pas confondre possible et souhaitable : AJAX peut négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des raisons de sécurité les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. 
      • @@ -21,7 +19,7 @@ Une introduction à AJAX
    Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc in fine des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (voir le principe de dégradation élégante) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs.  - +
    diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html index 07f69aff17..5e20228556 100644 --- a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html @@ -5,11 +5,11 @@ translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC original_slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC ---

    {{SeeCompatTable}}

    -

    Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi navigator.mozGetUserMedia() à accéder au microphone et à la webcam (getUserMedia() est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).

    -

    La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C WebRTC et getUserMedia, ainsi que différents brouillons de IETF, principalement du groupe de travail rtcweb, mais aussi mmusic, rmcat et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à webrtc.org.

    -

    NOTE:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <video> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.

    -

    Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur HTML5 Rocks. On pourra trouver sur le site webrtc-landing une série de page de test basique.

    -

    Il est possible de faire un appel simple de personne à personne  (y compris à ceux utilisant Chrome) à apprtc.appspot.com.

    +

    Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi navigator.mozGetUserMedia() à accéder au microphone et à la webcam (getUserMedia() est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).

    +

    La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C WebRTC et getUserMedia, ainsi que différents brouillons de IETF, principalement du groupe de travail rtcweb, mais aussi mmusic, rmcat et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à webrtc.org.

    +

    NOTE:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <video> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.

    +

    Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur HTML5 Rocks. On pourra trouver sur le site webrtc-landing une série de page de test basique.

    +

    Il est possible de faire un appel simple de personne à personne  (y compris à ceux utilisant Chrome) à apprtc.appspot.com.

    Un article de Hacks décrit avec précision ce qu'il se passe dans une connexion RTCPeerConnecion (lien) :

    Basics of RTCPeerConnection call setup

    diff --git a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html index 89be1e7ca4..c7be3a71e6 100644 --- a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html +++ b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html @@ -11,9 +11,9 @@ tags: - seeking translation_of: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges --- -
    -

    Il est parfois utile de savoir combien d'{{htmlelement("audio") }} ou {{htmlelement("video") }} a été téléchargé ou peut être joué sans délai — par exemple pour afficher la barre de progression du tampon dans un lecteur audio ou vidéo. Cet article explique comment construire une barre de progrès de mise en mémoire tampon en utilisant TimeRanges, et d'autres fonctionnalités de l'API Media.

    -
    + +

    Il est parfois utile de savoir combien d'{{htmlelement("audio") }} ou {{htmlelement("video") }} a été téléchargé ou peut être joué sans délai — par exemple pour afficher la barre de progression du tampon dans un lecteur audio ou vidéo. Cet article explique comment construire une barre de progrès de mise en mémoire tampon en utilisant TimeRanges, et d'autres fonctionnalités de l'API Media.

    +

    Buffered

    @@ -102,10 +102,10 @@ myAudio.buffered.end(1); // returns 19

    Cela fonctionne mieux avec les morceaux audio ou vidéo un peu plus longs, mais appuyez sur play et cliquez sur la barre de progression du lecteur et vous devriez obtenir quelque chose comme ci-dessous. Chaque rectangle rouge remplissant le rectangle blanc représente une plage de temps.

    -

    A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges.

    +

    -

    Note: Vous pouvez voir cet exemple en direct sur JS Bin.

    +

    Note : Vous pouvez voir cet exemple en direct sur JS Bin.

    Seekable

    @@ -123,7 +123,7 @@ myAudio.buffered.end(1); // returns 19 
    var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);
    -

    Note: myAudio.seekable.end(myAudio.seekable.length - 1) nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — audio.seekable sera l'équivalent de audio.buffered — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément.

    +

    Note : myAudio.seekable.end(myAudio.seekable.length - 1) nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — audio.seekable sera l'équivalent de audio.buffered — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément.

    Il est peut-être préférable de donner une indication de la quantité de média effectivement téléchargée — c'est ce que les lecteurs natifs du navigateur semblent indiquer.

    @@ -203,10 +203,10 @@ myAudio.buffered.end(1); // returns 19

    Cela devrait vous donner des résultats similaires à ce qui suit, où la barre gris clair représente la progression de la mise en mémoire tampon et la barre verte montre la progression de la lecture:

    -

    A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered.

    +

    -

    Note: Voir pouvez voir l'exemple en direct sur JS Bin.

    +

    Note : Voir pouvez voir l'exemple en direct sur JS Bin.

    Un petit mot sur Played

    diff --git a/files/fr/web/guide/audio_and_video_delivery/index.html b/files/fr/web/guide/audio_and_video_delivery/index.html index ec4ed3f773..9b5ede8e2d 100644 --- a/files/fr/web/guide/audio_and_video_delivery/index.html +++ b/files/fr/web/guide/audio_and_video_delivery/index.html @@ -38,7 +38,7 @@ translation_of: Web/Guide/Audio_and_video_delivery

    Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecture fluide.

    -

    Note : l'attribut preload peut être ignoré par certains navigateurs mobiles.

    +

    Note : l'attribut preload peut être ignoré par certains navigateurs mobiles.

    Pour plus d'informations voir Les bases de l'audio multi-navigateur (Audio HTML5 en détails)

    @@ -62,7 +62,7 @@ translation_of: Web/Guide/Audio_and_video_delivery

    Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une vignette jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en autoplay (jouer automatiquement) mais d'être muted (en sourdine) par défaut.

    -

    Note : l'attribut autoplay peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire le guide à ce sujet pour savoir comment l'utiliser pertinemment.

    +

    Note : l'attribut autoplay peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire le guide à ce sujet pour savoir comment l'utiliser pertinemment.

    Pour plus d'informations voir l'article de référence sur l'élément <video> et la page sur la création d'un lecteur vidéo multi-navigateur.

    @@ -83,7 +83,7 @@ myAudio.play();

    On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis nous plaçons la tête de lecture à 5 secondes et essayons de lire le fichier.

    -

    Note : play() sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.

    +

    Note : play() sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.

    Il est également possible de donner un fichier WAV encodé en base64 à l'élément <audio>, permettant ainsi de générer de l'audio à la volée :

    @@ -216,7 +216,7 @@ navigator.mediaDevices.getUserMedia({audio:true})

    Les principaux encodages utilisés pour le streaming adaptatif sont HLS et MPEG-DASH. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon ISOBMFF et M2TS (deux formats pris en charge par DASH, le dernier étant également pris en charge par HLS). DASH est probablement la meilleure option en termes de compatibilité, standard et flexibilité.

    -

    Note : actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.

    +

    Note : actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.

    DASH fournit également un certain nombre de profils, y compris des profils à la demande simples, sans pré-traitement ni séparation des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.

    diff --git a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html index 46c17d9604..15662fe166 100644 --- a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html +++ b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html @@ -6,9 +6,8 @@ tags: - Streaming adaptatif translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video --- -
    -

    La technologie de live streaming (diffusion en direct) est souvent utilisée pour relayer des événements en direct, tels que le sport, les concerts, ou de manière plus générale les programmes TV et radio en direct. Souvent raccourci au simple terme de streaming, le live streaming est le processus de transmissions d'un média live (c'est à dire dynamique et non statique) aux ordinateurs et aux périphériques. C'est un sujet assez complexe et nouveau avec beaucoup de variables à prendre en considération, dans cet article nous allons vous introduire le sujet et vous donner des clés pour démarrer.

    -
    + +

    La technologie de live streaming (diffusion en direct) est souvent utilisée pour relayer des événements en direct, tels que le sport, les concerts, ou de manière plus générale les programmes TV et radio en direct. Souvent raccourci au simple terme de streaming, le live streaming est le processus de transmissions d'un média live (c'est à dire dynamique et non statique) aux ordinateurs et aux périphériques. C'est un sujet assez complexe et nouveau avec beaucoup de variables à prendre en considération, dans cet article nous allons vous introduire le sujet et vous donner des clés pour démarrer.

    La première chose à avoir en tête quand on diffuse un live stream à un navigateur est le fait que, plutôt que de jouer un fichier fini, on relaie un fichier qui est créé à la volée et qui n'a pas de début ou de fin prédéterminé.

    @@ -50,14 +49,16 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_

    Real Time Streaming Protocol (RTSP) contrôle les sessions média entre les entités et il est souvent utilisé en combinaison avec Real-time Transport Protocol (RTP) et Real-time Control Protocol (RTCP) pour délivrer des flux média. Utiliser RTP avec RTCP permet un streaming adaptatif. Il n'est pas encore suporté nativement par la plupart des navigateurs, mais Firefox OS 1.3 supporte RTSP.

    -
    Note: Certains fournisseurs implémentent des protocoles de transfert propriétaires, tel que RealNetworks et leur Real Data Transport (RDT).
    +
    +

    Note : Certains fournisseurs implémentent des protocoles de transfert propriétaires, tel que RealNetworks et leur Real Data Transport (RDT).

    +

    RTSP 2.0

    RTSP 2.0 est actuellement en cours de développement, il n'est pas rétro-compatible avec RTSP 1.0.

    -

    Important: Bien que les balises {{ htmlelement("audio") }} et {{ htmlelement("video") }} soient agnostiques de tout protocole, aucun navigateur ne supporte actuellement autre chose que HTTP sans nécessiter de plugin, bien que cela semble être parti pour changer. De plus, les protocoles autres que HTTP peuvent être bloqués par des pare-feu et des serveurs proxy.

    +

    Attention : Bien que les balises {{ htmlelement("audio") }} et {{ htmlelement("video") }} soient agnostiques de tout protocole, aucun navigateur ne supporte actuellement autre chose que HTTP sans nécessiter de plugin, bien que cela semble être parti pour changer. De plus, les protocoles autres que HTTP peuvent être bloqués par des pare-feu et des serveurs proxy.

    Utiliser des protocoles de streaming

    @@ -77,7 +78,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ Par exemple, vous pourriez implémenter MPEG-DASH en utilisant JavaScript tout en laissant le décodage à la charge de MSE.

    -

    Note: Le décalage temporel est le processus de lire un live stream quelque temps après qu'il ait été diffusé.

    +

    Note : Le décalage temporel est le processus de lire un live stream quelque temps après qu'il ait été diffusé.

    Formats de fichiers Vidéo en Streaming

    @@ -85,7 +86,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_

    Quelques formats de vidéo en live streaming HTTP commençent à être pris en charge parmi les navigateurs.

    -

    Note: Vous pouvez trouver un guide pour encoder HLS et MPEG-DASH pour une utilisation sur le web sur Configuration de sources multimédia en streaming adaptatif.

    +

    Note : Vous pouvez trouver un guide pour encoder HLS et MPEG-DASH pour une utilisation sur le web sur Configuration de sources multimédia en streaming adaptatif.

    MPEG-DASH

    @@ -95,7 +96,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_

    Cette approche permet de télécharger des segments de flux vidéo en utilisant XHR et en "ajoutant" le segment au flux en cours de lecture par l'élément {{ htmlelement("video") }}. Ainsi, par exemple, si l'on détecte que le réseau est lent, on peut demander des segments de moins bonne qualité (plus petits) en cours de route. Cette technologie permet également d'ajouter/insérer un segment publicitaire dans le flux.

    -

    Note: Vous pouvez également utiliser WebM avec le système de streaming adaptatif MPEG DASH.

    +

    Note : Vous pouvez également utiliser WebM avec le système de streaming adaptatif MPEG DASH.

    HLS

    @@ -208,7 +209,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ Actuellement, Opus est supporté par Firefox (bureau et mobile) ainsi que les dernières versions de Chrome bureau et Opera.

    -

    Note: Opus est un format obligatoire pour les implémentations navigateur de WebRTC.

    +

    Note : Opus est un format obligatoire pour les implémentations navigateur de WebRTC.

    MP3, AAC, Ogg Vorbis

    @@ -216,7 +217,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_

    Les formats audio les plus courants peuvent être diffusés en stream en utilisant des technologies spécifiques côté serveur.

    -

    Note: Il est plus facile de diffuser de l'audio en stream en utilisant des formats qui n'ont pas été conçu pour car, contrairement aux vidéos, il n'y a pas de keyframes.

    +

    Note : Il est plus facile de diffuser de l'audio en stream en utilisant des formats qui n'ont pas été conçu pour car, contrairement aux vidéos, il n'y a pas de keyframes.

    Technologies de Streaming côté serveur

    @@ -236,7 +237,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_

    SHOUTcast est une technologie propriétaire multi-plateforme pour diffuser des médias en streaming. Développé par Nullsoft, elle permet de diffuser du contenu audio au format MP3 ou AAC en broadcast. Pour utilisation sur le web, les streams SHOUTcast sont transmis sur HTTP.

    -

    Note: Les urls SHOUTcast peuvent nécessiter l'ajout d'un point-virgule à la fin.

    +

    Note : Les urls SHOUTcast peuvent nécessiter l'ajout d'un point-virgule à la fin.

    Icecast

    @@ -244,7 +245,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_

    Le serveur Icecast est une technologie open source pour diffuser des média en streaming. Maintenu par Xiph.org Foundation, il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC  via le protocole SHOUTcast.

    -

    Note: SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux autres systèmes de diffusion en streaming disponibles.

    +

    Note : SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux autres systèmes de diffusion en streaming disponibles.

    Services de Streaming

    @@ -253,7 +254,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_

    Voir aussi

    -
      +
      • HTTP Live Streaming
      • HLS Browser Support
      • HTTP Live Streaming JavaScript player
        • diff --git a/files/fr/web/guide/audio_and_video_manipulation/index.html b/files/fr/web/guide/audio_and_video_manipulation/index.html index eddaea4d45..1b79154eb7 100644 --- a/files/fr/web/guide/audio_and_video_manipulation/index.html +++ b/files/fr/web/guide/audio_and_video_manipulation/index.html @@ -10,9 +10,7 @@ tags: - WebGL translation_of: Web/Guide/Audio_and_video_manipulation --- -

        La beauté du web est qu'on peut combiner différentes technologies pour en créer de nouvelles. Avoir de l'audio et vidéo nativement dans le navigateur nous donne la possibilité d'utiliser ces flux de données avec d'autres technologies comme {{htmlelement("canvas")}}, WebGL ou Web Audio API pour modifier le média — par exemple ajouter des effets de réverbération ou de compression à l'audio, ou encore des filtres noir & blanc/sépia aux vidéos. Cet article fournit une référence pour expliquer ce que vous pouvez faire.

        -

        Manipulation Vidéo

        @@ -92,11 +90,11 @@ translation_of: Web/Guide/Audio_and_video_manipulation

        {{EmbedLiveSample("Vidéo_et_Canvas", '100%', 550)}}

        -

        Note: En raison de problèmes de sécurité potentiels, si votre vidéo se trouve sur un domaine différent de votre page, vous devez activer CORS (Cross Origin Resource Sharing) sur le serveur qui héberge la vidéo et utiliser l'attribut crossorigin sur la balise vidéo.

        +

        Note : En raison de problèmes de sécurité potentiels, si votre vidéo se trouve sur un domaine différent de votre page, vous devez activer CORS (Cross Origin Resource Sharing) sur le serveur qui héberge la vidéo et utiliser l'attribut crossorigin sur la balise vidéo.

        -

        Note: L'exemple présenté est un exemple minimal de manipulation vidéo avec canvas; pour plus d'efficacité, vous pouvez envisager d'utiliser requestAnimationFrame à la place de setTimeout pour les navigateurs qui le prennent en charge.

        +

        Note : L'exemple présenté est un exemple minimal de manipulation vidéo avec canvas; pour plus d'efficacité, vous pouvez envisager d'utiliser requestAnimationFrame à la place de setTimeout pour les navigateurs qui le prennent en charge.

        Vidéo e WebGL

        @@ -108,7 +106,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation

        {{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}

        -

        Note: Vous pouvez trouver le code source de cette démo sur GitHub (la voir en direct aussi).

        +

        Note : Vous pouvez trouver le code source de cette démo sur GitHub (la voir en direct aussi).

        Vitesse de lecture

        @@ -124,10 +122,9 @@ translation_of: Web/Guide/Audio_and_video_manipulation 
        var myVideo = document.getElementById('my-video');
 myVideo.playbackRate = 2;
        - -

        {{ EmbedLiveSample('Playable_code', 700, 425) }}

        +

        {{ EmbedLiveSample('Code jouable', 700, 425) }}

        -

        Note: Essayez l' exemple playbackRate en direct.

        +

        Note : Essayez l' exemple playbackRate en direct.

        -

        Note : playbackRate marche avec les éléments <audio> et <video>; cependant, dans les deux cas, la vitesse change mais pas la hauteur du son. Pour manipuler la hauteur du son, vous devez utliliser l'API Web Audio — voir la propriété {{domxref("AudioBufferSourceNode.playbackRate")}}.

        +

        Note : playbackRate marche avec les éléments <audio> et <video>; cependant, dans les deux cas, la vitesse change mais pas la hauteur du son. Pour manipuler la hauteur du son, vous devez utliliser l'API Web Audio — voir la propriété {{domxref("AudioBufferSourceNode.playbackRate")}}.

        Manipulation Audio

        @@ -209,10 +205,9 @@ filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25; - -

        {{ EmbedLiveSample('Playable_code_2', 700, 425) }}

        + +

        {{ EmbedLiveSample('Code_jouable_2', 700, 425) }}

        -

        Note: À moins que CORS ne soit activé, vous devrez pour éviter les problèmes de sécurité placer la vidéo sur le même domaine que votre code.

        +

        Note : À moins que CORS ne soit activé, vous devrez pour éviter les problèmes de sécurité placer la vidéo sur le même domaine que votre code.

        Les filtres pouvant être appliqués sont:

        @@ -274,7 +269,7 @@ window.addEventListener('load', setFilter);
      -

      Note: Voir {{domxref("BiquadFilterNode")}} pour plus d'informations.

      +

      Note : Voir {{domxref("BiquadFilterNode")}} pour plus d'informations.

      Convolutions et Impulsions

      @@ -290,11 +285,11 @@ source.connect(convolver); convolver.connect(context.destination);
      -

      Note: Voir ce Codepen pour un exemple appliqué.

      +

      Note : Voir ce Codepen pour un exemple appliqué.

      -

      Note: Voir {{domxref("ConvolverNode")}} pour plus d'informations.

      +

      Note : Voir {{domxref("ConvolverNode")}} pour plus d'informations.

      Audio dans l'espace

      @@ -316,11 +311,11 @@ source.start(0); context.listener.setPosition(0, 0, 0);
      -

      Note: Vous pouvez trouver un exemple sur notre repo GitHub (le voir en direct aussi).

      +

      Note : Vous pouvez trouver un exemple sur notre repo GitHub (le voir en direct aussi).

      -

      Note: Voir {{domxref("PannerNode")}} pour plus d'informations.

      +

      Note : Voir {{domxref("PannerNode")}} pour plus d'informations.

      Codecs JavaScript

      @@ -339,7 +334,7 @@ context.listener.setPosition(0, 0, 0);
    -

    Note: Sur AudioCogs, vous pouvez essayer quelques démos; Audiocogs fournit également un Framework, Aurora.js, qui est destiné à vous aider à créer vos propres codecs en JavaScript.

    +

    Note : Sur AudioCogs, vous pouvez essayer quelques démos; Audiocogs fournit également un Framework, Aurora.js, qui est destiné à vous aider à créer vos propres codecs en JavaScript.

    Tutoriels

    diff --git a/files/fr/web/guide/graphics/index.html b/files/fr/web/guide/graphics/index.html index e9a6b5d812..2f2c7abad4 100644 --- a/files/fr/web/guide/graphics/index.html +++ b/files/fr/web/guide/graphics/index.html @@ -19,9 +19,7 @@ translation_of: Web/Guide/Graphics

    Les articles ci-dessous vous permettront de vous familiariser avec ces technologies.

    -
    -
    -

    Graphismes 2D

    +

    Graphismes 2D

    Dessiner avec les canvas
    @@ -30,23 +28,19 @@ translation_of: Web/Guide/Graphics
    Scalable Vector Graphics (SVG) vous permet d'utiliser des lignes, courbes et  d'autres figures géométriques pour dessiner. Les images SVG n'étant pas des images matricielles, elles permettent de faire des images redimensionnables sans limite.
    -
    -
    -

    Graphismes 3D

    +

    Graphismes 3D

    WebGL
    Un guide pour débuter avec WebGL l'API  graphique 3D, pour le Web. Cette technologie vous permettra d'utiliser le standard OpenGL ES pour du contenu Web.
    -
    -
    -

    Video

    +

    Video

    -
    -
    Utiliser les éléments HTML5 audio et video
    -
    Intégrer de la vidéo et / ou de l'audio dans une page Web
    -
    WebRTC
    -
    Le RTC dans WebRTC est l'abréviation de Real-Time Communications, c'est une technologie qui permet le streaming audio / vidéo et le partage de données entre les clients du navigateur (homologues).
    +
    +
    Utiliser les éléments HTML5 audio et video
    +
    Intégrer de la vidéo et / ou de l'audio dans une page Web
    +
    WebRTC
    +
    Le RTC dans WebRTC est l'abréviation de Real-Time Communications, c'est une technologie qui permet le streaming audio / vidéo et le partage de données entre les clients du navigateur (homologues).
    diff --git a/files/fr/web/guide/html/content_categories/index.html b/files/fr/web/guide/html/content_categories/index.html index 75d379eff4..34db97e760 100644 --- a/files/fr/web/guide/html/content_categories/index.html +++ b/files/fr/web/guide/html/content_categories/index.html @@ -23,7 +23,7 @@ original_slug: Web/Guide/HTML/Catégories_de_contenu

    Note : un discours plus détaillé sur ces catégories de contenu et de leurs fonctionnalités comparatives dépasse le cadre de cet article ; pour en savoir plus, vous pouvez lire les parties correspondantes de la spécification HTML (en).

    -
    Content_categories_venn.png
    +

    Principales catégories de contenu

    @@ -46,28 +46,28 @@ original_slug: Web/Guide/HTML/Catégories_de_contenu
  • {{HTMLElement("style")}} si l'attribut {{htmlattrxref("scoped","style")}} {{deprecated_inline()}} est présent
    • -

    Contenu sectionnant

    +

    Contenu sectionnant

    Les éléments appartenant à cette catégorie sont ceux créant une nouvelle section dans le plan du document qui définit la portée des éléments {{HTMLElement("header")}}, des éléments {{HTMLElement("footer")}} et du contenu de titre.

    Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}. 

    -

    Note : Il ne faut pas confondre ce modèle de contenu avec la catégorie de racine de sectionnement qui isole un contenu par rapport à la structure (ou plan) principale.

    +

    Note : Il ne faut pas confondre ce modèle de contenu avec la catégorie de racine de sectionnement qui isole un contenu par rapport à la structure (ou plan) principale.

    -

    Contenu de titre

    +

    Contenu de titre

    Le contenu de titre définit le titre d'une section, qu'elle soit marquée par un contenu sectionnant de manière explicite ou qu'elle soit définie de manière implicite par le contenu de titre lui-même.

    Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} et {{HTMLElement("hgroup")}}.

    -

    Note : Bien qu'il soit probable qu'un élément {{HTMLElement("header")}} comporte du contenu de titre, il n'est pas lui-même un contenu de titre.

    +

    Note : Bien qu'il soit probable qu'un élément {{HTMLElement("header")}} comporte du contenu de titre, il n'est pas lui-même un contenu de titre.

    -

    Note : {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.

    +

    Note : {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.

    Contenu phrasé

    @@ -134,13 +134,13 @@ original_slug: Web/Guide/HTML/Catégories_de_contenu

     Cette catégorie peut être subdivisée en plusieurs sous-catégories.

    -
    listed (éléments listés)
    +
    listed (éléments listés)
    Les éléments étant listés sont les ensembles IDL form.elements et fieldset.elements. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
    -
    labelable (éléments étiquetables)
    +
    labelable (éléments étiquetables)
    Les éléments pouvant être associés avec des éléments  {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
    -
    submittable (éléments participants à l'envoi du formulaire)
    +
    submittable (éléments participants à l'envoi du formulaire)
    Les éléments pouvant être utilisés pour construire les données du formulaires quand celui-ci est envoyé. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
    -
    resettable (éléments de ré-initialisation)
    +
    resettable (éléments de ré-initialisation)
    Éléments pouvant être impactés lorsqu'un formulaire est ré-initialisé. Ce sont : {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("output")}},{{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
    diff --git a/files/fr/web/guide/index.html b/files/fr/web/guide/index.html index 54392f7516..c649cfd67e 100644 --- a/files/fr/web/guide/index.html +++ b/files/fr/web/guide/index.html @@ -9,55 +9,47 @@ translation_of: Web/Guide ---

    Ces articles sont des tutoriels et guides pratiques permettant d'utiliser certaines API et technologies web.

    -
    -
    +
    -
    Apprendre - HTML
    -
    HyperText Markup Language (HTML) est le langage de base pour la grande partie du contenu web. La plupart de ce que vous voyez à l'écran est décrit en HTML.
    -
    Apprendre - CSS
    -
    Cascading Style Sheets (CSS) est un langage de feuille de styles utilisé afin de définir la présentation d'un document écrit en HTML.
    -
    Fournir de l'audio et/ou de la vidéo
    -
    Il est possible d'intégrer de l'audio et de la vidéo à du contenu web de différentes façons : que ce soit des fichiers statiques ou des flux adaptatifs. Cet article est une introduction à ces différentes méthodes et à la compatibilité pour les principaux navigateurs web.
    -
    Manipuler des données audio ou vidéo
    -
    Il est possible de combiner les technologies web et les médias afin de créer de nouveaux usages. Dans cet article, nous verrons comment utiliser des technologies web telles que {{htmlelement("canvas")}}, WebGL ou l'API Web Audio afin de modifier les fichiers audio ou vidéo directement (en ajoutant des effets de réverbération ou des filtres de couleurs).
    -
    Guide sur les évènements
    -
    Les évènements peuvent désigner deux concepts : un patron de conception permettant de gérer de façon asynchrone ce qui se produit lors de la vue d'une page web d'une part et la liste, les noms et les caractéristiques desdits évènements d'autre part.
    -
    AJAX
    -
    AJAX est un terme regroupant différentes technologies qui permettent aux applications web d'appliquer des mises à jour incrémentales au contenu de la page sans mettre à jour l'intégralité de la page. Cela permet d'obtenir des applications plus rapides et plus réactives.
    -
    Les graphismes sur le Web
    -
    Les sites et applications web modernes utilisent généralement des graphismes (avec différents degrés de sophistication).
    -
    Guide pour les API web
    -
    Une liste de l'ensemble des API web et de leur rôle.
    +
    Apprendre - HTML
    +
    HyperText Markup Language (HTML) est le langage de base pour la grande partie du contenu web. La plupart de ce que vous voyez à l'écran est décrit en HTML.
    +
    Apprendre - CSS
    +
    Cascading Style Sheets (CSS) est un langage de feuille de styles utilisé afin de définir la présentation d'un document écrit en HTML.
    +
    Fournir de l'audio et/ou de la vidéo
    +
    Il est possible d'intégrer de l'audio et de la vidéo à du contenu web de différentes façons : que ce soit des fichiers statiques ou des flux adaptatifs. Cet article est une introduction à ces différentes méthodes et à la compatibilité pour les principaux navigateurs web.
    +
    Manipuler des données audio ou vidéo
    +
    Il est possible de combiner les technologies web et les médias afin de créer de nouveaux usages. Dans cet article, nous verrons comment utiliser des technologies web telles que {{htmlelement("canvas")}}, WebGL ou l'API Web Audio afin de modifier les fichiers audio ou vidéo directement (en ajoutant des effets de réverbération ou des filtres de couleurs).
    +
    Guide sur les évènements
    +
    Les évènements peuvent désigner deux concepts : un patron de conception permettant de gérer de façon asynchrone ce qui se produit lors de la vue d'une page web d'une part et la liste, les noms et les caractéristiques desdits évènements d'autre part.
    +
    AJAX
    +
    AJAX est un terme regroupant différentes technologies qui permettent aux applications web d'appliquer des mises à jour incrémentales au contenu de la page sans mettre à jour l'intégralité de la page. Cela permet d'obtenir des applications plus rapides et plus réactives.
    +
    Les graphismes sur le Web
    +
    Les sites et applications web modernes utilisent généralement des graphismes (avec différents degrés de sophistication).
    +
    Guide pour les API web
    +
    Une liste de l'ensemble des API web et de leur rôle.
    JavaScript
    JavaScript est un langage de script notamment utilisé pour créer des applications sur le Web.
    -
    Localisations et encodages
    -
    En interne, les navigateurs traitent le texte en Unicode. Toutefois, la façon de représenter les caractères sous forme d'octets (l'encodage) est utilisée lors du transfert du texte sur le réseau vers le navigateur. La spécification HTML recommande l'usage de l'encodage UTF-8 (qui peut représenter l'ensemble des caractères Unicode). Quel que soit l'encodage utilisé, le contenu web doit déclarer l'encodage qu'il utilise.
    -
    Développement web pour mobile
    -
    Cet article fournit un aperçu des techniques principales utilisées pour concevoir des sites web qui fonctionnent correctement sur les appareils mobiles. Voir aussi Firefox for Android.
    -
    -
    - -
    -
    -
    Applications web progressives (PWA)
    -
    Les applications web progressives (aussi appelées PWA) utilisent des API web modernes ainsi que des techniques d'amélioration progressive afin de créer des applications web fonctionnant sur différentes plateformes. Ces applications fonctionnent sur différents appareils et fournissent certaines fonctionnalités les rapprochant des applications natives. Dans ce guide, nous verrons ce qu'il vous faut savoir à propos des PWA.
    -
    Optimisation et performance
    -
    Lorsqu'on construit des sites et applications web, il est crucial que le contenu soit fourni rapidement et efficacement. Ainsi, votre site ou application fonctionnera au mieux, que ce soit sur un PC puissant ou sur un appareil mobile potentiellement plus léger.
    -
    Analyser et sérialiser du XML
    -
    La plateforme web fournit différentes méthodes pour analyser (parsing) et sérialiser du XML dont chacune a ses avantages et ses inconvénients.
    -
    Web Open Font Format (WOFF)
    -
    Le format WOFF (Web Open Font Format) est un format pour représenter des polices de caractères afin de les utiliser sur le Web.
    -
    Algorithme de texte Unicode bidirectionnel (BiDi)
    -
    L'algorithme Unicode® BiDi fait partie du standard Unicode. Il décrit la façon dont le navigateur doit ordonner les caractères lorsqu'il affiche du texte Unicode. Ce guide présente l'algorithme en général et la façon dont il s'applique au contenu que vous créez. Cela s'avère particulièrement utile lorsque vous concevez et implémentez des systèmes avec une localisation et une internationalisation.
    -
    Manipuler les objets FormData
    -
    L'objet FormData permet de compiler un ensemble de paires de clés/valeurs et de l'envoyer via une XMLHttpRequest. Son but principal est d'envoyer des données de formulaire mais il peut être utilisé sans formulaire afin de transmettre des données utilisant des clés. Le format de la transmission est identique à ce qui serait utilisé par la méthode submit() d'un formulaire si l'encodage de celui-ci valait "multipart/form-data".
    -
    Gérer la saisie de l'utilisateur et les contrôles
    -
    Sur les sites et applications web, un utilisateur peut interagir avec sa souris et son clavier mais aussi avec d'autres outils (écran tactile par exemple). Cet article fournit quelques recommandations sur la gestion de la saisie de l'utilisateur pour les applications web ainsi qu'une FAQ, des exemples concrets et des liens vers des informations supplémentaires détaillées.
    -
    Glossaire
    -
    Définit de nombreux termes techniques relatifs au Web et à Internet.
    +
    Localisations et encodages
    +
    En interne, les navigateurs traitent le texte en Unicode. Toutefois, la façon de représenter les caractères sous forme d'octets (l'encodage) est utilisée lors du transfert du texte sur le réseau vers le navigateur. La spécification HTML recommande l'usage de l'encodage UTF-8 (qui peut représenter l'ensemble des caractères Unicode). Quel que soit l'encodage utilisé, le contenu web doit déclarer l'encodage qu'il utilise.
    +
    Développement web pour mobile
    +
    Cet article fournit un aperçu des techniques principales utilisées pour concevoir des sites web qui fonctionnent correctement sur les appareils mobiles. Voir aussi Firefox for Android.
    +
    Applications web progressives (PWA)
    +
    Les applications web progressives (aussi appelées PWA) utilisent des API web modernes ainsi que des techniques d'amélioration progressive afin de créer des applications web fonctionnant sur différentes plateformes. Ces applications fonctionnent sur différents appareils et fournissent certaines fonctionnalités les rapprochant des applications natives. Dans ce guide, nous verrons ce qu'il vous faut savoir à propos des PWA.
    +
    Optimisation et performance
    +
    Lorsqu'on construit des sites et applications web, il est crucial que le contenu soit fourni rapidement et efficacement. Ainsi, votre site ou application fonctionnera au mieux, que ce soit sur un PC puissant ou sur un appareil mobile potentiellement plus léger.
    +
    Analyser et sérialiser du XML
    +
    La plateforme web fournit différentes méthodes pour analyser (parsing) et sérialiser du XML dont chacune a ses avantages et ses inconvénients.
    +
    Web Open Font Format (WOFF)
    +
    Le format WOFF (Web Open Font Format) est un format pour représenter des polices de caractères afin de les utiliser sur le Web.
    +
    Algorithme de texte Unicode bidirectionnel (BiDi)
    +
    L'algorithme Unicode® BiDi fait partie du standard Unicode. Il décrit la façon dont le navigateur doit ordonner les caractères lorsqu'il affiche du texte Unicode. Ce guide présente l'algorithme en général et la façon dont il s'applique au contenu que vous créez. Cela s'avère particulièrement utile lorsque vous concevez et implémentez des systèmes avec une localisation et une internationalisation.
    +
    Manipuler les objets FormData
    +
    L'objet FormData permet de compiler un ensemble de paires de clés/valeurs et de l'envoyer via une XMLHttpRequest. Son but principal est d'envoyer des données de formulaire mais il peut être utilisé sans formulaire afin de transmettre des données utilisant des clés. Le format de la transmission est identique à ce qui serait utilisé par la méthode submit() d'un formulaire si l'encodage de celui-ci valait "multipart/form-data".
    +
    Gérer la saisie de l'utilisateur et les contrôles
    +
    Sur les sites et applications web, un utilisateur peut interagir avec sa souris et son clavier mais aussi avec d'autres outils (écran tactile par exemple). Cet article fournit quelques recommandations sur la gestion de la saisie de l'utilisateur pour les applications web ainsi qu'une FAQ, des exemples concrets et des liens vers des informations supplémentaires détaillées.
    +
    Glossaire
    +
    Définit de nombreux termes techniques relatifs au Web et à Internet.
    -
    -

    Voir aussi

    diff --git a/files/fr/web/guide/introduction_to_web_development/index.html b/files/fr/web/guide/introduction_to_web_development/index.html index 4d1488879f..0c2daff192 100644 --- a/files/fr/web/guide/introduction_to_web_development/index.html +++ b/files/fr/web/guide/introduction_to_web_development/index.html @@ -6,8 +6,9 @@ original_slug: Développement_Web/Introduction_au_développement_web ---

    Que vous débutiez dans le domaine du développement web ou que vous désiriez élargir vos horizons, ces liens devraient vous aider.

    - Note : cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.
    - +

    Note : cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.

    + +
    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