diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 08:13:17 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-11 08:13:17 +0100 |
| commit | 8be08b2f3d7d89f450b4eca058961680cacff69d (patch) | |
| tree | df4063b53cb3cb25232b27fe9ddd1d0b3c3d2213 | |
| parent | 8e4b6a2591e41a2f09549c99bf077a596703c2ac (diff) | |
| download | translated-content-8be08b2f3d7d89f450b4eca058961680cacff69d.tar.gz translated-content-8be08b2f3d7d89f450b4eca058961680cacff69d.tar.bz2 translated-content-8be08b2f3d7d89f450b4eca058961680cacff69d.zip | |
Fix markdown conversion errors (#3018)
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é </p><p>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. </p><p><a href="http://www.ajaxlines.com" class=" external" rel="freelink">http://www.ajaxlines.com</a> (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet. </p><p><a href="http://www.ajaxmatters.com" class=" external" rel="freelink">http://www.ajaxmatters.com</a> - Portail d'informations sur AJAX et les technologies Web associées (anglais). -</p><p><br> -<span class="comment">Liens Interwikis</span> -</p>{{ languages( { "en": "en/AJAX/Community", "ja": "ja/AJAX/Community" } ) }} +</p>
\ 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 --- <p>Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.</p> -<h3 id="Pr.C3.A9sentation_d.27AJAX" name="Pr.C3.A9sentation_d.27AJAX">Présentation d’AJAX</h3> +<h3 id="Pr.C3.A9sentation_d.27AJAX">Présentation d’AJAX</h3> <p>AJAX est un raccourci pour <em><strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML</em> (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet <code><a href="/fr/XMLHttpRequest" title="fr/XMLHttpRequest">XMLHttpRequest</a></code> 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.</p> @@ -19,7 +19,7 @@ original_slug: Web/Guide/AJAX/Premiers_pas <li>recevoir et travailler avec des données provenant du serveur.</li> </ul> -<h3 id=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP" name=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Étape 1 — Lancement d’une requête HTTP</h3> +<h3 id=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Étape 1 — Lancement d’une requête HTTP</h3> <p>Pour faire une requête <a href="/HTTP">HTTP</a> vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que <code>XMLHttpRequest</code> intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé <code>XMLHTTP</code>. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet <code>XMLHttpRequest</code> 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.</p> @@ -31,8 +31,8 @@ else if (window.ActiveXObject) { // IE 6 et antérieurs httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }</pre> -<div class="blockIndicator note"> -<p><strong>Note :</strong> 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.</p> +<div class="note"> +<p><strong>Note :</strong> 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.</p> </div> <p>Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet <code>httpRequest</code> le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété <code>onreadystatechange</code> de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :</p> @@ -68,7 +68,7 @@ httpRequest.send();</pre> <pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); </pre> -<h3 id=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur" name=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur">Étape 2 — Gestion de la réponse du serveur</h3> +<h3 id=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur">Étape 2 — Gestion de la réponse du serveur</h3> <p>Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.</p> @@ -112,7 +112,7 @@ httpRequest.send();</pre> <p>Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’<code>open()</code> n’a pas été spécifié, ou a été défini à <code>true</code>). Si vous utilisez une requête <strong>synchrone,</strong> 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.</p> -<h3 id=".C3.89tape_3_.E2.80.94_Un_exemple_simple" name=".C3.89tape_3_.E2.80.94_Un_exemple_simple">Étape 3 — Un exemple simple</h3> +<h3 id=".C3.89tape_3_.E2.80.94_Un_exemple_simple">Étape 3 — Un exemple simple</h3> <p>Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, <code>test.html</code>, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message <code>alert()</code>. 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.</p> @@ -156,16 +156,16 @@ httpRequest.send();</pre> <li><code>alertContents()</code> vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier <code>test.html</code> dans un message <code>alert()</code>.</li> </ul> -<div class="blockIndicator note"> -<p><strong>Note :</strong> 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 <code>Content-Type: application/xml</code>, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.</p> +<div class="note"> +<p><strong>Note :</strong> 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 <code>Content-Type: application/xml</code>, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note 2 :</strong> Si vous ne spécifiez pas l’en-tête <code>Cache-Control: no-cache</code>, 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 <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache">contourner le cache</a>).</p> +<div class="note"> +<p><strong>Note :</strong> Si vous ne spécifiez pas l’en-tête <code>Cache-Control: no-cache</code>, 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 <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache">contourner le cache</a>).</p> </div> -<div class="blockIndicator note"> -<p><strong>Note 3 :</strong> Si la variable <code>httpRequest</code> est utilisée globalement, des appels concurrents à <code>makeRequest()</code> peuvent s’écraser l’un l’autre, provoquant une situation de compétition <em>(race condition</em>). On peut s’en prémunir en déclarant la variable <code>httpRequest</code> locale à une <a href="/fr/docs/Web/JavaScript/Closures">closure</a> contenant les fonctions AJAX.</p> +<div class="note"> +<p><strong>Note :</strong> Si la variable <code>httpRequest</code> est utilisée globalement, des appels concurrents à <code>makeRequest()</code> peuvent s’écraser l’un l’autre, provoquant une situation de compétition <em>(race condition</em>). On peut s’en prémunir en déclarant la variable <code>httpRequest</code> locale à une <a href="/fr/docs/Web/JavaScript/Closures">closure</a> contenant les fonctions AJAX.</p> </div> <p>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 <code>onreadystatechange</code> lors de l’accès à la propriété <code>status</code>. Pour atténuer ce problème, vous pouvez entourer votre bloc <code>if...then</code> dans un <code>try...catch</code> :</p> @@ -185,9 +185,9 @@ httpRequest.send();</pre> } }</pre> -<h3 id=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML" name=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML">Étape 4 — Travailler avec des réponses XML</h3> +<h3 id=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML">Étape 4 — Travailler avec des réponses XML</h3> -<p class="brush: 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é <code>responseText</code> de l’objet, qui contenait le contenu du fichier <code>test.html</code>. Essayons maintenant la propriété <code>responseXML</code>.</p> +<p>Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété <code>responseText</code> de l’objet, qui contenait le contenu du fichier <code>test.html</code>. Essayons maintenant la propriété <code>responseXML</code>.</p> <p>Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (<code>test.xml</code>) contient ce qui suit :</p> @@ -213,9 +213,9 @@ alert(root_node.firstChild.data); <p>Ce code prend l’objet <code>XMLDocument</code> donné par <code>responseXML</code> et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.</p> -<p><span class="comment">Catégories</span></p> +<p>Catégories</p> -<p><span class="comment">Interwiki</span></p> +<p>Interwiki</p> <h3 id="Étape_5_–_Manipuler_les_données">Étape 5 – Manipuler les données</h3> @@ -226,7 +226,7 @@ alert(root_node.firstChild.data); <pre class="brush: html"><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></pre> 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 --- -<div class="callout-box"><strong><a href="/fr/AJAX/Premiers_pas" title="fr/AJAX/Premiers_pas">Premiers pas</a></strong><br> -Une introduction à AJAX</div> <p><strong>AJAX (Asynchronous JavaScript + XML)</strong> n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : <a href="/fr/HTML" title="fr/HTML">HTML</a> ou <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>, <a href="/fr/CSS" title="fr/CSS">les feuilles de styles CSS</a>, <a href="/fr/JavaScript" title="fr/JavaScript">JavaScript</a>, <a href="/fr/DOM" title="fr/DOM">le modèle objet de document</a> (DOM), <a href="/fr/XML" title="fr/XML">XML</a>, <a href="/fr/XSLT" title="fr/XSLT">XSLT</a>, et l'<a href="/fr/XMLHttpRequest" title="fr/XMLHttpRequest">objet XMLHttpRequest</a>. 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.</p> @@ -13,7 +11,7 @@ Une introduction à AJAX</div> <p>S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : </p> <ul> - <li>La méthode AJAX peut être résumée comme un <u>compromis</u> : elle évite un rechargement complet de la page mais <strong>n'autorise pas davantage</strong> 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 <strong>doit</strong> envoyer des entêtes et négocier la transaction. <br> + <li>La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais <strong>n'autorise pas davantage</strong> 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 <strong>doit</strong> envoyer des entêtes et négocier la transaction. <br> 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 (<em>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 <a href="https://developer.mozilla.org/fr/docs/WebSockets">WebSockets</a></em>). </li> <li>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 <strong>totalement</strong> 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.<br> Ne pas confondre <em>possible</em> et <em>souhaitable</em> : AJAX <strong>peut</strong> négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des <a href="https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS">raisons de sécurité</a> 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. </li> @@ -21,7 +19,7 @@ Une introduction à AJAX</div> Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc<em> in fine</em> des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (<em>voir le principe de <a href="https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive">dégradation élégante</a></em>) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. </li> </ul> -<table class="topicpage-table"> +<table> <tbody> <tr> <td> 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 --- <p>{{SeeCompatTable}}</p> -<p class="syntaxbox">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 <code>navigator.mozGetUserMedia()</code> à accéder au microphone et à la webcam (<code>getUserMedia()</code> est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).</p> -<p class="syntaxbox">La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html">WebRTC</a> et <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">getUserMedia</a>, ainsi que différents brouillons de IETF, principalement du <a href="http://tools.ietf.org/wg/rtcweb/">groupe de travail rtcweb</a>, mais aussi <a href="http://tools.ietf.org/wg/mmusic/">mmusic</a>, <a href="http://tools.ietf.org/wg/rmcat/">rmcat</a> et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à <a href="http://www.webrtc.org/reference">webrtc.org</a>.</p> -<p style="margin-left: 40px;"><span style="color: #ff0000;"><strong>NOTE</strong></span>: Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <code><video></code> 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.</p> -<p>Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/">HTML5 Rocks</a>. On pourra trouver sur le site <a href="http://mozilla.github.com/webrtc-landing" style="line-height: inherit;">webrtc-landing</a> u<span style="line-height: inherit;">ne série de page de test basique</span><span style="line-height: inherit;">.</span></p> -<p><span style="line-height: inherit;">Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à </span><a href="https://apprtc.appspot.com/" style="line-height: inherit;">apprtc.appspot.com</a>.</p> +<p>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 <code>navigator.mozGetUserMedia()</code> à accéder au microphone et à la webcam (<code>getUserMedia()</code> est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).</p> +<p>La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html">WebRTC</a> et <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">getUserMedia</a>, ainsi que différents brouillons de IETF, principalement du <a href="http://tools.ietf.org/wg/rtcweb/">groupe de travail rtcweb</a>, mais aussi <a href="http://tools.ietf.org/wg/mmusic/">mmusic</a>, <a href="http://tools.ietf.org/wg/rmcat/">rmcat</a> et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à <a href="http://www.webrtc.org/reference">webrtc.org</a>.</p> +<p><strong>NOTE</strong>: Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <code><video></code> 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.</p> +<p>Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/">HTML5 Rocks</a>. On pourra trouver sur le site <a href="http://mozilla.github.com/webrtc-landing">webrtc-landing</a> une série de page de test basique.</p> +<p>Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à <a href="https://apprtc.appspot.com/">apprtc.appspot.com</a>.</p> <p>Un article de <a href="https://hacks.mozilla.org/category/webrtc/">Hacks</a> décrit avec précision ce qu'il se passe dans une connexion <code>RTCPeerConnecion </code>(<a href="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/">lien</a>) :</p> <p><img alt="Basics of RTCPeerConnection call setup" src="webRTC-BasicsOfHowItWorks2.png"></p> 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 --- -<div class="summary"> -<p><span class="seoSummary">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 <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a>, et d'autres fonctionnalités de l'API Media.</span></p> -</div> + +<p>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 <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a>, et d'autres fonctionnalités de l'API Media.</p> + <h2 id="Buffered">Buffered</h2> @@ -102,10 +102,10 @@ myAudio.buffered.end(1); // returns 19</pre> <p>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.</p> -<p><img alt="A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges." src="https://mdn.mozillademos.org/files/7347/bufferedtimeranges.png" style="display: block; height: 89px; margin: 0px auto; width: 318px;"></p> +<p><img src="bufferedtimeranges.png"></p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez voir <a href="http://jsbin.com/memazaro/1/edit">cet exemple en direct sur JS Bin</a>.</p> +<p><strong>Note :</strong> Vous pouvez voir <a href="http://jsbin.com/memazaro/1/edit">cet exemple en direct sur JS Bin</a>.</p> </div> <h2 id="Seekable">Seekable</h2> @@ -123,7 +123,7 @@ myAudio.buffered.end(1); // returns 19</pre> <pre class="brush: js">var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);</pre> <div class="note"> -<p><strong>Note</strong>: <code>myAudio.seekable.end(myAudio.seekable.length - 1)</code> 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 — <code>audio.seekable</code> sera l'équivalent de <code>audio.buffered</code> — 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.</p> +<p><strong>Note :</strong> <code>myAudio.seekable.end(myAudio.seekable.length - 1)</code> 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 — <code>audio.seekable</code> sera l'équivalent de <code>audio.buffered</code> — 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.</p> </div> <p>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.</p> @@ -203,10 +203,10 @@ myAudio.buffered.end(1); // returns 19</pre> <p>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:</p> -<p><img alt="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." src="https://mdn.mozillademos.org/files/7349/bufferedprogress.png" style="display: block; height: 67px; margin: 0px auto; width: 311px;"></p> +<p><img src="bufferedprogress.png"></p> <div class="note"> -<p><strong>Note</strong>: Voir pouvez <a href="http://jsbin.com/badimipi/1/edit">voir l'exemple en direct sur JS Bin</a>.</p> +<p><strong>Note :</strong> Voir pouvez <a href="http://jsbin.com/badimipi/1/edit">voir l'exemple en direct sur JS Bin</a>.</p> </div> <h2 id="Un_petit_mot_sur_Played">Un petit mot sur Played</h2> 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 <p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecture fluide.</p> <div class="note"> -<p><strong>Note :</strong> l'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p> +<p><strong>Note :</strong> l'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p> </div> <p>Pour plus d'informations voir <a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#html5_audio_in_detail">Les bases de l'audio multi-navigateur (Audio HTML5 en détails)</a></p> @@ -62,7 +62,7 @@ translation_of: Web/Guide/Audio_and_video_delivery <p>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 <code>autoplay</code> (jouer automatiquement) mais d'être <code>muted</code> (en sourdine) par défaut.</p> <div class="note"> - <p><strong>Note :</strong> l'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire <a href="/fr/docs/Web/Media/Autoplay_guide">le guide à ce sujet</a> pour savoir comment l'utiliser pertinemment.</p> + <p><strong>Note :</strong> l'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire <a href="/fr/docs/Web/Media/Autoplay_guide">le guide à ce sujet</a> pour savoir comment l'utiliser pertinemment.</p> </div> <p>Pour plus d'informations voir <a href="/fr/docs/Web/HTML/Element/video">l'article de référence sur l'élément <code><video></code></a> et <a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">la page sur la création d'un lecteur vidéo multi-navigateur</a>.</p> @@ -83,7 +83,7 @@ myAudio.play();</pre> <p>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.</p> <div class="note"> -<p><strong>Note :</strong> <code>play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.</p> +<p><strong>Note :</strong> <code>play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.</p> </div> <p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, permettant ainsi de générer de l'audio à la volée :</p> @@ -216,7 +216,7 @@ navigator.mediaDevices.getUserMedia({audio:true}) <p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#hls">HLS</a> et <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#mpeg-dash">MPEG-DASH</a>. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> et <a href="https://en.wikipedia.org/wiki/M2ts">M2TS</a> (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é.</p> <div class="note"> -<p><strong>Note :</strong> 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.</p> +<p><strong>Note :</strong> 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.</p> </div> <p>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> 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.</p> 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 --- -<div class="summary"> -<p><span class="seoSummary">La technologie de <em>live streaming</em> (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 <em>streaming</em>, le live streaming est le processus de transmissions d'un média <em>live</em> (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.</span></p> -</div> + +<p>La technologie de <em>live streaming</em> (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 <em>streaming</em>, le live streaming est le processus de transmissions d'un média <em>live</em> (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.</p> <p>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é.</p> @@ -50,14 +49,16 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ <p>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 <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.3/">Firefox OS 1.3 supporte RTSP</a>.</p> -<div class="note"><strong>Note</strong>: Certains fournisseurs implémentent des protocoles de transfert propriétaires, tel que RealNetworks et leur Real Data Transport (RDT).</div> +<div class="note"> + <p><strong>Note :</strong> Certains fournisseurs implémentent des protocoles de transfert propriétaires, tel que RealNetworks et leur Real Data Transport (RDT).</p> +</div> <h3 id="RTSP_2.0">RTSP 2.0</h3> <p>RTSP 2.0 est actuellement en cours de développement, il n'est pas rétro-compatible avec RTSP 1.0.</p> <div class="warning"> -<p><strong>Important</strong>: 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.</p> +<p><strong>Attention :</strong> 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.</p> </div> <h2 id="Utiliser_des_protocoles_de_streaming">Utiliser des protocoles de streaming</h2> @@ -77,7 +78,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ Par exemple, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">vous pourriez implémenter MPEG-DASH en utilisant JavaScript tout en laissant le décodage à la charge de MSE</a>.</p> <div class="note"> -<p><strong>Note</strong>: Le décalage temporel est le processus de lire un live stream quelque temps après qu'il ait été diffusé.</p> +<p><strong>Note :</strong> Le décalage temporel est le processus de lire un live stream quelque temps après qu'il ait été diffusé.</p> </div> <h2 id="Formats_de_fichiers_Vidéo_en_Streaming">Formats de fichiers Vidéo en Streaming</h2> @@ -85,7 +86,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ <p>Quelques formats de vidéo en live streaming HTTP commençent à être pris en charge parmi les navigateurs.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver un guide pour encoder HLS et MPEG-DASH pour une utilisation sur le web sur <a href="/fr/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Configuration de sources multimédia en streaming adaptatif</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver un guide pour encoder HLS et MPEG-DASH pour une utilisation sur le web sur <a href="/fr/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Configuration de sources multimédia en streaming adaptatif</a>.</p> </div> <h3 id="MPEG-DASH">MPEG-DASH</h3> @@ -95,7 +96,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ <p>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.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez également <a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">utiliser WebM avec le système de streaming adaptatif MPEG DASH</a>.</p> +<p><strong>Note :</strong> Vous pouvez également <a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">utiliser WebM avec le système de streaming adaptatif MPEG DASH</a>.</p> </div> <h3 id="HLS">HLS</h3> @@ -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.</p> <div class="note"> -<p><strong>Note</strong>: <a href="http://tools.ietf.org/html/draft-ietf-rtcweb-audio-05">Opus est un format obligatoire</a> pour les implémentations navigateur de WebRTC.</p> +<p><strong>Note :</strong> <a href="http://tools.ietf.org/html/draft-ietf-rtcweb-audio-05">Opus est un format obligatoire</a> pour les implémentations navigateur de WebRTC.</p> </div> <h3 id="MP3_AAC_Ogg_Vorbis">MP3, AAC, Ogg Vorbis</h3> @@ -216,7 +217,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ <p>Les formats audio les plus courants peuvent être diffusés en stream en utilisant des technologies spécifiques côté serveur.</p> <div class="note"> -<p><strong>Note</strong>: 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.</p> +<p><strong>Note :</strong> 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.</p> </div> <h2 id="Technologies_de_Streaming_côté_serveur">Technologies de Streaming côté serveur</h2> @@ -236,7 +237,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ <p><a href="http://en.wikipedia.org/wiki/SHOUTcast">SHOUTcast</a> 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.</p> <div class="note"> -<p><strong>Note</strong>: <a href="http://stackoverflow.com/questions/2743279/how-could-i-play-a-shoutcast-icecast-stream-using-html5">Les urls SHOUTcast peuvent nécessiter l'ajout d'un point-virgule à la fin</a>.</p> +<p><strong>Note :</strong> <a href="http://stackoverflow.com/questions/2743279/how-could-i-play-a-shoutcast-icecast-stream-using-html5">Les urls SHOUTcast peuvent nécessiter l'ajout d'un point-virgule à la fin</a>.</p> </div> <h3 id="Icecast">Icecast</h3> @@ -244,7 +245,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ <p>Le serveur <a href="http://www.icecast.org/">Icecast</a> est une technologie open source pour diffuser des média en streaming. Maintenu par <a href="http://www.xiph.org/">Xiph.org Foundation</a>, il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC via le protocole SHOUTcast.</p> <div class="note"> -<p><strong>Note</strong>: SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux <a href="http://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers">autres systèmes de diffusion en streaming disponibles</a>.</p> +<p><strong>Note :</strong> SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux <a href="http://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers">autres systèmes de diffusion en streaming disponibles</a>.</p> </div> <h3 id="Services_de_Streaming">Services de Streaming</h3> @@ -253,7 +254,7 @@ translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_ <h2 id="Voir_aussi">Voir aussi</h2> -<ul class="task-list"> +<ul> <li><a href="http://en.wikipedia.org/wiki/HTTP_Live_Streaming">HTTP Live Streaming</a></li> <li><a href="http://www.jwplayer.com/html5/hls/">HLS Browser Support</a></li> <li><a href="https://github.com/RReverser/mpegts">HTTP Live Streaming JavaScript player</a></li> 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 --- -<div class="summary"> <p>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")}}, <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> ou <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a> 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.</p> -</div> <h2 id="Manipulation_Vidéo">Manipulation Vidéo</h2> @@ -92,11 +90,11 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>{{EmbedLiveSample("Vidéo_et_Canvas", '100%', 550)}}</p> <div class="note"> -<p><strong>Note</strong>: 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 <a href="/fr/docs/Web/HTTP/CORS">CORS (Cross Origin Resource Sharing)</a> sur le serveur qui héberge la vidéo et utiliser l'attribut <code>crossorigin</code> sur la balise vidéo.</p> +<p><strong>Note :</strong> 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 <a href="/fr/docs/Web/HTTP/CORS">CORS (Cross Origin Resource Sharing)</a> sur le serveur qui héberge la vidéo et utiliser l'attribut <code>crossorigin</code> sur la balise vidéo.</p> </div> <div class="note"> -<p><strong>Note</strong>: 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.</p> +<p><strong>Note :</strong> 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.</p> </div> <h3 id="Vidéo_e_WebGL">Vidéo e WebGL</h3> @@ -108,7 +106,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation <p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">code source de cette démo sur GitHub</a> (<a href="https://mdn.github.io/webgl-examples/tutorial/sample8/">la voir en direct</a> aussi).</p> +<p><strong>Note :</strong> Vous pouvez trouver le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">code source de cette démo sur GitHub</a> (<a href="https://mdn.github.io/webgl-examples/tutorial/sample8/">la voir en direct</a> aussi).</p> </div> <h3 id="Vitesse_de_lecture">Vitesse de lecture</h3> @@ -124,10 +122,9 @@ translation_of: Web/Guide/Audio_and_video_manipulation <pre class="brush: js">var myVideo = document.getElementById('my-video'); myVideo.playbackRate = 2;</pre> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4>Code jouable</h4> -<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270"> +<pre class="brush: html hidden"><video id="my-video" controls="true" width="480" height="270"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -140,7 +137,7 @@ var myVideo = document.getElementById('my-video'); myVideo.playbackRate = 2;</textarea> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; @@ -161,16 +158,15 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', setPlaybackRate); window.addEventListener('load', setPlaybackRate); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 425) }}</p> +<p>{{ EmbedLiveSample('Code jouable', 700, 425) }}</p> <div class="note"> -<p><strong>Note</strong>: Essayez l' <a href="http://jsbin.com/qomuvefu/2/edit">exemple playbackRate</a> en direct.</p> +<p><strong>Note :</strong> Essayez l' <a href="http://jsbin.com/qomuvefu/2/edit">exemple playbackRate</a> en direct.</p> </div> <div class="note"> -<p><strong>Note</strong> : <code>playbackRate</code> marche avec les éléments <code><audio></code> et <code><code><video></code></code>; 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")}}.</p> +<p><strong>Note :</strong> <code>playbackRate</code> marche avec les éléments <code><audio></code> et <code><code><video></code></code>; 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")}}.</p> </div> <h2 id="Manipulation_Audio">Manipulation Audio</h2> @@ -209,10 +205,9 @@ filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</pre> -<div class="hidden"> -<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6> +<h4>Code jouable 2</h4> -<pre class="brush: html"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> +<pre class="brush: html hidden"><video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"> <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> @@ -225,7 +220,7 @@ filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea></pre> -<pre class="brush: js">var context = new AudioContext(), +<pre class="brush: js hidden">var context = new AudioContext(), audioSource = context.createMediaElementSource(document.getElementById("my-video")), filter = context.createBiquadFilter(); audioSource.connect(filter); @@ -252,12 +247,12 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', setFilter); window.addEventListener('load', setFilter); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', 700, 425) }}</p> + +<p>{{ EmbedLiveSample('Code_jouable_2', 700, 425) }}</p> <div class="note"> -<p><strong>Note</strong>: À moins que <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> 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.</p> +<p><strong>Note :</strong> À moins que <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> 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.</p> </div> <p>Les filtres pouvant être appliqués sont:</p> @@ -274,7 +269,7 @@ window.addEventListener('load', setFilter); </ul> <div class="note"> -<p><strong>Note</strong>: Voir {{domxref("BiquadFilterNode")}} pour plus d'informations.</p> +<p><strong>Note :</strong> Voir {{domxref("BiquadFilterNode")}} pour plus d'informations.</p> </div> <h3 id="Convolutions_et_Impulsions">Convolutions et Impulsions</h3> @@ -290,11 +285,11 @@ source.connect(convolver); convolver.connect(context.destination);</pre> <div class="note"> -<p><strong>Note</strong>: Voir ce <a href="https://codepen.io/DonKarlssonSan/pen/doVKRE">Codepen</a> pour un exemple appliqué.</p> +<p><strong>Note :</strong> Voir ce <a href="https://codepen.io/DonKarlssonSan/pen/doVKRE">Codepen</a> pour un exemple appliqué.</p> </div> <div class="note"> -<p><strong>Note</strong>: Voir {{domxref("ConvolverNode")}} pour plus d'informations.</p> +<p><strong>Note :</strong> Voir {{domxref("ConvolverNode")}} pour plus d'informations.</p> </div> <h3 id="Audio_dans_l'espace">Audio dans l'espace</h3> @@ -316,11 +311,11 @@ source.start(0); context.listener.setPosition(0, 0, 0);</pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver un <a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">exemple sur notre repo GitHub</a> (le <a href="https://mdn.github.io/webaudio-examples/panner-node/">voir en direct</a> aussi).</p> +<p><strong>Note :</strong> Vous pouvez trouver un <a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">exemple sur notre repo GitHub</a> (le <a href="https://mdn.github.io/webaudio-examples/panner-node/">voir en direct</a> aussi).</p> </div> <div class="note"> -<p><strong>Note</strong>: Voir {{domxref("PannerNode")}} pour plus d'informations.</p> +<p><strong>Note :</strong> Voir {{domxref("PannerNode")}} pour plus d'informations.</p> </div> <h2 id="Codecs_JavaScript">Codecs JavaScript</h2> @@ -339,7 +334,7 @@ context.listener.setPosition(0, 0, 0);</pre> </ul> <div class="note"> -<p><strong>Note</strong>: Sur AudioCogs, vous pouvez <a href="http://audiocogs.org/codecs/">essayer quelques démos</a>; Audiocogs fournit également un Framework, <a href="http://audiocogs.org/codecs/">Aurora.js</a>, qui est destiné à vous aider à créer vos propres codecs en JavaScript.</p> +<p><strong>Note :</strong> Sur AudioCogs, vous pouvez <a href="http://audiocogs.org/codecs/">essayer quelques démos</a>; Audiocogs fournit également un Framework, <a href="http://audiocogs.org/codecs/">Aurora.js</a>, qui est destiné à vous aider à créer vos propres codecs en JavaScript.</p> </div> <h2 id="Tutoriels">Tutoriels</h2> 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 <p>Les articles ci-dessous vous permettront de vous familiariser avec ces technologies.</p> -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Graphismes 2D</h2> +<h2>Graphismes 2D</h2> <dl> <dt><a href="/fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas">Dessiner avec les canvas</a></dt> @@ -30,23 +28,19 @@ translation_of: Web/Guide/Graphics <dd>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. </dd> </dl> -</div> -<div class="section"> -<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Graphismes 3D</h2> +<h2>Graphismes 3D</h2> <dl> <dt><a href="/fr/docs/WebGL">WebGL</a></dt> <dd>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.</dd> </dl> -</div> -</div> -<h2 class="highlight-spanned" id="Video" style="font-size: 24px !important; line-height: 30px !important;"><span class="highlight-span" style="font-size: 24px !important; line-height: 30px !important;">Video</span></h2> +<h2 id="Video">Video</h2> -<dl style="font-size: 16px !important; line-height: 24px !important;"> - <dt style="font-size: 16px !important; line-height: 24px !important;"><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video" style="font-size: 16px !important; line-height: 24px !important;">Utiliser les éléments HTML5 audio et video</a></dt> - <dd style="font-size: 16px !important; line-height: 24px !important;">Intégrer de la vidéo et / ou de l'audio dans une page Web</dd> - <dt style="font-size: 16px !important; line-height: 24px !important;"><a href="/fr/docs/Web/API/WebRTC_API" style="font-size: 16px !important; line-height: 24px !important;">WebRTC</a></dt> - <dd style="font-size: 16px !important; line-height: 24px !important;">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).</dd> +<dl> + <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Utiliser les éléments HTML5 audio et video</a></dt> + <dd>Intégrer de la vidéo et / ou de l'audio dans une page Web</dd> + <dt><a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a></dt> + <dd>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).</dd> </dl> 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 <p><strong>Note :</strong> 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 <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">parties correspondantes de la spécification HTML</a> (en).</p> </div> -<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 366px;"></a></div> +<div><img src="content_categories_venn.png"></div> <h2 id="Principales_catégories_de_contenu">Principales catégories de contenu</h2> @@ -46,28 +46,28 @@ original_slug: Web/Guide/HTML/Catégories_de_contenu <li>{{HTMLElement("style")}} si l'attribut {{htmlattrxref("scoped","style")}} {{deprecated_inline()}} est présent</li> </ul> -<h3 id="Contenu_sectionnant"><a id="contenu sectionnant" name="contenu sectionnant"></a>Contenu sectionnant</h3> +<h3 id="Contenu_sectionnant">Contenu sectionnant</h3> <p>Les éléments appartenant à cette catégorie sont ceux créant une nouvelle <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">section dans le plan du document</a> qui définit la portée des éléments {{HTMLElement("header")}}, des éléments {{HTMLElement("footer")}} et du <a href="#Contenu de titre" title="#Contenu de titre">contenu de titre</a>.</p> <p>Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}. </p> <div class="note"> -<p><em>Note :</em> Il ne faut pas confondre ce modèle de contenu avec la catégorie de <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a> qui isole un contenu par rapport à la structure (ou plan) principale.</p> +<p><strong>Note :</strong> Il ne faut pas confondre ce modèle de contenu avec la catégorie de <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a> qui isole un contenu par rapport à la structure (ou plan) principale.</p> </div> -<h3 id="Contenu_de_titre"><a name="Contenu de titre">Contenu de titre</a></h3> +<h3 id="Contenu_de_titre">Contenu de titre</h3> <p>Le contenu de titre définit le titre d'une section, qu'elle soit marquée par un <a href="#">contenu sectionnant</a> de manière explicite ou qu'elle soit définie de manière implicite par le contenu de titre lui-même.</p> <p>Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} et {{HTMLElement("hgroup")}}.</p> <div class="note"> -<p><em>Note :</em> 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.</p> +<p><strong>Note :</strong> 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.</p> </div> <div class="note"> -<p>Note : {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.</p> +<p><strong>Note :</strong> {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.</p> </div> <h3 id="Contenu_phrasé">Contenu phrasé</h3> @@ -134,13 +134,13 @@ original_slug: Web/Guide/HTML/Catégories_de_contenu <p> Cette catégorie peut être subdivisée en plusieurs sous-catégories.</p> <dl> - <dt><a name="Form_listed">listed</a> (éléments listés)</dt> + <dt>listed (éléments listés)</dt> <dd>Les éléments étant listés sont les ensembles IDL <a href="/fr/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> et fieldset.elements. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</dd> - <dt><a name="Form_labelable">labelable</a> (éléments étiquetables)</dt> + <dt>labelable (éléments étiquetables)</dt> <dd>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")}}.</dd> - <dt><a name="Form_submittable">submittable</a> (éléments participants à l'envoi du formulaire)</dt> + <dt>submittable (éléments participants à l'envoi du formulaire)</dt> <dd>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")}}.</dd> - <dt><a name="Form_resettable">resettable</a> (éléments de ré-initialisation)</dt> + <dt>resettable (éléments de ré-initialisation)</dt> <dd>É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")}}.</dd> </dl> 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 --- <p><strong>Ces articles sont des tutoriels et guides pratiques permettant d'utiliser certaines API et technologies web.</strong></p> -<div class="row topicpage-table"> -<div class="section"> + <dl> - <dt class="landingPageList"><a href="/fr/docs/Apprendre/HTML">Apprendre - HTML</a></dt> - <dd class="landingPageList"><em>HyperText Markup Language</em> (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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Apprendre/CSS">Apprendre - CSS</a></dt> - <dd class="landingPageList"><em>Cascading Style Sheets</em> (CSS) est un langage de feuille de styles utilisé afin de définir la présentation d'un document écrit en HTML.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Audio_and_video_delivery">Fournir de l'audio et/ou de la vidéo</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Audio_and_video_manipulation">Manipuler des données audio ou vidéo</a></dt> - <dd class="landingPageList">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")}}, <a href="/fr/docs/Web/WebGL">WebGL</a> ou l'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a> afin de modifier les fichiers audio ou vidéo directement (en ajoutant des effets de réverbération ou des filtres de couleurs).</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Events">Guide sur les évènements</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/AJAX">AJAX</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Graphics">Les graphismes sur le Web</a></dt> - <dd class="landingPageList">Les sites et applications web modernes utilisent généralement des graphismes (avec différents degrés de sophistication).</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/API">Guide pour les API web</a></dt> - <dd class="landingPageList">Une liste de l'ensemble des API web et de leur rôle.</dd> + <dt><a href="/fr/docs/Apprendre/HTML">Apprendre - HTML</a></dt> + <dd><em>HyperText Markup Language</em> (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.</dd> + <dt><a href="/fr/docs/Apprendre/CSS">Apprendre - CSS</a></dt> + <dd><em>Cascading Style Sheets</em> (CSS) est un langage de feuille de styles utilisé afin de définir la présentation d'un document écrit en HTML.</dd> + <dt><a href="/fr/docs/Web/Guide/Audio_and_video_delivery">Fournir de l'audio et/ou de la vidéo</a></dt> + <dd>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.</dd> + <dt><a href="/fr/docs/Web/Guide/Audio_and_video_manipulation">Manipuler des données audio ou vidéo</a></dt> + <dd>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")}}, <a href="/fr/docs/Web/WebGL">WebGL</a> ou l'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a> afin de modifier les fichiers audio ou vidéo directement (en ajoutant des effets de réverbération ou des filtres de couleurs).</dd> + <dt><a href="/fr/docs/Web/Guide/Events">Guide sur les évènements</a></dt> + <dd>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.</dd> + <dt><a href="/fr/docs/Web/Guide/AJAX">AJAX</a></dt> + <dd>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.</dd> + <dt><a href="/fr/docs/Web/Guide/Graphics">Les graphismes sur le Web</a></dt> + <dd>Les sites et applications web modernes utilisent généralement des graphismes (avec différents degrés de sophistication).</dd> + <dt><a href="/fr/docs/Web/Guide/API">Guide pour les API web</a></dt> + <dd>Une liste de l'ensemble des API web et de leur rôle.</dd> <dt><a href="/fr/docs/JavaScript" title="/fr/docs/JavaScript">JavaScript</a></dt> <dd>JavaScript est un langage de script notamment utilisé pour créer des applications sur le Web.</dd> - <dt class="landingPageList"><a href="/fr/docs/Localizations_and_character_encodings">Localisations et encodages</a></dt> - <dd class="landingPageList">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 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">spécification HTML recommande l'usage de l'encodage UTF-8</a> (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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Mobile">Développement web pour mobile</a></dt> - <dd class="landingPageList">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 <a href="/fr/docs/Mozilla/Firefox_pour_Android">Firefox for Android</a>.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/fr/Apps/Progressive#Core_PWA_guides">Applications web progressives (PWA)</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Performance">Optimisation et performance</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">Analyser et sérialiser du XML</a></dt> - <dd class="landingPageList">La plateforme web fournit différentes méthodes pour analyser (<em>parsing</em>) et sérialiser du XML dont chacune a ses avantages et ses inconvénients.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/WOFF"><em>Web Open Font Format</em> (WOFF)</a></dt> - <dd class="landingPageList">Le format WOFF (<em>Web Open Font Format</em>) est un format pour représenter des polices de caractères afin de les utiliser sur le Web.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Unicode_Bidrectional_Text_Algorithm">Algorithme de texte Unicode bidirectionnel (BiDi)</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Using_FormData_Objects">Manipuler les objets <code>FormData</code></a></dt> - <dd class="landingPageList">L'objet <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permet de compiler un ensemble de paires de clés/valeurs et de l'envoyer via une <code>XMLHttpRequest</code>. 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 <code>submit()</code> d'un formulaire si l'encodage de celui-ci valait <code>"multipart/form-data"</code>.</dd> - <dt class="landingPageList"><a href="/fr/docs/Web/Guide/User_input_methods">Gérer la saisie de l'utilisateur et les contrôles</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="/fr/docs/Glossaire">Glossaire</a></dt> - <dd class="landingPageList">Définit de nombreux termes techniques relatifs au Web et à Internet.</dd> + <dt><a href="/fr/docs/Localizations_and_character_encodings">Localisations et encodages</a></dt> + <dd>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 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">spécification HTML recommande l'usage de l'encodage UTF-8</a> (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.</dd> + <dt><a href="/fr/docs/Web/Guide/Mobile">Développement web pour mobile</a></dt> + <dd>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 <a href="/fr/docs/Mozilla/Firefox_pour_Android">Firefox for Android</a>.</dd> + <dt><a href="/fr/Apps/Progressive#Core_PWA_guides">Applications web progressives (PWA)</a></dt> + <dd>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.</dd> + <dt><a href="/fr/docs/Web/Guide/Performance">Optimisation et performance</a></dt> + <dd>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.</dd> + <dt><a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">Analyser et sérialiser du XML</a></dt> + <dd>La plateforme web fournit différentes méthodes pour analyser (<em>parsing</em>) et sérialiser du XML dont chacune a ses avantages et ses inconvénients.</dd> + <dt><a href="/fr/docs/Web/Guide/WOFF"><em>Web Open Font Format</em> (WOFF)</a></dt> + <dd>Le format WOFF (<em>Web Open Font Format</em>) est un format pour représenter des polices de caractères afin de les utiliser sur le Web.</dd> + <dt><a href="/fr/docs/Web/Guide/Unicode_Bidrectional_Text_Algorithm">Algorithme de texte Unicode bidirectionnel (BiDi)</a></dt> + <dd>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.</dd> + <dt><a href="/fr/docs/Web/Guide/Using_FormData_Objects">Manipuler les objets <code>FormData</code></a></dt> + <dd>L'objet <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permet de compiler un ensemble de paires de clés/valeurs et de l'envoyer via une <code>XMLHttpRequest</code>. 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 <code>submit()</code> d'un formulaire si l'encodage de celui-ci valait <code>"multipart/form-data"</code>.</dd> + <dt><a href="/fr/docs/Web/Guide/User_input_methods">Gérer la saisie de l'utilisateur et les contrôles</a></dt> + <dd>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.</dd> + <dt><a href="/fr/docs/Glossaire">Glossaire</a></dt> + <dd>Définit de nombreux termes techniques relatifs au Web et à Internet.</dd> </dl> -</div> -</div> <h2 id="Voir_aussi">Voir aussi</h2> 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 --- <p>Que vous débutiez dans le domaine du développement web ou que vous désiriez élargir vos horizons, ces liens devraient vous aider.</p> <div class="note"> - <strong>Note :</strong> cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.</div> -<table class="mainpage-table"> + <p><strong>Note :</strong> cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.</p></div> + +<table> <tbody> <tr> <td> 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 --- -<div class="summary"> -<p><span class="seoSummary">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 <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">les événements tactiles</a>, <a href="/fr/docs/WebAPI/Pointer_Lock">l'API Pointer Lock</a>, <a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">l'API Screen Orientation</a>, <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">l'API Fullscreen</a> et <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a>.</span></p> -</div> +<p>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 <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">les événements tactiles</a>, <a href="/fr/docs/WebAPI/Pointer_Lock">l'API Pointer Lock</a>, <a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">l'API Screen Orientation</a>, <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">l'API Fullscreen</a> et <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a>.</p> <h2 id="Workflow_entrées_utilisateur_et_contrôles">Workflow entrées utilisateur et contrôles</h2> <p>La diagramme suivant illustre le déroulement des opérations typique pour implémenter les mécanismes d'entrée utilisateur:</p> -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p> +<p><img alt="" src="user-input-and-controls.png"></p> <p>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.</p> @@ -40,7 +38,7 @@ window.addEventListener("keyup", handleKeyUp, true);</pre> <p>où <code>handleKeyDown</code> et <code>handleKeyUp</code> sont des fonctions implémentant les contrôles sur les événements <code>keydown</code> et <code>keyup</code>.</p> <div class="note"> -<p><strong>Note</strong>: Jetez un coup d'oeil à la <a href="/fr/docs/Web/Events">Référence des événements</a> et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier.</p> +<p><strong>Note :</strong> Jetez un coup d'oeil à la <a href="/fr/docs/Web/Events">Référence des événements</a> et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier.</p> </div> <h4 id="Souris">Souris</h4> @@ -64,7 +62,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <p>où <code>element</code> est l'élément du DOM sur lequel vous voulez enregistrer les événements tactiles.</p> <div class="note"> -<p><strong>Note</strong>: Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">événements tactiles</a>.</p> +<p><strong>Note :</strong> Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">événements tactiles</a>.</p> </div> <h4 id="Événements_de_pointeur">Événements de pointeur</h4> @@ -72,7 +70,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <p>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 <a href="/fr/docs/Web/API/Pointer_events">événements de pointeur</a> 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: <code>pointerdown</code>, <code>pointermove</code>, <code>pointerup</code>, <code>pointerover</code>, <code>pointerout</code>, etc.</p> <div class="note"> -<p><strong>Note</strong>: Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le <a href="https://github.com/mozilla/pointer.js">polyfill pointer.js</a> est disponible sur le compte GitHub de Mozilla.</p> +<p><strong>Note :</strong> Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le <a href="https://github.com/mozilla/pointer.js">polyfill pointer.js</a> est disponible sur le compte GitHub de Mozilla.</p> </div> <h3 id="Implémentez_les_contrôles">Implémentez les contrôles</h3> @@ -86,7 +84,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <pre class="brush: js">element.requestPointerLock();</pre> <div class="note"> -<p><strong>Note</strong>: Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}.</p> +<p><strong>Note :</strong> Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}.</p> </div> <h4 id="Orientation_de_l'écran">Orientation de l'écran</h4> @@ -96,26 +94,26 @@ element.addEventListener("touchmove", handleMove, false);</pre> <p>Les données d'orientation peuvent être récupérées à travers l'attribut {{domxref("screen.orientation")}} ou à travers la media query <a href="/fr/docs/Web/CSS/@media/orientation"><code>orientation</code></a>. Quand <code>screen.orientation</code> 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.</p> <div class="note"> -<p><strong>Note</strong>: Pour plus d'informations sur l'API Screen Orientation API consultez <a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l'orientation de l'écran</a>.</p> +<p><strong>Note :</strong> Pour plus d'informations sur l'API Screen Orientation API consultez <a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l'orientation de l'écran</a>.</p> </div> <h4 id="Plein_écran">Plein écran</h4> <p>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:</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">"myvideo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>requestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem<span class="punctuation token">.</span><span class="function token">requestFullscreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>msRequestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem<span class="punctuation token">.</span><span class="function token">msRequestFullscreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>mozRequestFullScreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem<span class="punctuation token">.</span><span class="function token">mozRequestFullScreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>webkitRequestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem<span class="punctuation token">.</span><span class="function token">webkitRequestFullscreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">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(); +}</pre> <div class="note"> -<p><strong>Note</strong>: Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">utiliser le plein écran</a>.</p> +<p><strong>Note :</strong> Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">utiliser le plein écran</a>.</p> </div> <h4 id="Drag_Drop">Drag & Drop</h4> @@ -126,7 +124,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> <pre class="brush: html"><div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être déplacé')"> Ce texte <strong>peut</strong> être déplacé. -
</div></pre> +</div></pre> <p>Ici, on</p> @@ -136,7 +134,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> </ul> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver plus d'informations dans la documentation MDN <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver plus d'informations dans la documentation MDN <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a>.</p> </div> <h4 id="contentEditable">contentEditable</h4> @@ -148,7 +146,7 @@ element.addEventListener("touchmove", handleMove, false);</pre> </div></pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide <a href="/fr/docs/Web/HTML/Contenu_editable">Contenu Éditable</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide <a href="/fr/docs/Web/HTML/Contenu_editable">Contenu Éditable</a>.</p> </div> <h2 id="Exemples">Exemples</h2> |