diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-11 08:14:14 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 09:10:20 +0100 |
| commit | d88cec5fa72a8863e6a457549f7d7e708a88a9ec (patch) | |
| tree | f3e1e62ec3723756117747b3c043c81215b94288 /files/fr | |
| parent | 61dde9968fe81546497fc23ef73908221e8cb06c (diff) | |
| download | translated-content-d88cec5fa72a8863e6a457549f7d7e708a88a9ec.tar.gz translated-content-d88cec5fa72a8863e6a457549f7d7e708a88a9ec.tar.bz2 translated-content-d88cec5fa72a8863e6a457549f7d7e708a88a9ec.zip | |
convert content to md
Diffstat (limited to 'files/fr')
19 files changed, 1587 insertions, 1544 deletions
diff --git a/files/fr/web/guide/ajax/community/index.md b/files/fr/web/guide/ajax/community/index.md index 935a72879e..1ae269ca2f 100644 --- a/files/fr/web/guide/ajax/community/index.md +++ b/files/fr/web/guide/ajax/community/index.md @@ -6,8 +6,8 @@ tags: translation_of: Web/Guide/AJAX/Community original_slug: Web/Guide/AJAX/Communauté --- -<p> -</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>
\ No newline at end of file +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). diff --git a/files/fr/web/guide/ajax/getting_started/index.md b/files/fr/web/guide/ajax/getting_started/index.md index 9aa61def8d..8a3e7228ec 100644 --- a/files/fr/web/guide/ajax/getting_started/index.md +++ b/files/fr/web/guide/ajax/getting_started/index.md @@ -6,119 +6,125 @@ tags: translation_of: Web/Guide/AJAX/Getting_Started 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> +Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter. -<h3 id="Pr.C3.A9sentation_d.27AJAX">Présentation d’AJAX</h3> +### Présentation d’AJAX -<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> +AJAX est un raccourci pour **\*A**synchronous **J**avaScript **A**nd **X**ML\* (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet [`XMLHttpRequest`](/fr/XMLHttpRequest "fr/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. -<p>Les deux principales fonctionnalités d’AJAX permettent de :</p> +Les deux principales fonctionnalités d’AJAX permettent de : -<ul> - <li>faire des requêtes vers le serveur sans recharger la page ;</li> - <li>recevoir et travailler avec des données provenant du serveur.</li> -</ul> +- faire des requêtes vers le serveur sans recharger la page ; +- recevoir et travailler avec des données provenant du serveur. -<h3 id=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Étape 1 — Lancement d’une requête HTTP</h3> +### Étape 1 — Lancement d’une requête HTTP -<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> +Pour faire une requête [HTTP](/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. -<pre class="brush: js">// ancien code de compatibilité, aujourd’hui inutile +```js +// ancien code de compatibilité, aujourd’hui inutile if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 6 et antérieurs httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); -}</pre> +} +``` -<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> +> **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. -<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> +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 : -<pre class="brush: js">httpRequest.onreadystatechange = nomDeLaFonction;</pre> +```js +httpRequest.onreadystatechange = nomDeLaFonction; +``` -<p>Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci :</p> +Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci : -<pre class="brush: js">httpRequest.onreadystatechange = function() { +```js +httpRequest.onreadystatechange = function() { // instructions de traitement de la réponse }; -</pre> +``` -<p>Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes <code>open()</code> et <code>send()</code> de l’objet <code>httpRequest</code>, comme ceci :</p> +Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes `open()` et `send()` de l’objet `httpRequest`, comme ceci : -<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true); -httpRequest.send();</pre> +```js +httpRequest.open('GET', 'http://www.example.org/some.file', true); +httpRequest.send(); +``` -<ul> - <li>Le premier paramètre de l’appel à <code>open()</code> est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">spécifications du W3C</a>.</li> - <li>Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à <code>open()</code>. Une erreur courante est de charger le site via <code>domaine.tld</code>, mais d’essayer d’appeler des pages avec <code>www.domain.tld</code>. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter <a href="/fr/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a>.</li> - <li>Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à <code>true</code> (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ».</li> -</ul> +- Le premier paramètre de l’appel à `open()` est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les [spécifications du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). +- Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à `open()`. Une erreur courante est de charger le site via `domaine.tld`, mais d’essayer d’appeler des pages avec `www.domain.tld`. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter [Cross-Origin Resource Sharing (CORS)](/fr/docs/Web/HTTP/CORS). +- Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à `true` (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ». -<p>Le paramètre de la méthode <code>send()</code> peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme :</p> +Le paramètre de la méthode `send()` peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme : -<pre class="brush: js">"nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite"</pre> +```js +"nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite" +``` -<p>Ou d’autres formats tels que <code>multipart/form-data</code>, JSON, XML, etc.</p> +Ou d’autres formats tels que `multipart/form-data`, JSON, XML, etc. -<p>Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler <code>send()</code> pour envoyer des données de formulaire en tant que chaîne de requête :</p> +Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler `send()` pour envoyer des données de formulaire en tant que chaîne de requête : -<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); -</pre> +```js +httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +``` -<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> +### Étape 2 — Gestion de la réponse du serveur -<p>Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.</p> +Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse. -<pre class="brush: js"><code>httpRequest.onreadystatechange = nomDeLaFonction;</code></pre> +```js +httpRequest.onreadystatechange = nomDeLaFonction; +``` -<p>Voyons maintenant ce que cette fonction doit faire. Tout d’abord, elle doit vérifier l’état de la requête. Si cet état a la valeur de <code>XMLHttpRequest.DONE</code> (ce qui correspond à 4), cela signifie que la réponse du serveur a été reçue dans son intégralité et qu’elle peut maintenant être traitée.</p> +Voyons maintenant ce que cette fonction doit faire. Tout d’abord, elle doit vérifier l’état de la requête. Si cet état a la valeur de `XMLHttpRequest.DONE` (ce qui correspond à 4), cela signifie que la réponse du serveur a été reçue dans son intégralité et qu’elle peut maintenant être traitée. -<pre class="brush: js">if (httpRequest.readyState === XMLHttpRequest.DONE) { +```js +if (httpRequest.readyState === XMLHttpRequest.DONE) { // tout va bien, la réponse a été reçue } else { // pas encore prête -}</pre> +} +``` -<p>La liste complète des valeurs de <code>readyState</code> est documentée sur <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties">XMLHttpRequest.readyState</a> et se résume de cette façon :</p> +La liste complète des valeurs de `readyState` est documentée sur [XMLHttpRequest.readyState](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) et se résume de cette façon : -<ul> - <li>0 (non initialisée) ou (requête non initialisée)</li> - <li>1 (en cours de chargement) ou (connexion établie avec le serveur)</li> - <li>2 (chargée) ou (requête reçue)</li> - <li>3 (en cours d’interaction) ou (requête en cours de traitement)</li> - <li>4 (terminée) ou (requête terminée et réponse prête)</li> -</ul> +- 0 (non initialisée) ou (requête non initialisée) +- 1 (en cours de chargement) ou (connexion établie avec le serveur) +- 2 (chargée) ou (requête reçue) +- 3 (en cours d’interaction) ou (requête en cours de traitement) +- 4 (terminée) ou (requête terminée et réponse prête) -<p>Ensuite, vérifiez le <a href="/fr/docs/Web/HTTP/Status">code de statut HTTP</a> de la réponse du serveur. Tous les codes possibles sont listés sur le <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">site du W3C</a>. Dans l’exemple qui suit, nous différencions un appel réussi ou échoué en vérifiant la réception d’un code <code><a href="/fr/docs/Web/HTTP/Status#R%C3%A9ponses_de_succ%C3%A8s">200 OK</a></code>.</p> +Ensuite, vérifiez le [code de statut HTTP](/fr/docs/Web/HTTP/Status) de la réponse du serveur. Tous les codes possibles sont listés sur le [site du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html). Dans l’exemple qui suit, nous différencions un appel réussi ou échoué en vérifiant la réception d’un code [`200 OK`](/fr/docs/Web/HTTP/Status#R%C3%A9ponses_de_succ%C3%A8s). -<pre class="brush: js">if (httpRequest.status === 200) { +```js +if (httpRequest.status === 200) { // parfait ! } else { // il y a eu un problème avec la requête, // par exemple la réponse peut être un code 404 (Non trouvée) // ou 500 (Erreur interne au serveur) } -</pre> +``` -<p>Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données :</p> +Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données : -<ul> - <li><code>httpRequest.responseText</code> — renvoie la réponse du serveur sous la forme d’une chaîne de texte ;</li> - <li><code>httpRequest.responseXML</code> — renvoie la réponse sous la forme d’un objet <code>XMLDocument</code> que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript.</li> -</ul> +- `httpRequest.responseText` — renvoie la réponse du serveur sous la forme d’une chaîne de texte ; +- `httpRequest.responseXML` — renvoie la réponse sous la forme d’un objet `XMLDocument` que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript. -<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> +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. -<h3 id=".C3.89tape_3_.E2.80.94_Un_exemple_simple">Étape 3 — Un exemple simple</h3> +### Étape 3 — Un exemple simple -<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> +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. -<pre class="brush: html"><button id="ajaxButton" type="button">Faire une requête</button> +```html +<button id="ajaxButton" type="button">Faire une requête</button> -<script> +<script> (function() { var httpRequest; document.getElementById("ajaxButton").addEventListener('click', makeRequest); @@ -145,32 +151,26 @@ httpRequest.send();</pre> } } })(); -</script></pre> +</script> +``` -<p>Dans cet exemple :</p> +Dans cet exemple : -<ul> - <li>L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ;</li> - <li>Le gestionnaire d’évènement appelle la fonction <code>makeRequest()</code> ;</li> - <li>la requête est faite, puis l’exécution est passée à <code>alertContents()</code> (via <code>onreadystatechange</code>);</li> - <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> +- L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ; +- Le gestionnaire d’évènement appelle la fonction `makeRequest()` ; +- la requête est faite, puis l’exécution est passée à `alertContents()` (via `onreadystatechange`); +- `alertContents()` vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier `test.html` dans un message `alert()`. -<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> +> **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. -<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> +> **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](https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache)). -<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> +> **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](/fr/docs/Web/JavaScript/Closures) contenant les fonctions AJAX. -<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> +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` : -<pre class="brush: js">function alertContents(httpRequest) { +```js +function alertContents(httpRequest) { try { if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.status === 200) { @@ -183,63 +183,72 @@ httpRequest.send();</pre> catch( e ) { alert("Une exception s’est produite : " + e.description); } -}</pre> +} +``` -<h3 id=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML">Étape 4 — Travailler avec des réponses XML</h3> +### Étape 4 — Travailler avec des réponses XML -<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> +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`. -<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> +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 : -<pre class="brush: xml"><?xml version="1.0" ?> -<root> +```xml +<?xml version="1.0" ?> +<root> Je suis un test. -</root> -</pre> +</root> +``` -<p>Dans le script, il est seulement nécessaire de remplacer la ligne de requête par :</p> +Dans le script, il est seulement nécessaire de remplacer la ligne de requête par : -<pre class="brush: html">... -onclick="makeRequest('test.xml')"> +```html ... -</pre> +onclick="makeRequest('test.xml')"> +... +``` -<p>Ensuite, dans <code>alertContents()</code>, il faut remplacer la ligne <code>alert(httpRequest.responseText);</code> par :</p> +Ensuite, dans `alertContents()`, il faut remplacer la ligne `alert(httpRequest.responseText);` par : -<pre class="brush: js">var xmldoc = httpRequest.responseXML; +```js +var xmldoc = httpRequest.responseXML; var root_node = xmldoc.getElementsByTagName('root').item(0); alert(root_node.firstChild.data); -</pre> +``` -<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> +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. -<p>Catégories</p> +Catégories -<p>Interwiki</p> +Interwiki -<h3 id="Étape_5_–_Manipuler_les_données">Étape 5 – Manipuler les données</h3> +### Étape 5 – Manipuler les données -<p>Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, <code>test.php</code>, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, [user data] !" – que nous afficherons via <code>alert()</code>.</p> +Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, `test.php`, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, \[user data] !" – que nous afficherons via `alert()`. -<p>D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom :</p> +D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom : -<pre class="brush: html"><label>Vore nom : - <input type="text" id="ajaxTextbox" /> -</label> -<span id="ajaxButton"> +```html +<label>Vore nom : + <input type="text" id="ajaxTextbox" /> +</label> +<span id="ajaxButton"> Lancer une requête -</span></pre> +</span> +``` -<p>Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction <code>makeRequest()</code>, ainsi que l’URL de notre script côté serveur :</p> +Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction `makeRequest()`, ainsi que l’URL de notre script côté serveur : -<pre class="brush: js"> document.getElementById("ajaxButton").onclick = function() { +```js + document.getElementById("ajaxButton").onclick = function() { var userName = document.getElementById("ajaxTextbox").value; makeRequest('test.php', userName); - };</pre> + }; +``` -<p>Nous devons modifier <code>makeRequest()</code> afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à <code>httpRequest.send()</code> :</p> +Nous devons modifier `makeRequest()` afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à `httpRequest.send()` : -<pre class="brush: js"> function makeRequest(url, userName) { +```js + function makeRequest(url, userName) { ... @@ -247,15 +256,19 @@ alert(root_node.firstChild.data); httpRequest.open('POST', url); httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); httpRequest.send('userName=' + encodeURIComponent(userName)); - }</pre> + } +``` -<p>La fonction <code>alertContents()</code> peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à :</p> +La fonction `alertContents()` peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à : -<pre class="brush: json">{"userData":"Dorothée","computedString":"Bonjour, Dorothée !"}</pre> +```json +{"userData":"Dorothée","computedString":"Bonjour, Dorothée !"} +``` -<p>Pour utiliser cette phrase dans <code>alertContents()</code>, nous ne pouvons pas simplement afficher une alerte avec le contenu de <code>responseText</code>, nous devons l’analyser et afficher <code>computedString</code>, la propriété que nous souhaitons :</p> +Pour utiliser cette phrase dans `alertContents()`, nous ne pouvons pas simplement afficher une alerte avec le contenu de `responseText`, nous devons l’analyser et afficher `computedString`, la propriété que nous souhaitons : -<pre class="brush: js">function alertContents() { +```js +function alertContents() { if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.status === 200) { var response = JSON.parse(httpRequest.responseText); @@ -264,13 +277,16 @@ alert(root_node.firstChild.data); alert('Un problème est survenu avec la requête.'); } } -}</pre> +} +``` -<p>Le fichier <code>test.php</code> devrait contenir ce qui suit :</p> +Le fichier `test.php` devrait contenir ce qui suit : -<pre class="brush: php">$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme'; +```php +$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme'; $computedString = 'Bonjour, ' . $name . ' !'; -$array = ['userName' => $name, 'computedString' => $computedString]; -echo json_encode($array);</pre> +$array = ['userName' => $name, 'computedString' => $computedString]; +echo json_encode($array); +``` -<p>Pour en savoir sur les méthodes DOM, pensez à lire la <a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a> de Mozilla.</p> +Pour en savoir sur les méthodes DOM, pensez à lire la [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) de Mozilla. diff --git a/files/fr/web/guide/ajax/index.md b/files/fr/web/guide/ajax/index.md index 1cfc6f249b..9341969376 100644 --- a/files/fr/web/guide/ajax/index.md +++ b/files/fr/web/guide/ajax/index.md @@ -3,105 +3,259 @@ title: AJAX slug: Web/Guide/AJAX translation_of: Web/Guide/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](/fr/HTML "fr/HTML") ou [XHTML](/fr/XHTML "fr/XHTML"), [les feuilles de styles CSS](/fr/CSS "fr/CSS"), [JavaScript](/fr/JavaScript "fr/JavaScript"), [le modèle objet de document](/fr/DOM "fr/DOM") (DOM), [XML](/fr/XML "fr/XML"), [XSLT](/fr/XSLT "fr/XSLT"), et l'[objet XMLHttpRequest](/fr/XMLHttpRequest "fr/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. -<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> +#### **Quand utiliser (ou non) AJAX ?** -<h4 id="Quand_utiliser_ou_non_AJAX"><strong>Quand utiliser (ou non) AJAX ? </strong></h4> +S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : -<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 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> - <li>La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme <a href="https://fr.wikipedia.org/wiki/JQuery">JQuery</a>, dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. <br> - 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> +- 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](https://developer.mozilla.org/fr/docs/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é](https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS) 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. +- La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme [JQuery](https://fr.wikipedia.org/wiki/JQuery), dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. + 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](https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive)_) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. <table> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation">Documentation</h2> - - <dl> - <dt><a href="/fr/AJAX/Premiers_pas" title="fr/AJAX/Premiers_pas">AJAX:Premiers pas</a></dt> - <dd><small>Cet article vous guide à travers les bases d'AJAX et vous donne deux exemples simples pour commencer.</small></dd> - </dl> - - <dl> - <dt><a class="external" href="http://www.webreference.com/programming/ajax_tech/">Techniques AJAX alternatives</a></dt> - <dd><small>La plupart des articles sur AJAX se concentrent sur l'utilisation de XMLHttp comme moyen de communication, mais les techniques AJAX ne s'arrêtent pas à XMLHttp. Il y en a bien d'autres.</small></dd> - </dl> - - <dl> - <dt><a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: A New Approach to Web Applications (en)</a></dt> - <dd><small>Jesse James Garrett, du site <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, a écrit cet article en février 2005, introduisant le terme AJAX et les concepts liés.</small></dd> - </dl> - - <dl> - <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt> - <dd><small>« Comme on le remarquera, il est assez facile de tirer parti de l'objet XMLHttpRequest pour faire se comporter une application Web un peu plus comme une application traditionnelle, tout en continuant à utiliser des outils comme des formulaires Web pour collecter les entrées de l'utilisateur. »</small></dd> - </dl> - - <dl> - <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt> - <dd><small>Cet article rédigé par Mike Stenhouse détaille certaines méthodes utilisables pour rendre fonctionnel le bouton Précédent et réparer les problèmes causés au marquage des pages lorsque des applications sont développées avec les outils AJAX.</small></dd> - </dl> - - <dl> - <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt> - <dd><small>Cet article d'Alex Bosworth attire l'attention sur certaines erreurs que les développeurs d'applications AJAX peuvent faire.</small></dd> - </dl> - - <dl> - <dt><a class="external" href="http://www.xul.fr/xml-ajax.html">Tutoriel</a> avec des exemples.</dt> - </dl> - - <dl> - <dt><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">La spécification XMLHttpRequest</a>- <a class="external" href="http://www.xul.fr/XMLHttpRequest.html">(Traduction française)</a></dt> - <dd><small>Brouillon de travail du W3C</small></dd> - </dl> - - </td> - <td> - <h2 class="Community" id="Communauté">Communauté</h2> - - <ul> - <li>Voir les forums de Mozilla… {{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</li> - </ul> - - <h2 class="Tools" id="Outils">Outils</h2> - - <ul> - <li><a class="external" href="http://www.ajaxprojects.com">Toolkits et frameworks</a></li> - <li><a class="external" href="http://www.getfirebug.com/">Firebug — Outil de développement AJAX/Web</a></li> - <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">Outils de débogage AJAX</a></li> - <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Kit d'intégration Flash/AJAX</a></li> - <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">Une bibliothèque d'interface XMLHTTP simple</a></li> - <li><a class="external" href="http://chandlerproject.org/Projects/AjaxLibraries">Bibliothèques AJAX</a></li> - </ul> - - <h2 id="Exemples">Exemples</h2> - - <ul> - <li><a class="external" href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">AJAX poller script</a></li> - <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li> - <li><a class="external" href="http://www.funwithjustin.com/ajax-toybox/">Ajax Toybox</a></li> - <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with AJAX</a></li> - <li><a class="external" href="http://www.jamesdam.com/ajax_login/login.html#login">AJAX Login System using XMLHttpRequest</a></li> - <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li> - <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Creating Huge Bookmarklets</a></li> - <li><a class="external" href="http://www.hotajax.org">Hot!Ajax: many cool examples</a></li> - </ul> - - <h2 class="Related_Topics" id="Sujets_liés">Sujets liés</h2> - - <dl> - <dd><a href="/fr/HTML" title="fr/HTML">HTML</a>, <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>, <a href="/fr/CSS" title="fr/CSS">Feuilles de style (CSS)</a>, <a href="/fr/DOM" title="fr/DOM">Modèle objet de document (DOM)</a>, <a href="/fr/JavaScript" title="fr/JavaScript">JavaScript</a>, <a href="/fr/XML" title="fr/XML">XML</a>, <a href="/fr/XSLT" title="fr/XSLT">XSLT</a> , <a href="/fr/DHTML" title="fr/DHTML">DHTML</a>, <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Canvas</a></dd> - </dl> - </td> - </tr> - </tbody> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/fr/AJAX/Premiers_pas" title="fr/AJAX/Premiers_pas" + >AJAX:Premiers pas</a + > + </dt> + <dd> + <small + >Cet article vous guide à travers les bases d'AJAX et vous donne + deux exemples simples pour commencer.</small + > + </dd> + </dl> + <dl> + <dt> + <a + class="external" + href="http://www.webreference.com/programming/ajax_tech/" + >Techniques AJAX alternatives</a + > + </dt> + <dd> + <small + >La plupart des articles sur AJAX se concentrent sur l'utilisation + de XMLHttp comme moyen de communication, mais les techniques AJAX + ne s'arrêtent pas à XMLHttp. Il y en a bien d'autres.</small + > + </dd> + </dl> + <dl> + <dt> + <a + class="external" + href="http://www.adaptivepath.com/publications/essays/archives/000385.php" + >Ajax: A New Approach to Web Applications (en)</a + > + </dt> + <dd> + <small + >Jesse James Garrett, du site + <a class="external" href="http://www.adaptivepath.com" + >adaptive path</a + >, a écrit cet article en février 2005, introduisant le terme AJAX + et les concepts liés.</small + > + </dd> + </dl> + <dl> + <dt> + <a + class="external" + href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html" + >A Simpler Ajax Path</a + > + </dt> + <dd> + <small + >« Comme on le remarquera, il est assez facile de tirer parti de + l'objet XMLHttpRequest pour faire se comporter une application Web + un peu plus comme une application traditionnelle, tout en + continuant à utiliser des outils comme des formulaires Web pour + collecter les entrées de l'utilisateur. »</small + > + </dd> + </dl> + <dl> + <dt> + <a + class="external" + href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps" + >Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a + > + </dt> + <dd> + <small + >Cet article rédigé par Mike Stenhouse détaille certaines méthodes + utilisables pour rendre fonctionnel le bouton Précédent et réparer + les problèmes causés au marquage des pages lorsque des + applications sont développées avec les outils AJAX.</small + > + </dd> + </dl> + <dl> + <dt> + <a + class="external" + href="http://alexbosworth.backpackit.com/pub/67688" + >Ajax Mistakes</a + > + </dt> + <dd> + <small + >Cet article d'Alex Bosworth attire l'attention sur certaines + erreurs que les développeurs d'applications AJAX peuvent + faire.</small + > + </dd> + </dl> + <dl> + <dt> + <a class="external" href="http://www.xul.fr/xml-ajax.html" + >Tutoriel</a + > + avec des exemples. + </dt> + </dl> + <dl> + <dt> + <a class="external" href="http://www.w3.org/TR/XMLHttpRequest/" + >La spécification XMLHttpRequest</a + >- + <a class="external" href="http://www.xul.fr/XMLHttpRequest.html" + >(Traduction française)</a + > + </dt> + <dd><small>Brouillon de travail du W3C</small></dd> + </dl> + </td> + <td> + <h2 class="Community" id="Communauté">Communauté</h2> + <ul> + <li> + Voir les forums de Mozilla… + {{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} + </li> + </ul> + <h2 class="Tools" id="Outils">Outils</h2> + <ul> + <li> + <a class="external" href="http://www.ajaxprojects.com" + >Toolkits et frameworks</a + > + </li> + <li> + <a class="external" href="http://www.getfirebug.com/" + >Firebug — Outil de développement AJAX/Web</a + > + </li> + <li> + <a + class="external" + href="http://blog.monstuff.com/archives/000252.html" + >Outils de débogage AJAX</a + > + </li> + <li> + <a + class="external" + href="http://www.osflash.org/doku.php?id=flashjs" + >Kit d'intégration Flash/AJAX</a + > + </li> + <li> + <a class="external" href="http://xkr.us/code/javascript/XHConn/" + >Une bibliothèque d'interface XMLHTTP simple</a + > + </li> + <li> + <a + class="external" + href="http://chandlerproject.org/Projects/AjaxLibraries" + >Bibliothèques AJAX</a + > + </li> + </ul> + <h2 id="Exemples">Exemples</h2> + <ul> + <li> + <a + class="external" + href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller" + >AJAX poller script</a + > + </li> + <li> + <a + class="external" + href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9" + >Ajax Chat Tutorial</a + > + </li> + <li> + <a class="external" href="http://www.funwithjustin.com/ajax-toybox/" + >Ajax Toybox</a + > + </li> + <li> + <a + class="external" + href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13" + >RSS Ticker with AJAX</a + > + </li> + <li> + <a + class="external" + href="http://www.jamesdam.com/ajax_login/login.html#login" + >AJAX Login System using XMLHttpRequest</a + > + </li> + <li> + <a + class="external" + href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects" + >Create your own Ajax effects</a + > + </li> + <li> + <a + class="external" + href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html" + >AJAX: Creating Huge Bookmarklets</a + > + </li> + <li> + <a class="external" href="http://www.hotajax.org" + >Hot!Ajax: many cool examples</a + > + </li> + </ul> + <h2 class="Related_Topics" id="Sujets_liés">Sujets liés</h2> + <dl> + <dd> + <a href="/fr/HTML" title="fr/HTML">HTML</a>, + <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>, + <a href="/fr/CSS" title="fr/CSS">Feuilles de style (CSS)</a>, + <a href="/fr/DOM" title="fr/DOM">Modèle objet de document (DOM)</a>, + <a href="/fr/JavaScript" title="fr/JavaScript">JavaScript</a>, + <a href="/fr/XML" title="fr/XML">XML</a>, + <a href="/fr/XSLT" title="fr/XSLT">XSLT</a> , + <a href="/fr/DHTML" title="fr/DHTML">DHTML</a>, + <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Canvas</a> + </dd> + </dl> + </td> + </tr> + </tbody> </table> diff --git a/files/fr/web/guide/api/index.md b/files/fr/web/guide/api/index.md index 9dbd8867c5..93a1973792 100644 --- a/files/fr/web/guide/api/index.md +++ b/files/fr/web/guide/api/index.md @@ -8,17 +8,15 @@ tags: - Web translation_of: Web/Guide/API --- -<p>Le Web peut être utilisé avec de nombreuses API, accessibles en JavaScript, qui permettent de construire des applications puissantes, sur le Web, localement ou sur un serveur grâce à <a href="https://nodejs.org/">Node.js</a>. Sur cette page, vous pourrez trouver une liste complète de l'ensemble des API utilisables avec les technologies web.</p> +Le Web peut être utilisé avec de nombreuses API, accessibles en JavaScript, qui permettent de construire des applications puissantes, sur le Web, localement ou sur un serveur grâce à [Node.js](https://nodejs.org/). Sur cette page, vous pourrez trouver une liste complète de l'ensemble des API utilisables avec les technologies web. -<h2 id="Index_des_API_Web_(A_à_Z)">Index des API Web (A à Z)</h2> +## Index des API Web (A à Z) -<p>{{ListGroups}}</p> +{{ListGroups}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/API">Référence des interfaces des API Web </a>(un index de l'ensemble des interfaces qui composent ces API)</li> - <li><a href="/fr/docs/Web/API/Document_Object_Model">Le <em>Document Object Model</em></a> (DOM ou modèle objet de document)</li> - <li><a href="/fr/docs/Web/Events">Référence des évènements associés aux API Web</a></li> - <li><a href="/fr/docs/Apprendre">Apprendre le développement web</a></li> -</ul> +- [Référence des interfaces des API Web ](/fr/docs/Web/API)(un index de l'ensemble des interfaces qui composent ces API) +- [Le _Document Object Model_](/fr/docs/Web/API/Document_Object_Model) (DOM ou modèle objet de document) +- [Référence des évènements associés aux API Web](/fr/docs/Web/Events) +- [Apprendre le développement web](/fr/docs/Apprendre) diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md index 5e20228556..df597ef6ad 100644 --- a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md @@ -4,35 +4,25 @@ slug: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC 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>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> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Media Capture")}}</td> - <td>{{Spec2("Media Capture")}}</td> - <td>Définition de <code>getUserMedia</code> API.</td> - </tr> - <tr> - <td>{{SpecName("WebRTC 1.0")}}</td> - <td>{{Spec2("WebRTC 1.0")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +{{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](http://dev.w3.org/2011/webrtc/editor/webrtc.html) et [getUserMedia](http://dev.w3.org/2011/webrtc/editor/getusermedia.html), ainsi que différents brouillons de IETF, principalement du [groupe de travail rtcweb](http://tools.ietf.org/wg/rtcweb/), mais aussi [mmusic](http://tools.ietf.org/wg/mmusic/), [rmcat](http://tools.ietf.org/wg/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](http://www.webrtc.org/reference). + +**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](http://www.html5rocks.com/en/tutorials/webrtc/basics/). On pourra trouver sur le site [webrtc-landing](http://mozilla.github.com/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](https://apprtc.appspot.com/). + +Un article de [Hacks](https://hacks.mozilla.org/category/webrtc/) décrit avec précision ce qu'il se passe dans une connexion `RTCPeerConnecion `([lien](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/)) : + + + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------- | ------------------------------------ | --------------------------------- | +| {{SpecName("Media Capture")}} | {{Spec2("Media Capture")}} | Définition de `getUserMedia` API. | +| {{SpecName("WebRTC 1.0")}} | {{Spec2("WebRTC 1.0")}} | Définition initiale. | diff --git a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md index c7be3a71e6..040a2b93fd 100644 --- a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md @@ -1,5 +1,5 @@ --- -title: 'Mémoire tampon, position, et plages de temps' +title: Mémoire tampon, position, et plages de temps slug: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges tags: - Apps @@ -11,67 +11,72 @@ 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](/fr/docs/Web/API/TimeRanges), et d'autres fonctionnalités de l'API Media. -<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> +## Buffered +L'attribut `buffered` indique quelles parties du média ont été téléchargées. Il retourne un objet {{ domxref("TimeRanges") }}, qui indique tous les morceaux téléchargés. C'est généralement contigu, mais si l'utilisateur saute à une autre position pendant que le média est en cours de chargement, il peut alors y avoir des trous. -<h2 id="Buffered">Buffered</h2> +Cela fonctionne avec {{htmlelement("audio") }} et {{htmlelement("video") }}; pour l'instant, considérons un simple exemple audio: -<p>L'attribut <code>buffered</code> indique quelles parties du média ont été téléchargées. Il retourne un objet {{ domxref("TimeRanges") }}, qui indique tous les morceaux téléchargés. C'est généralement contigu, mais si l'utilisateur saute à une autre position pendant que le média est en cours de chargement, il peut alors y avoir des trous.</p> +```html +<audio id="my-audio" controls src="music.mp3"> +</audio> +``` -<p>Cela fonctionne avec {{htmlelement("audio") }} et {{htmlelement("video") }}; pour l'instant, considérons un simple exemple audio:</p> +On accède à cet attribut ainsi: -<pre class="brush: html"><audio id="my-audio" controls src="music.mp3"> -</audio></pre> +```js +var myAudio = document.getElementById('my-audio'); -<p>On accède à cet attribut ainsi:</p> +var bufferedTimeRanges = myAudio.buffered; +``` -<pre class="brush: js">var myAudio = document.getElementById('my-audio'); +## Objet TimeRanges -var bufferedTimeRanges = myAudio.buffered;</pre> +TimeRanges est une série de plages de temps ne se chevauchant pas, avec un temps de début et de fin. ([en savoir plus sur TimeRanges](/fr/docs/Web/API/TimeRanges)). -<h2 id="Objet_TimeRanges">Objet TimeRanges</h2> +Un objet {{ domxref("TimeRanges") }} contient les propriétés/méthodes suivantes: -<p>TimeRanges est une série de plages de temps ne se chevauchant pas, avec un temps de début et de fin. (<a href="/fr/docs/Web/API/TimeRanges">en savoir plus sur TimeRanges</a>).</p> +- `length`: Le nombre de plages de temps contenus dans l'objet. +- `start(index)`: Permet de récupérer le temps du début, en seconde, d'une plage de temps. +- `end(index)`: Permet de récupérer le temps de la fin, en seconde, d'une plage de temps. -<p>Un objet {{ domxref("TimeRanges") }} contient les propriétés/méthodes suivantes:</p> +Sans interraction utilisateur il y a généralement une seule plage de temps, mais si vous sautez dans le média alors plus d'une plage de temps peut apparaître, comme illustré dans la visualisation ci-dessous. Elle représente deux plages de temps en mémoire tampon — une qui s'étend de 0 à 5 secondes et la seconde qui s'étend de 15 à 19 secondes. -<ul> - <li><code>length</code>: Le nombre de plages de temps contenus dans l'objet.</li> - <li><code>start(index)</code>: Permet de récupérer le temps du début, en seconde, d'une plage de temps.</li> - <li><code>end(index)</code>: Permet de récupérer le temps de la fin, en seconde, d'une plage de temps.</li> -</ul> + ------------------------------------------------------ + |=============| |===========| | + ------------------------------------------------------ + 0 5 15 19 21 -<p>Sans interraction utilisateur il y a généralement une seule plage de temps, mais si vous sautez dans le média alors plus d'une plage de temps peut apparaître, comme illustré dans la visualisation ci-dessous. Elle représente deux plages de temps en mémoire tampon — une qui s'étend de 0 à 5 secondes et la seconde qui s'étend de 15 à 19 secondes.</p> +Pour cette instance audio, l'objet {{ domxref("TimeRanges") }} associé aurait les propriétés suivantes: -<pre>------------------------------------------------------ -|=============| |===========| | ------------------------------------------------------- -0 5 15 19 21</pre> - -<p>Pour cette instance audio, l'objet {{ domxref("TimeRanges") }} associé aurait les propriétés suivantes:</p> - -<pre class="brush: js">myAudio.buffered.length; // returns 2 +```js +myAudio.buffered.length; // returns 2 myAudio.buffered.start(0); // returns 0 myAudio.buffered.end(0); // returns 5 myAudio.buffered.start(1); // returns 15 -myAudio.buffered.end(1); // returns 19</pre> +myAudio.buffered.end(1); // returns 19 +``` -<p>Pour essayer et visualiser les plages de temps en mémoire tampon, on peut écrire un peu d'HTML:</p> +Pour essayer et visualiser les plages de temps en mémoire tampon, on peut écrire un peu d'HTML: -<pre class="brush: html"><p> - <audio id="my-audio" controls> - <source src="music.mp3" type="audio/mpeg"> - </audio> -</p> -<p> - <canvas id="my-canvas" width="300" height="20"> - </canvas> -</p></pre> +```html +<p> + <audio id="my-audio" controls> + <source src="music.mp3" type="audio/mpeg"> + </audio> +</p> +<p> + <canvas id="my-canvas" width="300" height="20"> + </canvas> +</p> +``` -<p>Et un peu de JavaScript:</p> +Et un peu de JavaScript: -<pre class="brush: js"> window.onload = function(){ +```js + window.onload = function(){ var myAudio = document.getElementById('my-audio'); var myCanvas = document.getElementById('my-canvas'); @@ -87,7 +92,7 @@ myAudio.buffered.end(1); // returns 19</pre> // afficher TimeRanges myAudio.addEventListener('seeked', function() { - for (i = 0; i < myAudio.buffered.length; i++) { + for (i = 0; i < myAudio.buffered.length; i++) { var startX = myAudio.buffered.start(i) * inc; var endX = myAudio.buffered.end(i) * inc; @@ -98,52 +103,55 @@ myAudio.buffered.end(1); // returns 19</pre> context.stroke(); } }); - }</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> +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><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> -</div> +> **Note :** Vous pouvez voir [cet exemple en direct sur JS Bin](http://jsbin.com/memazaro/1/edit). -<h2 id="Seekable">Seekable</h2> +## Seekable -<p>L'attribut <code>seekable</code> retourne un objet {{ domxref("TimeRanges") }} qui indique quelles parties du média peuvent être jouées sans chargement préalable. C'est indépendant du fait que la partie ait été téléchargée ou non: certaines parties peuvent être <em>seekable</em> mais non <em>buffered</em> si les requêtes de plage d'octets (byte-range requests) sont activées sur le serveur. Les requêtes de plage d'octets permettent aux parties du fichier média d'être délivrées du serveur et jouées presque immédiatement — et sont donc <em>seekable</em>.</p> +L'attribut `seekable` retourne un objet {{ domxref("TimeRanges") }} qui indique quelles parties du média peuvent être jouées sans chargement préalable. C'est indépendant du fait que la partie ait été téléchargée ou non: certaines parties peuvent être _seekable_ mais non _buffered_ si les requêtes de plage d'octets (byte-range requests) sont activées sur le serveur. Les requêtes de plage d'octets permettent aux parties du fichier média d'être délivrées du serveur et jouées presque immédiatement — et sont donc _seekable_. -<pre class="brush: js">var seekableTimeRanges = myAudio.seekable;</pre> +```js +var seekableTimeRanges = myAudio.seekable; +``` -<h2 id="Créer_notre_propre_barre_de_progrès">Créer notre propre barre de progrès</h2> +## Créer notre propre barre de progrès -<p>Si on voulait créer notre propre lecteur média, on pourrait vouloir afficher les parties du média prêtes à être jouées. Un bon moyen d'y arriver est d'utiliser l'attribut <code>seekable</code>.</p> +Si on voulait créer notre propre lecteur média, on pourrait vouloir afficher les parties du média prêtes à être jouées. Un bon moyen d'y arriver est d'utiliser l'attribut `seekable`. -<p>Bien qu'on ait vu que les parties ne sont pas nécessairement contigues, elles le sont généralement, et on peut utiliser une approximation de cette information pour donner à l'utilisateur une indication de la quantité de média qui peut être jouée directement. On peut trouver ce point en utilisant la ligne de code suivante:</p> +Bien qu'on ait vu que les parties ne sont pas nécessairement contigues, elles le sont généralement, et on peut utiliser une approximation de cette information pour donner à l'utilisateur une indication de la quantité de média qui peut être jouée directement. On peut trouver ce point en utilisant la ligne de code suivante: -<pre class="brush: js">var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);</pre> +```js +var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1); +``` -<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> -</div> +> **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. -<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> +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>Alors, construisons cela. Le HTML de notre lecteur ressemble à ça:</p> +Alors, construisons cela. Le HTML de notre lecteur ressemble à ça: -<pre class="brush: css"><audio id="my-audio" preload controls> - <source src="music.mp3" type="audio/mpeg"> -</audio> -<div class="buffered"> - <span id="buffered-amount"></span> -</div> -<div class="progress"> - <span id="progress-amount"></span> -</div> -</pre> +```css +<audio id="my-audio" preload controls> + <source src="music.mp3" type="audio/mpeg"> +</audio> +<div class="buffered"> + <span id="buffered-amount"></span> +</div> +<div class="progress"> + <span id="progress-amount"></span> +</div> +``` -<p>Nous utiliserons le CSS suivant pour styliser l'affichage de la mémoire tampon:</p> +Nous utiliserons le CSS suivant pour styliser l'affichage de la mémoire tampon: -<pre class="brush: css">.buffered { +```css +.buffered { height: 20px; position: relative; background: #555; @@ -169,19 +177,21 @@ myAudio.buffered.end(1); // returns 19</pre> height: 100%; background-color: #595; width: 0; -}</pre> +} +``` -<p>Et le JavaScript suivant se charge notre fonctionnalité:</p> +Et le JavaScript suivant se charge notre fonctionnalité: -<pre class="brush: js">window.onload = function(){ +```js +window.onload = function(){ var myAudio = document.getElementById('my-audio'); myAudio.addEventListener('progress', function() { var duration = myAudio.duration; - if (duration > 0) { - for (var i = 0; i < myAudio.buffered.length; i++) { - if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) { + if (duration > 0) { + for (var i = 0; i < myAudio.buffered.length; i++) { + if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) { document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%"; break; } @@ -191,28 +201,29 @@ myAudio.buffered.end(1); // returns 19</pre> myAudio.addEventListener('timeupdate', function() { var duration = myAudio.duration; - if (duration > 0) { + if (duration > 0) { document.getElementById('progress-amount').style.width = ((myAudio.currentTime / duration)*100) + "%"; } }); -}</pre> +} +``` -<p>L'événement <code>progress</code> est déclenché au fur et à mesure que les données sont téléchargées, cela nous permet de réagir pour afficher la progression du téléchargement ou de la mise en mémoire tampon.</p> +L'événement `progress` est déclenché au fur et à mesure que les données sont téléchargées, cela nous permet de réagir pour afficher la progression du téléchargement ou de la mise en mémoire tampon. -<p>L'événement <code>timeupdate</code> est declénché 4 fois par seconde au fur et à mesure que le média est joué et c'est là qu'on incrémente notre barre de progrès.</p> +L'événement `timeupdate` est declénché 4 fois par seconde au fur et à mesure que le média est joué et c'est là qu'on incrémente notre barre de progrès. -<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> +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><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> -</div> +> **Note :** Voir pouvez [voir l'exemple en direct sur JS Bin](http://jsbin.com/badimipi/1/edit). -<h2 id="Un_petit_mot_sur_Played">Un petit mot sur Played</h2> +## Un petit mot sur Played -<p>Il vaut la peine de mentionner la propriété <code>played</code> — elle nous indique quelles plages de temps ont été jouées dans le média. Par exemple:</p> +Il vaut la peine de mentionner la propriété `played` — elle nous indique quelles plages de temps ont été jouées dans le média. Par exemple: -<pre class="brush: js">var played = audio.played; // returns a TimeRanges object</pre> +```js +var played = audio.played; // returns a TimeRanges object +``` -<p>Ce peut être utile pour récupérer les parties du média qui sont les plus écoutées ou regardées.</p> +Ce peut être utile pour récupérer les parties du média qui sont les plus écoutées ou regardées. diff --git a/files/fr/web/guide/audio_and_video_delivery/index.md b/files/fr/web/guide/audio_and_video_delivery/index.md index 9b5ede8e2d..e4ceb5c6db 100644 --- a/files/fr/web/guide/audio_and_video_delivery/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/index.md @@ -3,73 +3,70 @@ title: Intégration audio et vidéo slug: Web/Guide/Audio_and_video_delivery translation_of: Web/Guide/Audio_and_video_delivery --- -<p>On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, du fichier média statique au <i lang="en">live stream</i> (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.</p> +On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, du fichier média statique au <i lang="en">live stream</i> (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires. -<h2 id="the_audio_and_video_elements">Les éléments audio et vidéo</h2> +## Les éléments audio et vidéo -<p>Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>. Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants :</p> +Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video). Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants : -<ul> - <li><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#audio_codec_support">Tableau de compatibilité des codecs audio</a></li> - <li><a href="/fr/docs/Web/Media/Formats/Video_codecs">Guide sur les codecs pour les vidéos</a></li> -</ul> +- [Tableau de compatibilité des codecs audio](/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#audio_codec_support) +- [Guide sur les codecs pour les vidéos](/fr/docs/Web/Media/Formats/Video_codecs) -<p>Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit :</p> +Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit : -<ol> - <li>Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité ;</li> - <li>Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format ;</li> - <li>Définir la façon dont vous voulez lire/instancier le média (par exemple un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, ou peut-être via JavaScript avec <code>document.createElement('video')</code>) ;</li> - <li>Ajouter le fichier média au lecteur.</li> -</ol> +1. Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité ; +2. Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format ; +3. Définir la façon dont vous voulez lire/instancier le média (par exemple un élément [`<video>`](/fr/docs/Web/HTML/Element/video), ou peut-être via JavaScript avec `document.createElement('video')`) ; +4. Ajouter le fichier média au lecteur. -<h3 id="html_audio">Audio HTML</h3> +### Audio HTML -<pre class="brush: html"><audio controls preload="auto"> - <source src="audiofile.mp3" type="audio/mpeg"> +```html +<audio controls preload="auto"> + <source src="audiofile.mp3" type="audio/mpeg"> - <!-- fallback pour les navigateurs qui ne supportent pas mp3 --> - <source src="audiofile.ogg" type="audio/ogg"> + <!-- fallback pour les navigateurs qui ne supportent pas mp3 --> + <source src="audiofile.ogg" type="audio/ogg"> - <!-- fallback pour les navigateurs qui ne supportent pas la balise audio --> - <a href="audiofile.mp3">Télécharger l'audio</a> -</audio></pre> + <!-- fallback pour les navigateurs qui ne supportent pas la balise audio --> + <a href="audiofile.mp3">Télécharger l'audio</a> +</audio> +``` -<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> +Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecture fluide. -<div class="note"> -<p><strong>Note :</strong> l'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p> -</div> +> **Note :** l'attribut `preload` peut être ignoré par certains navigateurs mobiles. -<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> +Pour plus d'informations voir [Les bases de l'audio multi-navigateur (Audio HTML5 en détails)](/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#html5_audio_in_detail) -<h3 id="html_video">Vidéo HTML</h3> +### Vidéo HTML -<pre class="brush: html"><video controls width="640" height="480" poster="initialimage.png" autoplay muted> - <source src="videofile.mp4" type="video/mp4"> +```html +<video controls width="640" height="480" poster="initialimage.png" autoplay muted> + <source src="videofile.mp4" type="video/mp4"> - <!-- fallback pour les navigateurs qui ne supportent pas mp4 --> - <source src="videofile.webm" type="video/webm"> + <!-- fallback pour les navigateurs qui ne supportent pas mp4 --> + <source src="videofile.webm" type="video/webm"> - <!-- spécifie les fichiers de sous-titres --> - <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> - <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> + <!-- spécifie les fichiers de sous-titres --> + <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> + <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> - <!-- fallback pour les navigateurs qui ne supportent pas la balise video --> - <a href="videofile.mp4">Télécharger la vidéo</a> -</video></pre> + <!-- fallback pour les navigateurs qui ne supportent pas la balise video --> + <a href="videofile.mp4">Télécharger la vidéo</a> +</video> +``` -<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> +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. -<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> -</div> +> **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](/fr/docs/Web/Media/Autoplay_guide) pour savoir comment l'utiliser pertinemment. -<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> +Pour plus d'informations voir [l'article de référence sur l'élément `<video>`](/fr/docs/Web/HTML/Element/video) et [la page sur la création d'un lecteur vidéo multi-navigateur](/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player). -<h3 id="javascript_audio">Audio JavaScript</h3> +### Audio JavaScript -<pre class="brush: js">const myAudio = document.createElement('audio'); +```js +const myAudio = document.createElement('audio'); if (myAudio.canPlayType('audio/mpeg')) { myAudio.setAttribute('src','audiofile.mp3'); @@ -78,23 +75,25 @@ if (myAudio.canPlayType('audio/mpeg')) { } myAudio.currentTime = 5; -myAudio.play();</pre> +myAudio.play(); +``` -<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> +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. -<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> -</div> +> **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. -<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> +Il est également possible de donner un fichier WAV encodé en base64 à l'élément [`<audio>`](/fr/docs/Web/HTML/Element/audio), permettant ainsi de générer de l'audio à la volée : -<pre class="brush: html"><audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio></pre> +```html +<audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio> +``` -<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="https://speak-demo.herokuapp.com">Essayez la démo</a>.</p> +[Speak.js](https://github.com/kripken/speak.js/) emploie cette technique. [Essayez la démo](https://speak-demo.herokuapp.com). -<h3 id="javascript_video">Vidéo JavaScript</h3> +### Vidéo JavaScript -<pre class="brush: js">const myVideo = document.createElement('video'); +```js +const myVideo = document.createElement('video'); if (myVideo.canPlayType('video/mp4')) { myVideo.setAttribute('src','videofile.mp4'); @@ -103,13 +102,15 @@ if (myVideo.canPlayType('video/mp4')) { } myVideo.width = 480; -myVideo.height = 320;</pre> +myVideo.height = 320; +``` -<p>On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo.</p> +On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo. -<h2 id="web_audio_api">API Web Audio</h2> +## API Web Audio -<pre class="brush: js">let context; +```js +let context; let request; let source; @@ -133,21 +134,24 @@ try { } catch(e) { console.error(`L'API Web Audio n'est pas prise en charge`); -}</pre> +} +``` -<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="https://jsbin.com/facutone/1/edit?js">essayez par vous-même</a>). Pour en savoir plus sur l'API Web Audio voir <a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a>.</p> +Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit ([essayez par vous-même](https://jsbin.com/facutone/1/edit?js)). Pour en savoir plus sur l'API Web Audio voir [Utiliser l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API). -<h2 id="getusermedia_stream_api">getUserMedia / Stream API</h2> +## getUserMedia / Stream API -<p>Il est également possible de récupérer un <i lang="en">live stream</i> de la webcam et/ou du microphone de la personne consultant le site avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p> +Il est également possible de récupérer un <i lang="en">live stream</i> de la webcam et/ou du microphone de la personne consultant le site avec `getUserMedia` et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera. -<p>Pour récupérer un flux de la webcam, commençons par créer un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> :</p> +Pour récupérer un flux de la webcam, commençons par créer un élément [`<video>`](/fr/docs/Web/HTML/Element/video) : -<pre class="brush: html"><video id="webcam" width="480" height="360"></video></pre> +```html +<video id="webcam" width="480" height="360"></video> +``` -<p>Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video :</p> +Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video : -<pre class="brush: js"> +```js if (navigator.mediaDevices) { navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then(function onSuccess(stream) { @@ -161,17 +165,17 @@ if (navigator.mediaDevices) { } else { console.error(`getUserMedia n'est pas pris en charge par ce navigateur.`); } -</pre> +``` -<p>Pour en savoir plus, lisez la page <a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>MediaDevices.getUserMedia</code></a>.</p> +Pour en savoir plus, lisez la page [`MediaDevices.getUserMedia`](/fr/docs/Web/API/MediaDevices/getUserMedia). -<h2 id="mediastream_recording">Enregistrement de flux média</h2> +## Enregistrement de flux média -<p>De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant <code>getUserMedia</code> — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par <code>getUserMedia</code>, on le donne en paramètre à un objet <code>MediaRecorder</code>, puis on utilise le résultat obtenu comme source audio ou video.</p> +De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant `getUserMedia` — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par `getUserMedia`, on le donne en paramètre à un objet `MediaRecorder`, puis on utilise le résultat obtenu comme source audio ou video. -<p>Le principe de base est décrit ci-après :</p> +Le principe de base est décrit ci-après : -<pre class="brush: js"> +```js navigator.mediaDevices.getUserMedia({audio:true}) .then(function onSuccess(stream) { const recorder = new MediaRecorder(stream); @@ -195,51 +199,51 @@ navigator.mediaDevices.getUserMedia({audio:true}) .catch(function onError(error) { console.log(error.message); }); -</pre> +``` -<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">l'API MediaRecorder</a> pour plus de détails.</p> +Voir [l'API MediaRecorder](/fr/docs/Web/API/MediaRecorder_API) pour plus de détails. -<h2 id="media_source_extensions_mse">Media Source Extensions (MSE)</h2> +## Media Source Extensions (MSE) -<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct.</p> +[Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct. -<h3 id="encrypted_media_extensions_eme">Encrypted Media Extensions (EME)</h3> +### Encrypted Media Extensions (EME) -<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> (EME ou « extensions pour les médias chiffrés ») est une proposition du W3C d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> en fournissant des API pour contrôler la lecture de contenu protégé.</p> +[Encrypted Media Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html) (EME ou « extensions pour les médias chiffrés ») est une proposition du W3C d'étendre [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) en fournissant des API pour contrôler la lecture de contenu protégé. -<p>L'API prend en charge divers cas d'utilisation, allant du simple déchiffrement par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui prennent en charge différentes technologies de déchiffrement et de protection de contenu. Un des principaux usages d'EME est de permettre au navigateur d'implémenter la gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques"><i lang="en">Digital Rights Management</i></a>).</p> +L'API prend en charge divers cas d'utilisation, allant du simple déchiffrement par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui prennent en charge différentes technologies de déchiffrement et de protection de contenu. Un des principaux usages d'EME est de permettre au navigateur d'implémenter la gestion des DRM ([<i lang="en">Digital Rights Management</i>](https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques)). -<h3 id="adaptive_streaming">Diffusion adaptative</h3> +### Diffusion adaptative -<p>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter la diffusion adaptative. Une diffusion adaptative est un flux en direct qui s'adapte à la bande passante disponible de la personne utilisant le site. Typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. La diffusion adaptative est souvent utilisée en conjonction avec le <i lang="en">live streaming</i>, où une diffusion fluide de l'audio et vidéo est primordiale.</p> +De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter la diffusion adaptative. Une diffusion adaptative est un flux en direct qui s'adapte à la bande passante disponible de la personne utilisant le site. Typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. La diffusion adaptative est souvent utilisée en conjonction avec le <i lang="en">live streaming</i>, où une diffusion fluide de l'audio et vidéo est primordiale. -<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> +Les principaux encodages utilisés pour le streaming adaptatif sont [HLS](/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#hls) et [MPEG-DASH](/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#mpeg-dash). MSE a été conçu avec DASH en tête, il définit les flux d'octets selon [ISOBMFF](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html) et [M2TS](https://en.wikipedia.org/wiki/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é. -<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> -</div> +> **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. -<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> +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. -<p>Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</p> +Pour plus d'informations, voir [Live streaming web Audio et Vidéo](/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video). -<h2 id="customizing_your_media_player">Personnaliser votre lecteur média</h2> +## Personnaliser votre lecteur média -<p>Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut <code>controls</code> afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo.</p> +Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut `controls` afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo. -<p>Si vous avez besoin d'aller plus loin, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progression sous certaines conditions.</p> +Si vous avez besoin d'aller plus loin, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progression sous certaines conditions. -<p>Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour la personne utilisant le lecteur média.</p> +Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour la personne utilisant le lecteur média. -<p>Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML:</p> +Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML: -<pre class="brush: html"> -<audio id="my-audio" src="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio> -<button id="my-control">play</button></pre> +```html +<audio id="my-audio" src="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio> +<button id="my-control">play</button> +``` -<p>Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio:</p> +Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio: -<pre class="brush: js">window.onload = function() { +```js +window.onload = function() { const myAudio = document.getElementById('my-audio'); const myControl = document.getElementById('my-control'); @@ -265,130 +269,128 @@ navigator.mediaDevices.getUserMedia({audio:true}) }, false); window.addEventListener( "keypress", checkKey, false ); -}</pre> +} +``` -<p>Vous pouvez <a href="https://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#creating_your_own_custom_audio_player">Créer votre propre lecteur audio</a>.</p> +Vous pouvez [essayer cet exemple ici](https://jsbin.com/jujeladu/2/edit). Pour plus d'informations, voir [Créer votre propre lecteur audio](/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#creating_your_own_custom_audio_player). -<h2 id="other_tips_for_audiovideo">Autres conseils pour l'audio/video</h2> +## Autres conseils pour l'audio/video -<h3 id="stopping_the_download_of_media">Interrompre le téléchargement d'un média</h3> +### Interrompre le téléchargement d'un média -<p>Bien qu'il suffit d'utiliser la méthode <code>pause()</code> pour interrompre la lecture d'un média, le navigateur continue de télécharger le média jusqu'à ce que l'élément correspondant soit nettoyé par le ramasse-miettes.</p> +Bien qu'il suffit d'utiliser la méthode `pause()` pour interrompre la lecture d'un média, le navigateur continue de télécharger le média jusqu'à ce que l'élément correspondant soit nettoyé par le ramasse-miettes. -<p>Voici une astuce qui permet d'arrêter le téléchargement :</p> +Voici une astuce qui permet d'arrêter le téléchargement : -<pre class="brush: js">const mediaElement = document.querySelector("#monIDdeMedia"); -mediaElement.removeAttribute("src"); +```js +const mediaElement = document.querySelector("#monIDdeMedia"); +mediaElement.removeAttribute("src"); mediaElement.load(); -</pre> +``` -<p>En supprimant l'attribut <code>src</code> de l'élément et en invoquant la méthode <code>load()</code>, on libère les ressources associées à la vidéo, ce qui entraîne l'arrêt du téléchargement. Il est nécessaire d'invoquer <code>load()</code> après le retrait de l'attribut, car sa simple suppression ne relance pas l'algorithme chargement. Si l'élément <code><video></code> dispose également d'éléments descendants <code><source></code>, ceux-ci devraient également être supprimés avant l'appel à <code>load()</code>.</p> +En supprimant l'attribut `src` de l'élément et en invoquant la méthode `load()`, on libère les ressources associées à la vidéo, ce qui entraîne l'arrêt du téléchargement. Il est nécessaire d'invoquer `load()` après le retrait de l'attribut, car sa simple suppression ne relance pas l'algorithme chargement. Si l'élément `<video>` dispose également d'éléments descendants `<source>`, ceux-ci devraient également être supprimés avant l'appel à `load()`. -<p>Si on définit l'attribut <code>src</code> avec une chaîne vide, le navigateur considèrera la source comme un chemin relatif et cela déclenchera une tentative d'un autre téléchargement à partir d'une source qui n'est probablement pas une vidéo valide.</p> +Si on définit l'attribut `src` avec une chaîne vide, le navigateur considèrera la source comme un chemin relatif et cela déclenchera une tentative d'un autre téléchargement à partir d'une source qui n'est probablement pas une vidéo valide. -<h3 id="seeking_through_media">Parcourir la piste du média</h3> +### Parcourir la piste du média -<p>Les éléments média permettent de placer le curseur de lecture à des instants spécifiques du contenu. Pour cela, on ajustera la propriété <code>currentTime</code> de l'élément (voir <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour plus de détails)</p> +Les éléments média permettent de placer le curseur de lecture à des instants spécifiques du contenu. Pour cela, on ajustera la propriété `currentTime` de l'élément (voir [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) pour plus de détails) -<p>La propriété <code>seekable</code> de l'élément peut être utilisée afin de déterminer les intervalles disponibles pour de tels déplacements. Cette propriété renvoie un objet <a href="/fr/docs/Web/API/TimeRanges"><code>TimeRanges</code></a> contenant les intervalles temporels accessibles.</p> +La propriété `seekable` de l'élément peut être utilisée afin de déterminer les intervalles disponibles pour de tels déplacements. Cette propriété renvoie un objet [`TimeRanges`](/fr/docs/Web/API/TimeRanges) contenant les intervalles temporels accessibles. -<pre class="brush: js">const mediaElement = document.querySelector('#mediaElementID'); +```js +const mediaElement = document.querySelector('#mediaElementID'); mediaElement.seekable.start(0); // Renvoie l'instant de départ (en secondes) mediaElement.seekable.end(0); // Renvoie l'instant de fin (en secondes) mediaElement.currentTime = 122; // Déplace la lecture à 122 secondes mediaElement.played.end(0); // Renvoie le nombre de secondes lues par le navigateur -</pre> +``` -<h3 id="specifying_playback_range">Définir des intervalles de lecture</h3> +### Définir des intervalles de lecture -<p>Lors de la définition de l'URI du média d'un élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média.</p> +Lors de la définition de l'URI du média d'un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video), il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média. -<p>Un intervalle temporel se définit avec la syntaxe suivante :</p> +Un intervalle temporel se définit avec la syntaxe suivante : -<pre>#t=[tempsdebut][,tempsfin]</pre> + #t=[tempsdebut][,tempsfin] -<p>La valeur temporelle peut être définie en nombre de secondes (avec une valeur décimale) ou avec un horodatage en heures/minutes/secondes avec un deux-points comme séparateur (par exemple 2:05:01 pour indiquer 2 heures, 5 minutes et 1 seconde).</p> +La valeur temporelle peut être définie en nombre de secondes (avec une valeur décimale) ou avec un horodatage en heures/minutes/secondes avec un deux-points comme séparateur (par exemple 2:05:01 pour indiquer 2 heures, 5 minutes et 1 seconde). -<p>Voici quelques exemples :</p> +Voici quelques exemples : -<dl> - <dt><code>https://example.com/video.ogv#t=10,20</code></dt> - <dd>Indique que la vidéo devrait jouer l'intervalle compris entre 10 et 20 secondes.</dd> - <dt><code>https://example.com/video.ogv#t=,10.5</code></dt> - <dd>Indique que la vidéo devrait jouer l'intervalle depuis le début et jusqu'à 10,5 secondes.</dd> - <dt><code>https://example.com/video.ogv#t=,02:00:00</code></dt> - <dd>Indique que la vidéo devrait jouer depuis le début et jusqu'à deux heures.</dd> - <dt><code>https://example.com/video.ogv#t=60</code></dt> - <dd>Indique que la vidéo devrait commencer sa lecture à 60 secondes puis continuer jusqu'à la fin.</dd> -</dl> +- `https://example.com/video.ogv#t=10,20` + - : Indique que la vidéo devrait jouer l'intervalle compris entre 10 et 20 secondes. +- `https://example.com/video.ogv#t=,10.5` + - : Indique que la vidéo devrait jouer l'intervalle depuis le début et jusqu'à 10,5 secondes. +- `https://example.com/video.ogv#t=,02:00:00` + - : Indique que la vidéo devrait jouer depuis le début et jusqu'à deux heures. +- `https://example.com/video.ogv#t=60` + - : Indique que la vidéo devrait commencer sa lecture à 60 secondes puis continuer jusqu'à la fin. -<h2 id="error_handling">Déboguer les problèmes audio/vidéo</h2> +## Déboguer les problèmes audio/vidéo -<p>Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les différents points qui suivent.</p> +Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les différents points qui suivent. -<h3 id="checking_whether_the_browser_supports_the_supplied_formats">Est-ce que le navigateur prend en charge les formats fournis ?</h3> +### Est-ce que le navigateur prend en charge les formats fournis ? -<p>Utilisez les fichiers suivants pour vérifier le support de votre format:</p> +Utilisez les fichiers suivants pour vérifier le support de votre format: -<ul> - <li>Audio MP3 (<code>type="audio/mpeg"</code>) : <a href="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="https://jsbin.com/gekatoge/1/edit">audio MP3 en direct</a>)</li> - <li>Audio MP4 (<code>type="audio/mp4"</code>) : <a href="https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="https://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>)</li> - <li>Audio Ogg (<code>type="audio/ogg"</code>) : <a href="https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="https://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>)</li> - <li>Video MP4 (<code>type="video/mp4"</code>) : <a href="https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="https://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>)</li> - <li>Video WebM (<code>type="video/webm"</code>) : <a href="https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="https://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>)</li> - <li>Video Ogg (<code>type="video/ogg"</code>) : <a href="https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="https://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>)</li> -</ul> +- Audio MP3 (`type="audio/mpeg"`) : <https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3> ([audio MP3 en direct](https://jsbin.com/gekatoge/1/edit)) +- Audio MP4 (`type="audio/mp4"`) : <https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a> ([audio MP4 en direct](https://jsbin.com/gekatoge/2/edit)) +- Audio Ogg (`type="audio/ogg"`) : <https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg> ([audio OGG en direct](https://jsbin.com/gekatoge/4/edit)) +- Video MP4 (`type="video/mp4"`) : <https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v> ([vidéo MP4 en direct](https://jsbin.com/gekatoge/5/edit)) +- Video WebM (`type="video/webm"`) : <https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm> ([vidéo WebM en direct](https://jsbin.com/gekatoge/6/edit)) +- Video Ogg (`type="video/ogg"`) : <https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv> ([vidéo OGG en direct](https://jsbin.com/gekatoge/7/edit)) -<p>Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours.</p> +Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours. -<p>Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux explications possibles, que nous verrons ci-après.</p> +Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux explications possibles, que nous verrons ci-après. -<h4 id="1._the_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. Le serveur ne fournit pas le type MIME correct du fichier</h4> +#### 1. Le serveur ne fournit pas le type MIME correct du fichier -<p>Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier <code>.htaccess</code> :</p> +Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier `.htaccess` : -<pre># AddType TYPE/SUBTYPE EXTENSION + # AddType TYPE/SUBTYPE EXTENSION -AddType audio/mpeg mp3 -AddType audio/mp4 m4a -AddType audio/ogg ogg -AddType audio/ogg oga + AddType audio/mpeg mp3 + AddType audio/mp4 m4a + AddType audio/ogg ogg + AddType audio/ogg oga -AddType video/mp4 mp4 -AddType video/mp4 m4v -AddType video/ogg ogv -AddType video/webm webm -AddType video/webm webmv</pre> + AddType video/mp4 mp4 + AddType video/mp4 m4v + AddType video/ogg ogv + AddType video/webm webm + AddType video/webm webmv -<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Votre fichier n'est pas encodé correctement</h4> +#### 2. Votre fichier n'est pas encodé correctement -<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables :</p> +Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables : -<ul> - <li><a href="https://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li> - <li><a href="https://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li> - <li><a href="https://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li> - <li><a href="https://firefogg.org/">Firefogg</a> - Encodage audio et vidéo pour Firefox</li> - <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Encodeur en ligne de commande complet</li> - <li><a href="https://libav.org/">Libav</a> - Encodeur en ligne de commande complet</li> - <li><a href="https://m.vid.ly/">Vid.ly</a> - Lecteur Video player, transcodeur et outil de diffusion</li> - <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li> -</ul> +- [Audacity](https://audacity.sourceforge.net/) - Éditeur et enregistreur audio gratuit +- [Miro](https://www.getmiro.com/) - Lecteur audio et vidéo open-source et gratuit +- [Handbrake](https://handbrake.fr/) - Transcodeur vidéo open-source +- [Firefogg](https://firefogg.org/) - Encodage audio et vidéo pour Firefox +- [FFmpeg2](https://www.ffmpeg.org/) - Encodeur en ligne de commande complet +- [Libav](https://libav.org/) - Encodeur en ligne de commande complet +- [Vid.ly](https://m.vid.ly/) - Lecteur Video player, transcodeur et outil de diffusion +- [Internet Archive](https://archive.org/) - Transcodage et stockage gratuit -<h3 id="showing_fallback_content_when_no_source_could_be_decoded">Utiliser du contenu de substitution si la source n'a pu être décodée</h3> +### Utiliser du contenu de substitution si la source n'a pu être décodée -<p>Il existe une autre méthode pour présenter du contenu alternatif lorsqu'aucune des ressources n'a pu être décodée par le navigateur. Celle-ci consiste à ajouter un gestionnaire d'erreur sur le dernier élément source et d'utiliser celui-ci afin de remplacer l'élément par son contenu alternatif :</p> +Il existe une autre méthode pour présenter du contenu alternatif lorsqu'aucune des ressources n'a pu être décodée par le navigateur. Celle-ci consiste à ajouter un gestionnaire d'erreur sur le dernier élément source et d'utiliser celui-ci afin de remplacer l'élément par son contenu alternatif : -<pre class="brush: html"><video controls> - <source src="dynamicsearch.mp4" type="video/mp4"></source> - <a href="dynamicsearch.mp4"> - <img src="dynamicsearch.jpg" alt="Recherche sur une application"> - </a> - <p>Cliquez sur l'image pour voir une vidéo de démonstration</p> -</video> -</pre> +```html +<video controls> + <source src="dynamicsearch.mp4" type="video/mp4"></source> + <a href="dynamicsearch.mp4"> + <img src="dynamicsearch.jpg" alt="Recherche sur une application"> + </a> + <p>Cliquez sur l'image pour voir une vidéo de démonstration</p> +</video> +``` -<pre class="brush: js"> +```js let v = document.querySelector('video'), sources = v.querySelectorAll('source'), lastsource = sources[sources.length-1]; @@ -397,89 +399,89 @@ lastsource.addEventListener('error', function(ev) { d.innerHTML = v.innerHTML; v.parentNode.replaceChild(d, v); }, false); -</pre> - -<h2 id="audiovideo_javascript_libraries">Bibliothèques JavaScript audio/vidéo</h2> - -<p>Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a> pour les sous-titres peuvent également être fournies par les bibliothèques média.</p> - -<h3 id="audio_only">Audio uniquement</h3> - -<ul> - <li><a href="https://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li> - <li><a href="https://521dimensions.com/open-source/amplitudejs">AmplitudeJS</a></li> - <li><a href="https://howlerjs.com/">HowlerJS</a></li> -</ul> - -<h3 id="video_only">Vidéo uniquement</h3> - -<ul> - <li><a href="https://flowplayer.org/">flowplayer</a> : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL)</li> - <li><a href="https://www.jwplayer.com">JWPlayer</a> : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons)</li> - <li><a href="https://www.sublimevideo.net/">SublimeVideo</a> : Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.</li> - <li><a href="https://www.videojs.com/">Video.js</a> : Gratuit et open source (licence Apache 2)</li> -</ul> - -<h3 id="audio_and_video">Audio et vidéo</h3> - -<ul> - <li><a href="https://jPlayer.org">jPlayer</a> : Gratuit et open source (Licence MIT)</li> - <li><a href="https://mediaelementjs.com/">mediaelement.js</a> : Gratuit et open source (Licence MIT)</li> -</ul> - -<h3 id="web_audio_api_2">Web Audio API</h3> - -<ul> - <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a> : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio</li> -</ul> - -<h2 id="basic_tutorials">Tutoriels pour apprendre les bases</h2> - -<dl> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo fonctionnant sur tous les navigateurs (en anglais)</a></dt> - <dd>Guide pour créer un lecteur vidéo simple et fonctionnant sur tous les navigateurs en utilisant l'élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></dd> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Video_player_styling_basics">Bases concernant la mise en forme des lecteurs vidéo (en anglais)</a></dt> - <dd>À l'aide du lecteur vidéo mis en place sur l'article précédent, cet article montre comment fournir une mise en forme basique et responsive (en anglais)</dd> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Les bases pour créer un lecteur audio fonctionnant sur tous les navigateurs (en anglais)</a></dt> - <dd>Cet article propose un guide de base pour créer un lecteur audio HTML5 qui fonctionne sur tous les navigateurs, avec une explication pour tous les attributs, propriétés et évènements associés, ainsi qu'un guide introduisant rapidement les contrôles personnalisés créés avec l'API Media (en anglais)</dd> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Mise en tampon des fichiers médias, recherche et gestion des intervales de temps</a></dt> - <dd>Parfois, il est utile de savoir le temps de téléchargment et de lecture des éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> sans attendre — un bon exemple d'application est la barre de progression mise en mémoire tampon d'un fichier audio ou vidéo. Cet article présente la construction d'une barre de recherche et mise en mémoire tampon en utilisant l'API <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a> ainsi que d'autres fonctionnalités de l'API <code>Media</code>.</dd> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">Explications concernant la propriété <code>playbackRate</code> proposée par HTML5</a></dt> - <dd>La propriété <code>playbackRate</code> permet de modifier la vitesse ou la fréquence à laquelle un morceau de fichier audio ou vidéo est joué. Cet article l'explique en détails.</dd> - <dt><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></dt> - <dd>Explique les bases de l'API Web Audio, afin de pouvoir atteindre, manipuler et jouer une ressource audio.</dd> -</dl> - -<h2 id="streaming_media_tutorials">Tutoriels concernant la diffusion en direct (streaming)</h2> - -<dl> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Diffusion en direct de fichiers audio et vidéo sur le web</a></dt> - <dd>Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de <i lang="en">streaming</i> ou de <i lang="en">live</i>. Il s'agit du processus de transmission en direct d'une source média. Cela est plutôt complexe et sujet à de nombreux paramètres. Cet article fait une présentation générale du sujet et indique comment débuter.</dd> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Mettre en place une ressource média diffusée en direct adaptative</a></dt> - <dd>Si vous avez besoin de mettre en place une ressource média diffusée en direct et adaptative sur un serveur, et que cette ressource doit être consommée au sein d'un élément média HTML5, cet article explique comment faire. Il détaille les deux principaux formats, MPEG-DASH et HLS (<i lang="en">HTTP Live Streaming</i>)</dd> - <dt><a href="/fr/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video">Diffusion en direct et adaptative DASH pour les vidéos HTML5</a></dt> - <dd>Informations concernant la mise en place d'une diffusion en direct adaptative avec les formats DASH et WebM.</dd> -</dl> - -<h2 id="advanced_tutorials">Tutoriels avancés</h2> - -<dl> - <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Ajout de légendes et de sous-titres aux vidéos HTML5</a></dt> - <dd>Cet article explique comment ajouter des légendes et des sous-titres à l'élément HTML5 <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, en utilisant le format <a href="/fr/docs/Web/API/WebVTT_API">VTT (<i lang="en">Video Text Tracks</i>)</a> et l'élément <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>.</dd> - <dt><a href="/fr/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Utiliser l'API Audio de façon compatible</a></dt> - <dd>Un guide pour utiliser l'API Audio de façon compatible sur tous les navigateurs.</dd> - <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Capture audio simplifiée avec l'API MediaRecorder</a></dt> - <dd>Cet article montre les bases de l'utilisation de l'API MediaRecorder, utilisée afin d'enregistrer un flux média.</dd> -</dl> - -<h2 id="references">Références</h2> - -<ul> - <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code><video></code></a></li> - <li><a href="/fr/docs/Web/API/HTMLVideoElement">L'API <code>HTMLVideoElement</code></a></li> - <li><a href="/fr/docs/Web/API/MediaSource">L'API <code>MediaSource</code></a></li> - <li><a href="/fr/docs/Web/API/Web_Audio_API">L'API Web Audio</a></li> - <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API <code>MediaRecorder</code></a></li> - <li><a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>getUserMedia()</code></a></li> - <li><a href="/fr/docs/Web/Events#media">Référence des évènements relatifs aux médias</a></li> -</ul> +``` + +## Bibliothèques JavaScript audio/vidéo + +Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments [`<track>`](/fr/docs/Web/HTML/Element/track) pour les sous-titres peuvent également être fournies par les bibliothèques média. + +### Audio uniquement + +- [SoundManager](https://www.schillmania.com/projects/soundmanager2/) +- [AmplitudeJS](https://521dimensions.com/open-source/amplitudejs) +- [HowlerJS](https://howlerjs.com/) + +### Vidéo uniquement + +- [flowplayer](https://flowplayer.org/) : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL) +- [JWPlayer](https://www.jwplayer.com) : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons) +- [SublimeVideo](https://www.sublimevideo.net/) : Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN. +- [Video.js](https://www.videojs.com/) : Gratuit et open source (licence Apache 2) + +### Audio et vidéo + +- [jPlayer](https://jPlayer.org) : Gratuit et open source (Licence MIT) +- [mediaelement.js](https://mediaelementjs.com/) : Gratuit et open source (Licence MIT) + +### Web Audio API + +- [AudioContext monkeypatch](https://github.com/cwilso/AudioContext-MonkeyPatch) : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio + +## Tutoriels pour apprendre les bases + +- [Créer un lecteur vidéo fonctionnant sur tous les navigateurs (en anglais)](/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player) + - : Guide pour créer un lecteur vidéo simple et fonctionnant sur tous les navigateurs en utilisant l'élément [`<video>`](/fr/docs/Web/HTML/Element/video) +- [Bases concernant la mise en forme des lecteurs vidéo (en anglais)](/fr/docs/Web/Apps/Build/Manipulating_media/Video_player_styling_basics) + - : À l'aide du lecteur vidéo mis en place sur l'article précédent, cet article montre comment fournir une mise en forme basique et responsive (en anglais) +- [Les bases pour créer un lecteur audio fonctionnant sur tous les navigateurs (en anglais)](/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics) + - : Cet article propose un guide de base pour créer un lecteur audio HTML5 qui fonctionne sur tous les navigateurs, avec une explication pour tous les attributs, propriétés et évènements associés, ainsi qu'un guide introduisant rapidement les contrôles personnalisés créés avec l'API Media (en anglais) +- [Mise en tampon des fichiers médias, recherche et gestion des intervales de temps](/fr/docs/Web/Apps/Build/Manipulating_media/buffering_seeking_time_ranges) + - : Parfois, il est utile de savoir le temps de téléchargment et de lecture des éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video) sans attendre — un bon exemple d'application est la barre de progression mise en mémoire tampon d'un fichier audio ou vidéo. Cet article présente la construction d'une barre de recherche et mise en mémoire tampon en utilisant l'API [TimeRanges](/fr/docs/Web/API/TimeRanges) ainsi que d'autres fonctionnalités de l'API `Media`. +- [Explications concernant la propriété `playbackRate` proposée par HTML5](/fr/docs/Web/Apps/Build/Manipulating_media/HTML5_playbackRate_explained) + - : La propriété `playbackRate` permet de modifier la vitesse ou la fréquence à laquelle un morceau de fichier audio ou vidéo est joué. Cet article l'explique en détails. +- [Utilisation de l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) + - : Explique les bases de l'API Web Audio, afin de pouvoir atteindre, manipuler et jouer une ressource audio. + +## Tutoriels concernant la diffusion en direct (streaming) + +- [Diffusion en direct de fichiers audio et vidéo sur le web](/fr/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video) + + - : Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de + + <i lang="en">streaming</i> + + ou de + + <i lang="en">live</i> + + . Il s'agit du processus de transmission en direct d'une source média. Cela est plutôt complexe et sujet à de nombreux paramètres. Cet article fait une présentation générale du sujet et indique comment débuter. + +- [Mettre en place une ressource média diffusée en direct adaptative](/fr/docs/Web/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources) + + - : Si vous avez besoin de mettre en place une ressource média diffusée en direct et adaptative sur un serveur, et que cette ressource doit être consommée au sein d'un élément média HTML5, cet article explique comment faire. Il détaille les deux principaux formats, MPEG-DASH et HLS ( + + <i lang="en">HTTP Live Streaming</i> + + ) + +- [Diffusion en direct et adaptative DASH pour les vidéos HTML5](/fr/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video) + - : Informations concernant la mise en place d'une diffusion en direct adaptative avec les formats DASH et WebM. + +## Tutoriels avancés + +- [Ajout de légendes et de sous-titres aux vidéos HTML5](/fr/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video) + - : Cet article explique comment ajouter des légendes et des sous-titres à l'élément HTML5 [`<video>`](/fr/docs/Web/HTML/Element/video), en utilisant le format [VTT (<i lang="en">Video Text Tracks</i>)](/fr/docs/Web/API/WebVTT_API) et l'élément [`<track>`](/fr/docs/Web/HTML/Element/track). +- [Utiliser l'API Audio de façon compatible](/fr/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser) + - : Un guide pour utiliser l'API Audio de façon compatible sur tous les navigateurs. +- [Capture audio simplifiée avec l'API MediaRecorder](https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/) + - : Cet article montre les bases de l'utilisation de l'API MediaRecorder, utilisée afin d'enregistrer un flux média. + +## Références + +- [L'élément `<video>`](/fr/docs/Web/HTML/Element/video) +- [L'API `HTMLVideoElement`](/fr/docs/Web/API/HTMLVideoElement) +- [L'API `MediaSource`](/fr/docs/Web/API/MediaSource) +- [L'API Web Audio](/fr/docs/Web/API/Web_Audio_API) +- [L'API `MediaRecorder`](/fr/docs/Web/API/MediaStream_Recording_API) +- [`getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) +- [Référence des évènements relatifs aux médias](/fr/docs/Web/Events#media) diff --git a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md index 15662fe166..1a6d7f0665 100644 --- a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md @@ -6,284 +6,187 @@ 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. -<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> +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>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> +## Principales différences entre media en stream et statique -<h2 id="Principales_différences_entre_media_en_stream_et_statique">Principales différences entre media en stream et statique</h2> +Un média statique est un média stocké dans un fichier, comme un fichier mp3 ou webm. Ce fichier se trouve sur un serveur et peut être délivré — comme la plupart des types de fichier — au navigateur. Le navigateur peut commencer à jouer le média avant de l'avoir reçu en intégralité, c'est ce qu'on appelle un _téléchargement progressif_. -<p>Un média statique est un média stocké dans un fichier, comme un fichier mp3 ou webm. Ce fichier se trouve sur un serveur et peut être délivré — comme la plupart des types de fichier — au navigateur. Le navigateur peut commencer à jouer le média avant de l'avoir reçu en intégralité, c'est ce qu'on appelle un <em>téléchargement progressif</em>.</p> +Un média en _live stream_ n'a pas de temps de début et de fin finis comme un fichier statique, c'est un flux de données que le serveur transmet au navigateur et qui est souvent adaptatif (explication ci-dessous). Habituellement, il est nécessaire d'utiliser des formats différents et des logiciles spéciaux côté serveur pour y parvenir. -<p>Un média en <em>live stream</em> n'a pas de temps de début et de fin finis comme un fichier statique, c'est un flux de données que le serveur transmet au navigateur et qui est souvent adaptatif (explication ci-dessous). Habituellement, il est nécessaire d'utiliser des formats différents et des logiciles spéciaux côté serveur pour y parvenir.</p> +## Streaming adaptatif -<h2 id="Streaming_adaptatif">Streaming adaptatif</h2> +Une des principale priorité du live streaming est de garder le lecteur du client synchronisé avec le flux envoyé par le serveur: le streaming adaptatif est une technique qui le permet, qui s'adapte en cas de bande passante faible. Le taux de transfert des données est contrôlé, et, s'il semble être en retard, utilise un flux qui demande moins de bande passante (et donc de qualité inférieure). -<p>Une des principale priorité du live streaming est de garder le lecteur du client synchronisé avec le flux envoyé par le serveur: le streaming adaptatif est une technique qui le permet, qui s'adapte en cas de bande passante faible. Le taux de transfert des données est contrôlé, et, s'il semble être en retard, utilise un flux qui demande moins de bande passante (et donc de qualité inférieure).</p> +Pour que ce soit possible, on doit utiliser des formats qui facilitent cette opération. Les formats de live streaming autorisent généralement une diffusion adaptative en divisant le flux en série de petits segments, et en rendant ces segments disponibles à différents qualités et débits binaires. -<p>Pour que ce soit possible, on doit utiliser des formats qui facilitent cette opération. Les formats de live streaming autorisent généralement une diffusion adaptative en divisant le flux en série de petits segments, et en rendant ces segments disponibles à différents qualités et débits binaires.</p> +## Streaming Audio et Vidéo à la demande -<h2 id="Streaming_Audio_et_Vidéo_à_la_demande">Streaming Audio et Vidéo à la demande</h2> +La technologie de streaming n'est pas utilisée exclusivement pour les live streams. Elle peut également être utilisée à la place de la méthode traditionnelle de téléchargement progressif, pour diffuser des fichiers audio et vidéo à la demande. Il y a plusieurs avantages à ça: -<p>La technologie de streaming n'est pas utilisée exclusivement pour les live streams. Elle peut également être utilisée à la place de la méthode traditionnelle de téléchargement progressif, pour diffuser des fichiers audio et vidéo à la demande. Il y a plusieurs avantages à ça:</p> +- La latence est généralement plus faible, les médias peuvent démarrer plus rapidement +- Le streaming adaptatif donne une meilleure expérience utilisateur sur une variété d'appareils, y compris à faible débit +- Le média est téléchargé juste à temps, ce qui utilise la bande passante plus efficacement -<ul> - <li>La latence est généralement plus faible, les médias peuvent démarrer plus rapidement</li> - <li>Le streaming adaptatif donne une meilleure expérience utilisateur sur une variété d'appareils, y compris à faible débit</li> - <li>Le média est téléchargé juste à temps, ce qui utilise la bande passante plus efficacement</li> -</ul> +## Protocoles de Streaming -<h2 id="Protocoles_de_Streaming">Protocoles de Streaming</h2> +Tandis que les médias statiques sont généralement servis avec HTTP, il existe plusieurs protocoles pour servir un stream adaptatif; voyons les différentes options. -<p>Tandis que les médias statiques sont généralement servis avec HTTP, il existe plusieurs protocoles pour servir un stream adaptatif; voyons les différentes options.</p> +### HTTP -<h3 id="HTTP">HTTP</h3> +Pour l'instant, HTTP est de loin le protocole le plus couramment utilisé pour transférer des médias à la demande ou en stream. -<p>Pour l'instant, HTTP est de loin le protocole le plus couramment utilisé pour transférer des médias à la demande ou en stream.</p> +### RTMP -<h3 id="RTMP">RTMP</h3> +Real Time Messaging Protocol (RTMP) est un protocole propriétaire développée par Macromedia (maintenant Adobe) et supporté par le plugin Adobe Flash. RTMP est disponible en plusieurs variantes, notamment RTMPE (Encrypté), RTMPS (Securisé sur SSL/TLS) et RTMPT (encapsulé dans des requêtes HTTP). -<p>Real Time Messaging Protocol (RTMP) est un protocole propriétaire développée par Macromedia (maintenant Adobe) et supporté par le plugin Adobe Flash. RTMP est disponible en plusieurs variantes, notamment RTMPE (Encrypté), RTMPS (Securisé sur SSL/TLS) et RTMPT (encapsulé dans des requêtes HTTP).</p> +### RTSP -<h3 id="RTSP">RTSP</h3> +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](http://www.mozilla.org/en-US/firefox/os/notes/1.3/). -<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> +> **Note :** Certains fournisseurs implémentent des protocoles de transfert propriétaires, tel que RealNetworks et leur Real Data Transport (RDT). -<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> +### RTSP 2.0 -<h3 id="RTSP_2.0">RTSP 2.0</h3> +RTSP 2.0 est actuellement en cours de développement, il n'est pas rétro-compatible avec RTSP 1.0. -<p>RTSP 2.0 est actuellement en cours de développement, il n'est pas rétro-compatible avec RTSP 1.0.</p> +> **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. -<div class="warning"> -<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> +## Utiliser des protocoles de streaming -<h2 id="Utiliser_des_protocoles_de_streaming">Utiliser des protocoles de streaming</h2> +Le procédé pour utiliser différents protocoles vous sera familier si vous avez l'habitude de travailler avec les média sur HTTP — il suffit de spécifier le protocole. -<p>Le procédé pour utiliser différents protocoles vous sera familier si vous avez l'habitude de travailler avec les média sur HTTP — il suffit de spécifier le protocole.</p> +Par exemple: -<p>Par exemple:</p> +```html +<video src="rtsp://myhost.com/mymedia.format"> + <!-- Fallback here --> +</video> +``` -<pre class="brush: html"><video src="rtsp://myhost.com/mymedia.format"> - <!-- Fallback here --> -</video></pre> +## Extensions de Sources Média (MSE) -<h2 id="Extensions_de_Sources_Média_(MSE)">Extensions de Sources Média (MSE)</h2> +[Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) est un brouillon de travail de W3C qui prévoit d'étendre {{ domxref("HTMLMediaElement") }} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le streaming adaptatif et le décalage temporel des live streams. -<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> est un brouillon de travail de W3C qui prévoit d'étendre {{ domxref("HTMLMediaElement") }} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le streaming adaptatif et le décalage temporel des live streams.<br> - <br> - 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> -</div> - -<h2 id="Formats_de_fichiers_Vidéo_en_Streaming">Formats de fichiers Vidéo en Streaming</h2> - -<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> -</div> - -<h3 id="MPEG-DASH">MPEG-DASH</h3> - -<p>DASH est l'acronyme de Dynamic Adaptive Streaming over HTTP, c'est un nouveau format dont le support a récemment été ajouté à Chrome, et Internet Explorer 11 sous Windows 8.1. Il est supporté via les Extensions de Sources Media, qui sont utilisées par les bibliothèques JavaScript comme <a href="https://github.com/Dash-Industry-Forum/dash.js/">DASH.js</a>.</p> - -<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> -</div> - -<h3 id="HLS">HLS</h3> - -<p>HLS (HTTP Live Streaming) est un protocole inventé par Apple Inc et il est pris en charge par iOS, Safari et les dernières versions du navigateur Android / Chrome. HLS est également adaptatif.<br> - <br> - HLS peut également être décodé en utilisant JavaScript, ce qui signifie que l'on peut supporter les dernières versions de Firefox, Chrome et Internet Explorer 10+. Voir ce <a href="https://github.com/dailymotion/hls.js">lecteur JavaScript HTTP Live Streaming</a>.<br> - <br> - Au début de la session de streaming, une <a href="http://en.wikipedia.org/wiki/M3U8#Extended_M3U_directives">playlist M3U étendue (m3u8)</a> est téléchargée. Elle contient les metadonnées des différents sous-fux fournis.</p> - -<h3 id="Suport_de_formats_de_fichiers_en_Streaming">Suport de formats de fichiers en Streaming</h3> - -<table> - <thead> - <tr> - <th>Navigateur</th> - <th>DASH</th> - <th>HLS</th> - <th>Opus (Audio)</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 32</td> - <td>✓ [1]</td> - <td>✓ [2]</td> - <td>✓ 14+</td> - </tr> - <tr> - <td>Safari 6+</td> - <td> </td> - <td>✓</td> - <td> </td> - </tr> - <tr> - <td>Chrome 24+</td> - <td>✓ [1]</td> - <td>✓</td> - <td> </td> - </tr> - <tr> - <td>Opera 20+</td> - <td>✓ [1]</td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>Internet Explorer 10+</td> - <td>✓ 11</td> - <td>✓ [2]</td> - <td> </td> - </tr> - <tr> - <td>Firefox Mobile</td> - <td>✓</td> - <td>✓</td> - <td>✓</td> - </tr> - <tr> - <td>Safari iOS6+</td> - <td> </td> - <td>✓</td> - <td> </td> - </tr> - <tr> - <td>Chrome Mobile</td> - <td>✓</td> - <td>✓ [2]</td> - <td> </td> - </tr> - <tr> - <td>Opera Mobile</td> - <td>✓ [1]</td> - <td>✓</td> - <td> </td> - </tr> - <tr> - <td>Internet Explorer Mobile</td> - <td>✓ 11</td> - <td>✓ [2]</td> - <td> </td> - </tr> - <tr> - <td>Android</td> - <td>✓</td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> - -<p>[1] Via JavaScript et MSE</p> - -<p>[2] Via JavaScript et un Proxy CORS</p> - -<h3 id="Video_de_secours">Video de secours</h3> - -<p>Entre DASH et HLS, on peut couvrir une partie importante des navigateurs modernes mais il faut encore une solution de secours si on veut supporter le reste.<br> - <br> - Une approche populaire est d'utiliser Flash en solution de secours, qui prend en charge RTMP. Bien sûr, le problème est qu'il nous faut alors encoder dans trois formats de données différents.</p> - -<h2 id="Formats_de_fichiers_Audio_en_Streaming">Formats de fichiers Audio en Streaming</h2> - -<p>Il y a également quelques formats audio qui commençent à pris en charge par les navigateurs.</p> - -<h3 id="Opus">Opus</h3> - -<p>Opus est un format libre de droit et open source qui permet d'optimiser la qualité de différents débits binaires pour différents types audio. La musique et la parole peuvent être optimisées de différentes manières et Opus utilise les codecs SILK et CELT pour y parvenir.<br> - <br> - 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> -</div> - -<h3 id="MP3_AAC_Ogg_Vorbis">MP3, AAC, Ogg Vorbis</h3> - -<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> -</div> - -<h2 id="Technologies_de_Streaming_côté_serveur">Technologies de Streaming côté serveur</h2> - -<p>Pour diffuser de l'audio ou vidéo en live stream, vous devez exécuter un logiciel de streaming sur votre serveur ou utiliser un service tiers.</p> - -<h3 id="GStreamer">GStreamer</h3> - -<p><a href="http://gstreamer.freedesktop.org/">GStreamer</a> est un framework multimédia open source et multi-platforme qui permet de créer une variété de composants pour gérer les médias, y compris des composants de streaming. À travers son système de plugin, GStreamer fournit un support pour plus d'une centaine de codecs (dont MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, et FLV.)</p> - -<p>Des plugins GStreamer existent, tels que <a href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-soup.html">souphttpclientsink</a> et <a href="https://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good/html/gst-plugins-good-plugins-shout2send.html">shout2send</a>, pour diffuser en stream des médias sur HTTP. Vous pouvez également intégrer le framework Python Twisted ou utiliser quelque chose comme <a href="http://www.flumotion.net/features/">Flumotion</a> (logiciel de streaming open source).</p> - -<p>Pour le transfert RTMP, vous pouvez utiliser le <a href="https://github.com/arut/nginx-rtmp-module">module Nginx RTMP</a>.</p> - -<h3 id="SHOUTcast">SHOUTcast</h3> - -<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> -</div> - -<h3 id="Icecast">Icecast</h3> - -<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> -</div> - -<h3 id="Services_de_Streaming">Services de Streaming</h3> - -<p>Bien que vous ayez la possibilité d'installer des logiciels tels que GStreamer, SHOUTcast et Icecast, vous pouvez également trouver de nombreux <a href="http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems">services de streaming tiers</a> qui feront le travail pour vous.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +Par exemple, [vous pourriez implémenter MPEG-DASH en utilisant JavaScript tout en laissant le décodage à la charge de MSE](http://msopentech.com/blog/2014/01/03/streaming_video_player/). -<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> - <li><a href="http://www.larryjordan.biz/app_bin/wordpress/archives/2369">The Basics of HTTP Live Streaming</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></li> - <li><a href="http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">Dynamic Adaptive Streaming over HTTP (MPEG-DASH)</a></li> - <li><a href="http://dash-mse-test.appspot.com/media.html">MPEG-DASH Media Source Demo</a></li> - <li><a href="http://dashif.org/reference/players/javascript/1.0.0/index.html">DASH Reference Client</a></li> - <li><a href="http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">Dynamic Streaming over HTTP</a></li> - <li><a href="http://www.streamingmediaglobal.com/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-Deployment-96144.aspx">The State of MPEG-DASH Deployment</a></li> - <li><a href="http://www.bbc.co.uk/rd/blog/2014/03/media-source-extensions">Look, no plugins: Live streaming to the browser using Media Source Extensions and MPEG-DASH</a></li> - <li><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions (W3C)</a></li> - <li><a href="http://en.wikipedia.org/wiki/Icecast">Icecast</a></li> - <li><a href="http://en.wikipedia.org/wiki/Shoutcast">SHOUTcast</a></li> - <li><a href="http://en.wikipedia.org/wiki/GStreamer">GStreamer</a></li> - <li><a href="https://coaxion.net/blog/2013/10/streaming-gstreamer-pipelines-via-http/">Streaming GStreamer Pipelines Via HTTP</a></li> - <li><a href="http://www.svesoftware.com/passkeeper/cms/article/streaming-media-using-gstreamer-web/">Streaming media using gstreamer on the web</a></li> - <li><a href="http://nginx-rtmp.blogspot.it/2013/07/gstreamer-and-raspberry-pi.html">GStreamer and Raspberry Pi</a></li> - <li><a href="http://msopentech.com/blog/2014/01/09/acceptance-media-source-extensions-w3c-candidate-recommendation-will-accelerate-adoption-dash-js/">Acceptance of Media Source Extensions as W3C Candidate Recommendation will accelerate adoption of dash.js</a></li> - <li><a href="http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems">Comparison of Streaming Media Systems</a></li> -</ul> +> **Note :** Le décalage temporel est le processus de lire un live stream quelque temps après qu'il ait été diffusé. -<p><br> - </p> +## Formats de fichiers Vidéo en Streaming -<p> </p> +Quelques formats de vidéo en live streaming HTTP commençent à être pris en charge parmi les navigateurs. -<p> </p> +> **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](/fr/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources). -<p> </p> +### MPEG-DASH -<p> </p> +DASH est l'acronyme de Dynamic Adaptive Streaming over HTTP, c'est un nouveau format dont le support a récemment été ajouté à Chrome, et Internet Explorer 11 sous Windows 8.1. Il est supporté via les Extensions de Sources Media, qui sont utilisées par les bibliothèques JavaScript comme [DASH.js](https://github.com/Dash-Industry-Forum/dash.js/). + +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](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification). + +### HLS + +HLS (HTTP Live Streaming) est un protocole inventé par Apple Inc et il est pris en charge par iOS, Safari et les dernières versions du navigateur Android / Chrome. HLS est également adaptatif. + +HLS peut également être décodé en utilisant JavaScript, ce qui signifie que l'on peut supporter les dernières versions de Firefox, Chrome et Internet Explorer 10+. Voir ce [lecteur JavaScript HTTP Live Streaming](https://github.com/dailymotion/hls.js). + +Au début de la session de streaming, une [playlist M3U étendue (m3u8)](http://en.wikipedia.org/wiki/M3U8#Extended_M3U_directives) est téléchargée. Elle contient les metadonnées des différents sous-fux fournis. + +### Suport de formats de fichiers en Streaming + +| Navigateur | DASH | HLS | Opus (Audio) | +| ------------------------ | ----- | ----- | ------------ | +| Firefox 32 | ✓ [1] | ✓ [2] | ✓ 14+ | +| Safari 6+ | | ✓ | | +| Chrome 24+ | ✓ [1] | ✓ | | +| Opera 20+ | ✓ [1] | | | +| Internet Explorer 10+ | ✓ 11 | ✓ [2] | | +| Firefox Mobile | ✓ | ✓ | ✓ | +| Safari iOS6+ | | ✓ | | +| Chrome Mobile | ✓ | ✓ [2] | | +| Opera Mobile | ✓ [1] | ✓ | | +| Internet Explorer Mobile | ✓ 11 | ✓ [2] | | +| Android | ✓ | | | + +\[1] Via JavaScript et MSE + +\[2] Via JavaScript et un Proxy CORS + +### Video de secours + +Entre DASH et HLS, on peut couvrir une partie importante des navigateurs modernes mais il faut encore une solution de secours si on veut supporter le reste. + +Une approche populaire est d'utiliser Flash en solution de secours, qui prend en charge RTMP. Bien sûr, le problème est qu'il nous faut alors encoder dans trois formats de données différents. + +## Formats de fichiers Audio en Streaming + +Il y a également quelques formats audio qui commençent à pris en charge par les navigateurs. + +### Opus + +Opus est un format libre de droit et open source qui permet d'optimiser la qualité de différents débits binaires pour différents types audio. La musique et la parole peuvent être optimisées de différentes manières et Opus utilise les codecs SILK et CELT pour y parvenir. + +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](http://tools.ietf.org/html/draft-ietf-rtcweb-audio-05) pour les implémentations navigateur de WebRTC. + +### MP3, AAC, Ogg Vorbis + +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. + +## Technologies de Streaming côté serveur + +Pour diffuser de l'audio ou vidéo en live stream, vous devez exécuter un logiciel de streaming sur votre serveur ou utiliser un service tiers. + +### GStreamer + +[GStreamer](http://gstreamer.freedesktop.org/) est un framework multimédia open source et multi-platforme qui permet de créer une variété de composants pour gérer les médias, y compris des composants de streaming. À travers son système de plugin, GStreamer fournit un support pour plus d'une centaine de codecs (dont MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, et FLV.) + +Des plugins GStreamer existent, tels que [souphttpclientsink](http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-soup.html) et [shout2send](https://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good/html/gst-plugins-good-plugins-shout2send.html), pour diffuser en stream des médias sur HTTP. Vous pouvez également intégrer le framework Python Twisted ou utiliser quelque chose comme [Flumotion](http://www.flumotion.net/features/) (logiciel de streaming open source). + +Pour le transfert RTMP, vous pouvez utiliser le [module Nginx RTMP](https://github.com/arut/nginx-rtmp-module). + +### SHOUTcast + +[SHOUTcast](http://en.wikipedia.org/wiki/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](http://stackoverflow.com/questions/2743279/how-could-i-play-a-shoutcast-icecast-stream-using-html5). + +### Icecast + +Le serveur [Icecast](http://www.icecast.org/) est une technologie open source pour diffuser des média en streaming. Maintenu par [Xiph.org Foundation](http://www.xiph.org/), 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](http://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers). + +### Services de Streaming + +Bien que vous ayez la possibilité d'installer des logiciels tels que GStreamer, SHOUTcast et Icecast, vous pouvez également trouver de nombreux [services de streaming tiers](http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems) qui feront le travail pour vous. + +## Voir aussi + +- [HTTP Live Streaming](http://en.wikipedia.org/wiki/HTTP_Live_Streaming) +- [HLS Browser Support](http://www.jwplayer.com/html5/hls/) +- [HTTP Live Streaming JavaScript player](https://github.com/RReverser/mpegts) +- [The Basics of HTTP Live Streaming](http://www.larryjordan.biz/app_bin/wordpress/archives/2369) +- [DASH Adaptive Streaming for HTML 5 Video](https://developer.mozilla.org/en-US/docs/DASH_Adaptive_Streaming_for_HTML_5_Video) +- [Dynamic Adaptive Streaming over HTTP (MPEG-DASH)](http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP) +- [MPEG-DASH Media Source Demo](http://dash-mse-test.appspot.com/media.html) +- [DASH Reference Client](http://dashif.org/reference/players/javascript/1.0.0/index.html) +- [Dynamic Streaming over HTTP](http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP) +- [The State of MPEG-DASH Deployment](http://www.streamingmediaglobal.com/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-Deployment-96144.aspx) +- [Look, no plugins: Live streaming to the browser using Media Source Extensions and MPEG-DASH](http://www.bbc.co.uk/rd/blog/2014/03/media-source-extensions) +- [Media Source Extensions (W3C)](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) +- [Icecast](http://en.wikipedia.org/wiki/Icecast) +- [SHOUTcast](http://en.wikipedia.org/wiki/Shoutcast) +- [GStreamer](http://en.wikipedia.org/wiki/GStreamer) +- [Streaming GStreamer Pipelines Via HTTP](https://coaxion.net/blog/2013/10/streaming-gstreamer-pipelines-via-http/) +- [Streaming media using gstreamer on the web](http://www.svesoftware.com/passkeeper/cms/article/streaming-media-using-gstreamer-web/) +- [GStreamer and Raspberry Pi](http://nginx-rtmp.blogspot.it/2013/07/gstreamer-and-raspberry-pi.html) +- [Acceptance of Media Source Extensions as W3C Candidate Recommendation will accelerate adoption of dash.js](http://msopentech.com/blog/2014/01/09/acceptance-media-source-extensions-w3c-candidate-recommendation-will-accelerate-adoption-dash-js/) +- [Comparison of Streaming Media Systems](http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems) diff --git a/files/fr/web/guide/audio_and_video_manipulation/index.md b/files/fr/web/guide/audio_and_video_manipulation/index.md index 1b79154eb7..ec64e401e5 100644 --- a/files/fr/web/guide/audio_and_video_manipulation/index.md +++ b/files/fr/web/guide/audio_and_video_manipulation/index.md @@ -10,37 +10,38 @@ tags: - WebGL translation_of: Web/Guide/Audio_and_video_manipulation --- -<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> +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](/fr/docs/Web/API/WebGL_API) ou [Web Audio API](/fr/docs/Web/API/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. -<h2 id="Manipulation_Vidéo">Manipulation Vidéo</h2> +## Manipulation Vidéo -<p>La possibilité de lire les valeurs de pixels de chaque image d'une vidéo peut être très utile, cela nous permet de placer ces images dans d'autres contextes.</p> +La possibilité de lire les valeurs de pixels de chaque image d'une vidéo peut être très utile, cela nous permet de placer ces images dans d'autres contextes. -<h3 id="Vidéo_et_Canvas">Vidéo et Canvas</h3> +### Vidéo et Canvas -<p>{{htmlelement("canvas")}} est un moyen de dessiner de manière scripté sur des pages web; c'est un outil très puissant et qui peut être couplé avec du contenu vidéo.</p> +{{htmlelement("canvas")}} est un moyen de dessiner de manière scripté sur des pages web; c'est un outil très puissant et qui peut être couplé avec du contenu vidéo. -<p>La technique générale est comme suit:</p> +La technique générale est comme suit: -<ol> - <li>Dessiner une image de l'élément {{htmlelement("video")}} sur un élément {{htmlelement("canvas")}} intermédiaire.</li> - <li>Lire les données de l'élément <code><canvas></code> et les manipuler.</li> - <li>Écrire les données manipulées dans le <code><canvas></code> que l'on veut afficher.</li> - <li>Marquer une pause et répéter.</li> -</ol> +1. Dessiner une image de l'élément {{htmlelement("video")}} sur un élément {{htmlelement("canvas")}} intermédiaire. +2. Lire les données de l'élément `<canvas>` et les manipuler. +3. Écrire les données manipulées dans le `<canvas>` que l'on veut afficher. +4. Marquer une pause et répéter. -<p>On peut configurer notre lecteur vidéo et l'élément <code><canvas></code> comme ceci:</p> +On peut configurer notre lecteur vidéo et l'élément `<canvas>` comme ceci: -<pre class="brush: html"><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> +```html +<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> -<canvas id="my-canvas" width="480" height="270"></canvas></pre> +<canvas id="my-canvas" width="480" height="270"></canvas> +``` -<p>Et les manipuler comme ceci: (en l'occurence, on affiche une version en noir et blanc de la vidéo)</p> +Et les manipuler comme ceci: (en l'occurence, on affiche une version en noir et blanc de la vidéo) -<pre class="brush: js">var processor = { +```js +var processor = { timerCallback: function() { if (this.video.paused || this.video.ended) { return; @@ -70,7 +71,7 @@ translation_of: Web/Guide/Audio_and_video_manipulation var frame = this.ctx1.getImageData(0, 0, this.width, this.height); var l = frame.data.length / 4; - for (var i = 0; i < l; i++) { + for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; @@ -81,63 +82,66 @@ translation_of: Web/Guide/Audio_and_video_manipulation return; } -}; </pre> +}; +``` -<p>Une fois que la page est chargée, on peut appeler</p> +Une fois que la page est chargée, on peut appeler -<pre class="brush: js">processor.doLoad()</pre> +```js +processor.doLoad() +``` -<p>{{EmbedLiveSample("Vidéo_et_Canvas", '100%', 550)}}</p> +{{EmbedLiveSample("Vidéo_et_Canvas", '100%', 550)}} -<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> -</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> -</div> +> **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)](/fr/docs/Web/HTTP/CORS) sur le serveur qui héberge la vidéo et utiliser l'attribut `crossorigin` sur la balise vidéo. -<h3 id="Vidéo_e_WebGL">Vidéo e WebGL</h3> +> **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. -<p><a href="/en-US/docs/Web/WebGL">WebGL</a> est une API puissante qui utilise canvas pour (typiquement) afficher des scènes en trois dimensions. On peut combiner WebGL et l'élément {{htmlelement("video")}} pour créer des textures vidéo, ce qui veut dire que vous pouvez placer une vidéo dans des scènes 3D.</p> +### Vidéo e WebGL -<p>Exemple:</p> +[WebGL](/en-US/docs/Web/WebGL) est une API puissante qui utilise canvas pour (typiquement) afficher des scènes en trois dimensions. On peut combiner WebGL et l'élément {{htmlelement("video")}} pour créer des textures vidéo, ce qui veut dire que vous pouvez placer une vidéo dans des scènes 3D. -<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p> +Exemple: -<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> -</div> +{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }} -<h3 id="Vitesse_de_lecture">Vitesse de lecture</h3> +> **Note :** Vous pouvez trouver le [code source de cette démo sur GitHub](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) ([la voir en direct](https://mdn.github.io/webgl-examples/tutorial/sample8/) aussi). -<p>On peut ajuster la vitesse de lecture de l'audio et vidéo en utilisant l'attribut <code>playbackRate</code> (voir {{domxref("HTMLMediaElement")}}). Il prend pour valeur un nombre qui est le coefficient à appliquer à la vitesse de lecture: par exemple, 0.5 représente la moitié de la vitesse tandis que 2 représente le double.<br> - <br> - HTML:</p> +### Vitesse de lecture -<pre class="brush: html"><video id="my-video" controls src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video></pre> +On peut ajuster la vitesse de lecture de l'audio et vidéo en utilisant l'attribut `playbackRate` (voir {{domxref("HTMLMediaElement")}}). Il prend pour valeur un nombre qui est le coefficient à appliquer à la vitesse de lecture: par exemple, 0.5 représente la moitié de la vitesse tandis que 2 représente le double. -<p>JavaScript:</p> +HTML: -<pre class="brush: js">var myVideo = document.getElementById('my-video'); -myVideo.playbackRate = 2;</pre> +```html +<video id="my-video" controls src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"></video> +``` -<h4>Code jouable</h4> +JavaScript: -<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> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```js +var myVideo = document.getElementById('my-video'); +myVideo.playbackRate = 2; +``` + +#### Code jouable + +```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> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> var myVideo = document.getElementById('my-video'); -myVideo.playbackRate = 2;</textarea> -</pre> +myVideo.playbackRate = 2;</textarea> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; @@ -157,44 +161,41 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', setPlaybackRate); window.addEventListener('load', setPlaybackRate); -</pre> +``` -<p>{{ EmbedLiveSample('Code jouable', 700, 425) }}</p> +{{ EmbedLiveSample('Code jouable', 700, 425) }} -<div class="note"> -<p><strong>Note :</strong> Essayez l' <a href="http://jsbin.com/qomuvefu/2/edit">exemple playbackRate</a> en direct.</p> -</div> +> **Note :** Essayez l' [exemple playbackRate](http://jsbin.com/qomuvefu/2/edit) en direct. -<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> -</div> +> **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")}}. -<h2 id="Manipulation_Audio">Manipulation Audio</h2> +## Manipulation Audio -<p>Laissons <code>playbackRate</code> de côté. Pour manipuler l'audio, on utilise typiquement l'<a href="/en-US/docs/Web/API/Web_Audio_API">API Web Audio</a>.</p> +Laissons `playbackRate` de côté. Pour manipuler l'audio, on utilise typiquement l'[API Web Audio](/en-US/docs/Web/API/Web_Audio_API). -<h3 id="Sélectionner_une_source_audio">Sélectionner une source audio</h3> +### Sélectionner une source audio -<p>On peut utiliser la piste audio d'un élément {{htmlelement("audio")}} ou {{htmlelement("video")}} comme source pour alimenter l'API Web Audio, ou un simple buffer audio, une onde sinusoïdale/oscillateur, un flux (comme <a href="/fr/docs/NavigatorUserMedia.getUserMedia">getUserMedia</a> de <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a>)... Découvrez exactement comment les utiliser en lisant les pages suivantes:</p> +On peut utiliser la piste audio d'un élément {{htmlelement("audio")}} ou {{htmlelement("video")}} comme source pour alimenter l'API Web Audio, ou un simple buffer audio, une onde sinusoïdale/oscillateur, un flux (comme [getUserMedia](/fr/docs/NavigatorUserMedia.getUserMedia) de [WebRTC](/fr/docs/Web/API/WebRTC_API))... Découvrez exactement comment les utiliser en lisant les pages suivantes: -<ul> - <li>{{domxref("MediaElementAudioSourceNode")}}</li> - <li>{{domxref("AudioBufferSourceNode")}}</li> - <li>{{domxref("OscillatorNode")}}</li> - <li>{{domxref("MediaStreamAudioSourceNode")}}</li> -</ul> +- {{domxref("MediaElementAudioSourceNode")}} +- {{domxref("AudioBufferSourceNode")}} +- {{domxref("OscillatorNode")}} +- {{domxref("MediaStreamAudioSourceNode")}} -<h3 id="Filtres_Audio">Filtres Audio</h3> +### Filtres Audio -<p>L'API Web Audio a beaucoup de différents filtres/effets qui peuvent être appliqués à l'audio en utilisant {{domxref("BiquadFilterNode")}}, par exemple:</p> +L'API Web Audio a beaucoup de différents filtres/effets qui peuvent être appliqués à l'audio en utilisant {{domxref("BiquadFilterNode")}}, par exemple: -<p>HTML:</p> +HTML: -<pre class="brush: html"><video id="my-video" controls src="myvideo.mp4" type="video/mp4"></video></pre> +```html +<video id="my-video" controls src="myvideo.mp4" type="video/mp4"></video> +``` -<p>JavaScript:</p> +JavaScript: -<pre class="brush: js">var context = new AudioContext(), +```js +var context = new AudioContext(), audioSource = context.createMediaElementSource(document.getElementById("my-video")), filter = context.createBiquadFilter(); audioSource.connect(filter); @@ -203,24 +204,28 @@ filter.connect(context.destination); // Configure filter filter.type = "lowshelf"; filter.frequency.value = 1000; -filter.gain.value = 25;</pre> - -<h4>Code jouable 2</h4> - -<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> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +filter.gain.value = 25; +``` + +#### Code jouable 2 + +```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> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; -filter.gain.value = 25;</textarea></pre> +filter.gain.value = 25;</textarea> +``` -<pre class="brush: js hidden">var context = new AudioContext(), +```js hidden +var context = new AudioContext(), audioSource = context.createMediaElementSource(document.getElementById("my-video")), filter = context.createBiquadFilter(); audioSource.connect(filter); @@ -246,59 +251,51 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', setFilter); window.addEventListener('load', setFilter); -</pre> +``` +{{ EmbedLiveSample('Code_jouable_2', 700, 425) }} -<p>{{ EmbedLiveSample('Code_jouable_2', 700, 425) }}</p> +> **Note :** À moins que [CORS](/en-US/docs/Web/HTTP/Access_control_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. -<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> -</div> +Les filtres pouvant être appliqués sont: -<p>Les filtres pouvant être appliqués sont:</p> - -<ul> - <li>Low Pass: Les fréquences en dessous de la fréquence de coupure sont inchangées et celles au-dessus sont atténuées.</li> - <li>High Pass: Les fréquences au-dessus de la fréquence de coupure sont inchangées et celles en dessous sont atténuées.</li> - <li>Band Pass: Les fréquence comprises entre deux bornes sont inchangées et celles en dehors sont atténuées.</li> - <li>Low Shelf: Les fréquences basses obtiennent un boost (ou une atténuation).</li> - <li>High Shelf: Les fréquences hautes obtiennent un boost (ou une atténuation).</li> - <li>Peaking: Les fréquences à l'intérieur d'une gamme donnée obtiennent un boost (ou une atténuation).</li> - <li>Notch: Les fréquences à l'intérieur d'une gamme donnée sont atténuées.</li> - <li>Allpass: Laisse touts les fréquences inchangées mais modifie le rapport de phrase entre les différentes fréquences.</li> -</ul> - -<div class="note"> -<p><strong>Note :</strong> Voir {{domxref("BiquadFilterNode")}} pour plus d'informations.</p> -</div> +- Low Pass: Les fréquences en dessous de la fréquence de coupure sont inchangées et celles au-dessus sont atténuées. +- High Pass: Les fréquences au-dessus de la fréquence de coupure sont inchangées et celles en dessous sont atténuées. +- Band Pass: Les fréquence comprises entre deux bornes sont inchangées et celles en dehors sont atténuées. +- Low Shelf: Les fréquences basses obtiennent un boost (ou une atténuation). +- High Shelf: Les fréquences hautes obtiennent un boost (ou une atténuation). +- Peaking: Les fréquences à l'intérieur d'une gamme donnée obtiennent un boost (ou une atténuation). +- Notch: Les fréquences à l'intérieur d'une gamme donnée sont atténuées. +- Allpass: Laisse touts les fréquences inchangées mais modifie le rapport de phrase entre les différentes fréquences. -<h3 id="Convolutions_et_Impulsions">Convolutions et Impulsions</h3> +> **Note :** Voir {{domxref("BiquadFilterNode")}} pour plus d'informations. -<p>Il est également possible d'appliquer des réponses impulsionnelles à l'audio en utilisant {{domxref("ConvolverNode")}}. Une <em>réponse impulsionnelle</em> (<em>impulse response</em> en anglais) est un son crée après une brève impulsion sonore (comme un applaudissement) et qui s'applique sur l'environnement qui l'a créée. Exemple: un écho crée en frappant des mains dans un tunnel.</p> +### Convolutions et Impulsions -<p>Exemple:</p> +Il est également possible d'appliquer des réponses impulsionnelles à l'audio en utilisant {{domxref("ConvolverNode")}}. Une _réponse impulsionnelle_ (_impulse response_ en anglais) est un son crée après une brève impulsion sonore (comme un applaudissement) et qui s'applique sur l'environnement qui l'a créée. Exemple: un écho crée en frappant des mains dans un tunnel. -<pre class="brush: js">var convolver = context.createConvolver(); +Exemple: + +```js +var convolver = context.createConvolver(); convolver.buffer = this.impulseResponseBuffer; // Connect the graph. source.connect(convolver); -convolver.connect(context.destination);</pre> +convolver.connect(context.destination); +``` -<div class="note"> -<p><strong>Note :</strong> Voir ce <a href="https://codepen.io/DonKarlssonSan/pen/doVKRE">Codepen</a> pour un exemple appliqué.</p> -</div> +> **Note :** Voir ce [Codepen](https://codepen.io/DonKarlssonSan/pen/doVKRE) pour un exemple appliqué. -<div class="note"> -<p><strong>Note :</strong> Voir {{domxref("ConvolverNode")}} pour plus d'informations.</p> -</div> +> **Note :** Voir {{domxref("ConvolverNode")}} pour plus d'informations. -<h3 id="Audio_dans_l'espace">Audio dans l'espace</h3> +### Audio dans l'espace -<p>On peut également positionner l'audio dans l'espace en utilisant un noeud panoramique (un <em>panner</em>). Ce noeud permet de définir un cône source ainsi que des éléments positionnels et directionnels — le tout dans un espace 3D définit par des coordonnées cartésiennes 3D. <br> - <br> - Exemple:</p> +On peut également positionner l'audio dans l'espace en utilisant un noeud panoramique (un _panner_). Ce noeud permet de définir un cône source ainsi que des éléments positionnels et directionnels — le tout dans un espace 3D définit par des coordonnées cartésiennes 3D. -<pre class="brush: js">var panner = context.createPanner(); +Exemple: + +```js +var panner = context.createPanner(); panner.coneOuterGain = 0.2; panner.coneOuterAngle = 120; panner.coneInnerAngle = 0; @@ -308,54 +305,43 @@ source.connect(panner); source.start(0); // Position the listener at the origin. -context.listener.setPosition(0, 0, 0);</pre> +context.listener.setPosition(0, 0, 0); +``` -<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> -</div> +> **Note :** Vous pouvez trouver un [exemple sur notre repo GitHub](https://github.com/mdn/webaudio-examples/tree/master/panner-node) (le [voir en direct](https://mdn.github.io/webaudio-examples/panner-node/) aussi). -<div class="note"> -<p><strong>Note :</strong> Voir {{domxref("PannerNode")}} pour plus d'informations.</p> -</div> +> **Note :** Voir {{domxref("PannerNode")}} pour plus d'informations. -<h2 id="Codecs_JavaScript">Codecs JavaScript</h2> +## Codecs JavaScript -<p>Il est possible de manipuler l'audio au bas niveau en utilisant JavaScript. Cela peut être utile si vous voulez créer des codecs audio.<br> - <br> - Des bibliothèques existent actuellement pour les formats suivants:</p> +Il est possible de manipuler l'audio au bas niveau en utilisant JavaScript. Cela peut être utile si vous voulez créer des codecs audio. -<ul> - <li>AAC: <a href="https://github.com/audiocogs/aac.js">AAC.js</a></li> - <li>ALAC: <a href="https://github.com/audiocogs/alac.js">alac.js</a></li> - <li>FLAC: <a href="https://github.com/audiocogs/flac.js">flac.js</a></li> - <li>MP3: <a href="https://github.com/audiocogs/mp3.js">mp3.js</a></li> - <li>Opus: <a href="https://github.com/audiocogs/opus.js">Opus.js</a></li> - <li>Vorbis: <a href="https://github.com/audiocogs/vorbis.js">vorbis.js</a></li> -</ul> +Des bibliothèques existent actuellement pour les formats suivants: -<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> -</div> +- AAC: [AAC.js](https://github.com/audiocogs/aac.js) +- ALAC: [alac.js](https://github.com/audiocogs/alac.js) +- FLAC: [flac.js](https://github.com/audiocogs/flac.js) +- MP3: [mp3.js](https://github.com/audiocogs/mp3.js) +- Opus: [Opus.js](https://github.com/audiocogs/opus.js) +- Vorbis: [vorbis.js](https://github.com/audiocogs/vorbis.js) + +> **Note :** Sur AudioCogs, vous pouvez [essayer quelques démos](http://audiocogs.org/codecs/); Audiocogs fournit également un Framework, [Aurora.js](http://audiocogs.org/codecs/), qui est destiné à vous aider à créer vos propres codecs en JavaScript. + +## Tutoriels + +- [Manipulation vidéo avec la balise Canvas](/fr/docs/HTML/Manipulating_video_using_canvas) +- [HTML5 playbackRate expliqué](/fr/Apps/Build/Manipulating_media/HTML5_playbackRate_explained) +- [Utiliser l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) +- [Les bases de la spatialisation audio Web](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) +- [Utilisation des images vidéo comme texture WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL#Utilisation_des_images_vid%C3%A9o_comme_texture) (Vous pouvez également utiliser la bilbiothèque WebGL [THREE.js](http://threejs.org) (ou autres) pour [obtenir cet effet](http://stemkoski.github.io/Three.js/Video.html)) +- [Animation de Textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL) +- [Developing Game Audio with the Web Audio API (Room effects and filters)](http://www.html5rocks.com/en/tutorials/webaudio/games/#toc-room) + +## Référence -<h2 id="Tutoriels">Tutoriels</h2> - -<ul> - <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo avec la balise Canvas</a></li> - <li><a href="/fr/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate expliqué</a></li> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Les bases de la spatialisation audio Web</a></li> - <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL#Utilisation_des_images_vid%C3%A9o_comme_texture">Utilisation des images vidéo comme texture WebGL</a> (Vous pouvez également utiliser la bilbiothèque WebGL <a href="http://threejs.org">THREE.js</a> (ou autres) pour <a href="http://stemkoski.github.io/Three.js/Video.html">obtenir cet effet</a>)</li> - <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL">Animation de Textures en WebGL</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/#toc-room">Developing Game Audio with the Web Audio API (Room effects and filters)</a></li> -</ul> - -<h2 id="Référence">Référence</h2> - -<ul> - <li>Les éléments {{htmlelement("audio")}} et {{htmlelement("video")}}</li> - <li>L'API {{domxref("HTMLMediaElement")}}</li> - <li>L'élément {{htmlelement("canvas")}}</li> - <li><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li> - <li><a href="/fr/docs/Web/API/AudioContext">AudioContext</a></li> - <li>Plus d'infos sur <a href="/fr/docs/Web/API/AudioContext.createPanner">PannerNode</a></li> -</ul> +- Les éléments {{htmlelement("audio")}} et {{htmlelement("video")}} +- L'API {{domxref("HTMLMediaElement")}} +- L'élément {{htmlelement("canvas")}} +- [Web Audio API](/fr/docs/Web/API/Web_Audio_API) +- [AudioContext](/fr/docs/Web/API/AudioContext) +- Plus d'infos sur [PannerNode](/fr/docs/Web/API/AudioContext.createPanner) diff --git a/files/fr/web/guide/css/block_formatting_context/index.md b/files/fr/web/guide/css/block_formatting_context/index.md index bb9ee501f2..79b6f9e283 100644 --- a/files/fr/web/guide/css/block_formatting_context/index.md +++ b/files/fr/web/guide/css/block_formatting_context/index.md @@ -8,38 +8,32 @@ tags: translation_of: Web/Guide/CSS/Block_formatting_context original_slug: Web/CSS/Block_formatting_context --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>Un <strong>contexte de formatage de blocs</strong> (<em>block formatting context</em>) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.</p> +Un **contexte de formatage de blocs** (_block formatting context_) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres. -<p>Un contexte de formatage de blocs est créé dans les situations suivantes :</p> +Un contexte de formatage de blocs est créé dans les situations suivantes : -<ul> - <li>L'élément racine ou quelque chose qui le contient</li> - <li>Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que <code>none</code>)</li> - <li>Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à <code>absolute</code> ou <code>fixed</code>)</li> - <li>Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à <code>inline-block</code>)</li> - <li>Les cellules de tableau (éléments avec {{cssxref("display")}}<code>: table-cell</code>, ce qui est le défaut pour les cellules de tableau)</li> - <li>Les titres de tableau (éléments avec {{cssxref("display")}}<code>: table-caption</code>, ce qui est le défaut pour {{HTMLElement("caption")}})</li> - <li>Les éléments où {{cssxref("overflow")}} a une valeur autre que <code>visible</code></li> - <li>Les boîtes flexibles (éléments avec {{cssxref("display")}}<code>: flex</code> ou <code>inline-flex</code>)</li> - <li>{{cssxref("display")}}<code>: flow-root</code></li> -</ul> +- L'élément racine ou quelque chose qui le contient +- Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que `none`) +- Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à `absolute` ou `fixed`) +- Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à `inline-block`) +- Les cellules de tableau (éléments avec {{cssxref("display")}}`: table-cell`, ce qui est le défaut pour les cellules de tableau) +- Les titres de tableau (éléments avec {{cssxref("display")}}`: table-caption`, ce qui est le défaut pour {{HTMLElement("caption")}}) +- Les éléments où {{cssxref("overflow")}} a une valeur autre que `visible` +- Les boîtes flexibles (éléments avec {{cssxref("display")}}`: flex` ou `inline-flex`) +- {{cssxref("display")}}`: flow-root` -<p>Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.</p> +Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs. -<p>Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.</p> +Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<ul> - <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li> -</ul> +- [CSS 2.1](http://www.w3.org/TR/CSS21/visuren.html#q15) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref("float")}}</li> - <li>{{cssxref("clear")}}</li> - <li>{{cssxref("display")}}</li> -</ul> +- {{cssxref("float")}} +- {{cssxref("clear")}} +- {{cssxref("display")}} diff --git a/files/fr/web/guide/graphics/index.md b/files/fr/web/guide/graphics/index.md index 2f2c7abad4..d458fb84e4 100644 --- a/files/fr/web/guide/graphics/index.md +++ b/files/fr/web/guide/graphics/index.md @@ -13,34 +13,27 @@ tags: - WebRTC translation_of: Web/Guide/Graphics --- -<p>Les applications et sites Web modernes ont souvent besoin de présenter des graphismes de qualité. Tandis qu'afficher de simples images statiques peut être aisément réalisé à l'aide de la balise <a href="/fr/docs/Web/HTML/Element/img"><code><img></code></a>, ou en réglant l'arrière-plan des éléments HTML avec la propriété CSS : <a href="/fr/docs/Web/CSS/background-image">background-image</a>.</p> +Les applications et sites Web modernes ont souvent besoin de présenter des graphismes de qualité. Tandis qu'afficher de simples images statiques peut être aisément réalisé à l'aide de la balise [`<img>`](/fr/docs/Web/HTML/Element/img), ou en réglant l'arrière-plan des éléments HTML avec la propriété CSS : [background-image](/fr/docs/Web/CSS/background-image). -<p>Mais lorsque l'on veut réaliser des graphismes à la volée, ou manipuler des images après coup, ou encore utiliser de la 3D, les méthodes habituelles ne suffisent plus, cependant avec HTML5, il est possible de réaliser ce type de graphismes plus évolués.</p> +Mais lorsque l'on veut réaliser des graphismes à la volée, ou manipuler des images après coup, ou encore utiliser de la 3D, les méthodes habituelles ne suffisent plus, cependant avec HTML5, il est possible de réaliser ce type de graphismes plus évolués. -<p>Les articles ci-dessous vous permettront de vous familiariser avec ces technologies.</p> +Les articles ci-dessous vous permettront de vous familiariser avec ces technologies. -<h2>Graphismes 2D</h2> +## Graphismes 2D -<dl> - <dt><a href="/fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas">Dessiner avec les canvas</a></dt> - <dd>Un guide d'introduction pour utiliser l'élément pour dessiner en 2D.</dd> - <dt><a href="/fr/docs/SVG">SVG</a></dt> - <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> +- [Dessiner avec les canvas](/fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas) + - : Un guide d'introduction pour utiliser l'élément pour dessiner en 2D. +- [SVG](/fr/docs/SVG) + - : 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. -<h2>Graphismes 3D</h2> +## Graphismes 3D -<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> +- [WebGL](/fr/docs/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. -<h2 id="Video">Video</h2> +## Video -<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> +- [Utiliser les éléments HTML5 audio et video](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video) + - : Intégrer de la vidéo et / ou de l'audio dans une page Web +- [WebRTC](/fr/docs/Web/API/WebRTC_API) + - : 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.md b/files/fr/web/guide/html/content_categories/index.md index 34db97e760..10fed97d97 100644 --- a/files/fr/web/guide/html/content_categories/index.md +++ b/files/fr/web/guide/html/content_categories/index.md @@ -9,168 +9,144 @@ tags: translation_of: Web/Guide/HTML/Content_categories original_slug: Web/Guide/HTML/Catégories_de_contenu --- -<p>Chaque élément <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> est membre d'un certain nombre de catégories de contenu qui regroupent des éléments partageant un ensemble de caractéristiques. Ceci est un regroupement lâche, en ce sens qu'il ne crée pas réellement de relation entre les éléments de ces types, mais il aide à définir et à décrire leur comportement et les règles associées qu'ils doivent respecter, en particulier lorsque l'on entre dans leurs détails complexes. Il est également possible que les éléments ne soient membres d'aucune de ces catégories.</p> +Chaque élément [HTML](https://developer.mozilla.org/fr/docs/Web/HTML) est membre d'un certain nombre de catégories de contenu qui regroupent des éléments partageant un ensemble de caractéristiques. Ceci est un regroupement lâche, en ce sens qu'il ne crée pas réellement de relation entre les éléments de ces types, mais il aide à définir et à décrire leur comportement et les règles associées qu'ils doivent respecter, en particulier lorsque l'on entre dans leurs détails complexes. Il est également possible que les éléments ne soient membres d'aucune de ces catégories. -<p>Il y a trois types différents de catégories de contenu :</p> +Il y a trois types différents de catégories de contenu : -<ul> - <li>Les catégories de contenu principales qui décrivent un ensemble de règles de contenu partagées par une grande variété d'éléments ;</li> - <li>Les catégories de contenu relatives aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ;</li> - <li>Les catégories de contenu spécifiques qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier</li> -</ul> +- Les catégories de contenu principales qui décrivent un ensemble de règles de contenu partagées par une grande variété d'éléments ; +- Les catégories de contenu relatives aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ; +- Les catégories de contenu spécifiques qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier -<div class="note"> -<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> +> **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](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content) (en). -<div><img src="content_categories_venn.png"></div> + -<h2 id="Principales_catégories_de_contenu">Principales catégories de contenu</h2> +## Principales catégories de contenu -<h3 id="Contenu_de_méta-données">Contenu de méta-données</h3> +### Contenu de méta-données -<p>Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d'autres documents ou comportent des informations sur la structure même des données.</p> +Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d'autres documents ou comportent des informations sur la structure même des données. -<p>Les éléments appartenant à cette catégories sont : {{HTMLElement("base")}}, {{HTMLElement("command")}}{{ Obsolete_inline()}} , {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.</p> +Les éléments appartenant à cette catégories sont : {{HTMLElement("base")}}, {{HTMLElement("command")}}{{ Obsolete_inline()}} , {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}. -<h3 id="Contenu_de_flux">Contenu de flux</h3> +### Contenu de flux -<p>Les éléments appartenant à la catégorie de contenu de flux contiennent généralement du texte ou du contenu intégré. Ces éléments sont : {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et le texte.</p> +Les éléments appartenant à la catégorie de contenu de flux contiennent généralement du texte ou du contenu intégré. Ces éléments sont : {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et le texte. -<p>Quelques autres éléments appartiennent à cette catégorie mais seulement sous certaines conditions :</p> +Quelques autres éléments appartiennent à cette catégorie mais seulement sous certaines conditions : -<ul> - <li>{{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}</li> - <li>{{HTMLElement("link")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li> - <li>{{HTMLElement("meta")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li> - <li>{{HTMLElement("style")}} si l'attribut {{htmlattrxref("scoped","style")}} {{deprecated_inline()}} est présent</li> -</ul> +- {{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}} +- {{HTMLElement("link")}} si l'attribut [**itemprop**](/fr/docs/HTML/Global_attributes#itemprop "/fr/docs/HTML/Global_attributes#itemprop") est présent +- {{HTMLElement("meta")}} si l'attribut [**itemprop**](/fr/docs/HTML/Global_attributes#itemprop "/fr/docs/HTML/Global_attributes#itemprop") est présent +- {{HTMLElement("style")}} si l'attribut {{htmlattrxref("scoped","style")}} {{deprecated_inline()}} est présent -<h3 id="Contenu_sectionnant">Contenu sectionnant</h3> +### Contenu sectionnant -<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> +Les éléments appartenant à cette catégorie sont ceux créant une nouvelle [section dans le plan du document](/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document "/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document") qui définit la portée des éléments {{HTMLElement("header")}}, des éléments {{HTMLElement("footer")}} et du [contenu de titre](<#Contenu de titre> "#Contenu de titre"). -<p>Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}. </p> +Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}. -<div class="note"> -<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> +> **Note :** Il ne faut pas confondre ce modèle de contenu avec la catégorie de [racine de sectionnement](/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement "/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement") qui isole un contenu par rapport à la structure (ou plan) principale. -<h3 id="Contenu_de_titre">Contenu de titre</h3> +### Contenu de titre -<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> +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. -<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> +Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} et {{HTMLElement("hgroup")}}. -<div class="note"> -<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> +> **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. -<div class="note"> -<p><strong>Note :</strong> {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.</p> -</div> +> **Note :** {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C. -<h3 id="Contenu_phrasé">Contenu phrasé</h3> +### Contenu phrasé -<p>Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes.</p> +Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes. -<p>Les éléments appartenant à cette catégorie sont {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs).</p> +Les éléments appartenant à cette catégorie sont {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs). -<p>Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions :</p> +Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions : -<ul> - <li>{{HTMLElement("a")}} s'il contient seulement du contenu phrasé</li> - <li>{{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}</li> - <li>{{HTMLElement("del")}} s'il contient seulement du contenu phrasé</li> - <li>{{HTMLElement("ins")}} s'il contient seulement du contenu phrasé</li> - <li>{{HTMLElement("link")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li> - <li>{{HTMLElement("map")}} s'il contient seulement du contenu phrasé</li> - <li>{{HTMLElement("meta")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li> -</ul> +- {{HTMLElement("a")}} s'il contient seulement du contenu phrasé +- {{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}} +- {{HTMLElement("del")}} s'il contient seulement du contenu phrasé +- {{HTMLElement("ins")}} s'il contient seulement du contenu phrasé +- {{HTMLElement("link")}} si l'attribut [**itemprop**](/fr/docs/HTML/Global_attributes#itemprop "/fr/docs/HTML/Global_attributes#itemprop") est présent +- {{HTMLElement("map")}} s'il contient seulement du contenu phrasé +- {{HTMLElement("meta")}} si l'attribut [**itemprop**](/fr/docs/HTML/Global_attributes#itemprop "/fr/docs/HTML/Global_attributes#itemprop") est présent -<h3 id="Contenu_intégré">Contenu intégré</h3> +### Contenu intégré -<p>Le contenu intégré importe une autre ressource ou intègre du contenu provenant d'un autre langage de balisage ou d'un autre espace de noms dans le document. Les éléments appartenant à cette catégorie sont : {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.</p> +Le contenu intégré importe une autre ressource ou intègre du contenu provenant d'un autre langage de balisage ou d'un autre espace de noms dans le document. Les éléments appartenant à cette catégorie sont : {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}. -<h3 id="Contenu_interactif">Contenu interactif</h3> +### Contenu interactif -<p>Le contenu interactif regroupe des éléments spécialement conçus pour une interaction avec l'utilisateur. Les éléments appartenant à cette catégories sont : {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("label")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</p> +Le contenu interactif regroupe des éléments spécialement conçus pour une interaction avec l'utilisateur. Les éléments appartenant à cette catégories sont : {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("label")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}. -<p>Quelques éléments appartiennent à cette catégorie seulement sous certaines conditions :</p> +Quelques éléments appartiennent à cette catégorie seulement sous certaines conditions : -<ul> - <li>{{HTMLElement("audio")}} si l'attribut {{htmlattrxref("controls", "audio")}} est présent</li> - <li>{{HTMLElement("img")}} si l'attribut {{htmlattrxref("usemap", "img")}} est présent</li> - <li>{{HTMLElement("input")}} si l'attribubt {{htmlattrxref("type", "input")}} ne vaut pas <code>hidden</code></li> - <li>{{HTMLElement("menu")}} si l'attribut {{htmlattrxref("type", "menu")}} vaut <code>toolbar</code></li> - <li>{{HTMLElement("object")}} si l'attribut {{htmlattrxref("usemap", "object")}} est présent</li> - <li>{{HTMLElement("video")}}, si l'attribut {{htmlattrxref("controls", "video")}} est présent</li> -</ul> +- {{HTMLElement("audio")}} si l'attribut {{htmlattrxref("controls", "audio")}} est présent +- {{HTMLElement("img")}} si l'attribut {{htmlattrxref("usemap", "img")}} est présent +- {{HTMLElement("input")}} si l'attribubt {{htmlattrxref("type", "input")}} ne vaut pas `hidden` +- {{HTMLElement("menu")}} si l'attribut {{htmlattrxref("type", "menu")}} vaut `toolbar` +- {{HTMLElement("object")}} si l'attribut {{htmlattrxref("usemap", "object")}} est présent +- {{HTMLElement("video")}}, si l'attribut {{htmlattrxref("controls", "video")}} est présent -<h3 id="Contenu_tangible">Contenu tangible</h3> +### Contenu tangible -<p>Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les éléments dont le modèle de contenu est de flux ou phrasé devraient toujours avoir au moins un noeud dont le contenu est tangible.</p> +Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les éléments dont le modèle de contenu est de flux ou phrasé devraient toujours avoir au moins un noeud dont le contenu est tangible. -<h3 id="Contenu_associé_aux_formulaires">Contenu associé aux formulaires</h3> +### Contenu associé aux formulaires -<p>Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut <strong>form</strong>. Être possédé par un formulaire signifie être descendant d'un élément {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut <strong>form</strong>.</p> +Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut **form**. Être possédé par un formulaire signifie être descendant d'un élément {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut **form**. -<p>Cette catégorie contient les éléments :</p> +Cette catégorie contient les éléments : -<ul> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("keygen")}}{{deprecated_inline()}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("meter")}}</li> - <li>{{HTMLElement("object")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> +- {{HTMLElement("button")}} +- {{HTMLElement("fieldset")}} +- {{HTMLElement("input")}} +- {{HTMLElement("keygen")}}{{deprecated_inline()}} +- {{HTMLElement("label")}} +- {{HTMLElement("meter")}} +- {{HTMLElement("object")}} +- {{HTMLElement("output")}} +- {{HTMLElement("progress")}} +- {{HTMLElement("select")}} +- {{HTMLElement("textarea")}} -<p> Cette catégorie peut être subdivisée en plusieurs sous-catégories.</p> +Cette catégorie peut être subdivisée en plusieurs sous-catégories. -<dl> - <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>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>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>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> +- listed (éléments listés) + - : Les éléments étant listés sont les ensembles IDL [form.elements](/fr/docs/DOM/form.elements "DOM/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) + - : 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) + - : 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) + - : É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")}}. -<h2 id="Catégories_secondaires">Catégories secondaires</h2> +## Catégories secondaires -<p>Il existe des classifications secondaires d'éléments qu'il peut être utile de connaître également.</p> +Il existe des classifications secondaires d'éléments qu'il peut être utile de connaître également. -<h3 id="Éléments_supports_de_script">Éléments supports de script</h3> +### Éléments supports de script -<p>Les éléments supports de script sont des éléments qui ne contribuent pas directement à la sortie rendue d'un document. Au lieu de cela, ils servent à prendre en charge les scripts, soit en contenant ou en spécifiant le code de script directement, soit en spécifiant les données qui seront utilisées par les scripts. Ce sont :</p> +Les éléments supports de script sont des éléments qui ne contribuent pas directement à la sortie rendue d'un document. Au lieu de cela, ils servent à prendre en charge les scripts, soit en contenant ou en spécifiant le code de script directement, soit en spécifiant les données qui seront utilisées par les scripts. Ce sont : -<ul> - <li>{{HTMLElement("script")}}</li> - <li>{{HTMLElement("template")}}</li> -</ul> +- {{HTMLElement("script")}} +- {{HTMLElement("template")}} -<h2 id="Modèle_de_contenu_transparent">Modèle de contenu transparent</h2> +## Modèle de contenu transparent -<p>Si l'élément possède un modèle de contenu transparent, son contenu doit alors être structuré comme du HTML5 valide, et ce, même si l'élément transparent a été enlevé et remplacé par ses éléments fils.</p> +Si l'élément possède un modèle de contenu transparent, son contenu doit alors être structuré comme du HTML5 valide, et ce, même si l'élément transparent a été enlevé et remplacé par ses éléments fils. -<p>Les éléments {{HTMLElement("del")}} et {{HTMLELement("ins")}} sont des exemples d'éléments transparents.</p> +Les éléments {{HTMLElement("del")}} et {{HTMLELement("ins")}} sont des exemples d'éléments transparents. -<pre><p>Bonjour <del><em>tout</em></del> <ins>le monde</ins>.</p> -</pre> + <p>Bonjour <del><em>tout</em></del> <ins>le monde</ins>.</p> -<p>Si ces éléments étaient retirés, ce fragment de code HTML serait toujours du HTML valide.</p> +Si ces éléments étaient retirés, ce fragment de code HTML serait toujours du HTML valide. -<pre><p>Bonjour <em>tout</em> le monde.</p> -</pre> + <p>Bonjour <em>tout</em> le monde.</p> -<h2 id="Autres_modèles_de_contenu">Autres modèles de contenu</h2> +## Autres modèles de contenu -<p><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></p> +[Racine de sectionnement.](/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement "/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement") diff --git a/files/fr/web/guide/html/editable_content/index.md b/files/fr/web/guide/html/editable_content/index.md index b5295b8c40..1a23f229f6 100644 --- a/files/fr/web/guide/html/editable_content/index.md +++ b/files/fr/web/guide/html/editable_content/index.md @@ -4,34 +4,45 @@ slug: Web/Guide/HTML/Editable_content translation_of: Web/Guide/HTML/Editable_content original_slug: Web/HTML/Contenu_editable --- -<h2 id="Introduction">Introduction</h2> -<p>Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec <a class="external" href="http://www.whatwg.org/">WHATWG</a> (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">voir la spécification HTML actuelle</a>). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.</p> -<h2 id="Compatibilité">Compatibilité</h2> -<p>Le contenu éditable est entièrement compatible avec les navigateurs actuels :</p> -<ul> - <li>Firefox 3.5+</li> - <li>Chrome 6.0+</li> - <li>Internet Explorer 6.0+</li> - <li>Safari 3.2+</li> - <li>Opera 8+</li> - <li>iOS Safari 5.0+</li> - <li>Android Browser 3.0+</li> -</ul> -<p>Ce n'est pas encore supporté par Opera Mini et Opera Mobile.</p> -<h2 id="Comment_ça_marche">Comment ça marche ?</h2> -<p>Fixez l'attribut <code>contenteditable</code> à <code>true</code> dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.</p> -<h2 id="Exemples">Exemples</h2> -<p>Un exemple simple :</p> -<pre><!DOCTYPE html> -<html> - <body> - <div contenteditable="true"> - Ce texte peut être édité par l'utilisateur. - </div> - </body> -</html> </pre> -<p>Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage <a class="external" href="http://html5demos.com/contenteditable">ici</a>. Le code source est disponible <a href="http://html5demos.com/contenteditable#view-source">ici</a>.</p> -<h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="/fr/docs/Midas" title="en/Midas">Comment interagir avec le contenu </a>(style proche de l'ancienne API Internet Explorer) ou encore <a href="/fr/docs/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">ici</a>.</p> -<div> - {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div> +## Introduction + +Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec [WHATWG](http://www.whatwg.org/) ([voir la spécification HTML actuelle](http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable)). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide. + +## Compatibilité + +Le contenu éditable est entièrement compatible avec les navigateurs actuels : + +- Firefox 3.5+ +- Chrome 6.0+ +- Internet Explorer 6.0+ +- Safari 3.2+ +- Opera 8+ +- iOS Safari 5.0+ +- Android Browser 3.0+ + +Ce n'est pas encore supporté par Opera Mini et Opera Mobile. + +## Comment ça marche ? + +Fixez l'attribut `contenteditable` à `true` dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML. + +## Exemples + +Un exemple simple : + + <!DOCTYPE html> + <html> + <body> + <div contenteditable="true"> + Ce texte peut être édité par l'utilisateur. + </div> + </body> + </html> + +Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage [ici](http://html5demos.com/contenteditable). Le code source est disponible [ici](http://html5demos.com/contenteditable#view-source). + +## Voir aussi + +[Comment interagir avec le contenu ](/fr/docs/Midas "en/Midas")(style proche de l'ancienne API Internet Explorer) ou encore [ici](/fr/docs/Rich-Text_Editing_in_Mozilla "en/rich-text editing in mozilla"). + +{{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }} diff --git a/files/fr/web/guide/index.md b/files/fr/web/guide/index.md index c649cfd67e..ec1a154fde 100644 --- a/files/fr/web/guide/index.md +++ b/files/fr/web/guide/index.md @@ -7,52 +7,47 @@ tags: - Web translation_of: Web/Guide --- -<p><strong>Ces articles sont des tutoriels et guides pratiques permettant d'utiliser certaines API et technologies web.</strong></p> +**Ces articles sont des tutoriels et guides pratiques permettant d'utiliser certaines API et technologies web.** +- [Apprendre - HTML](/fr/docs/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](/fr/docs/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](/fr/docs/Web/Guide/Audio_and_video_delivery) + - : 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](/fr/docs/Web/Guide/Audio_and_video_manipulation) + - : 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](/fr/docs/Web/WebGL) ou l'API [Web Audio](/fr/docs/Web/API/Web_Audio_API) 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](/fr/docs/Web/Guide/Events) + - : 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](/fr/docs/Web/Guide/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](/fr/docs/Web/Guide/Graphics) + - : Les sites et applications web modernes utilisent généralement des graphismes (avec différents degrés de sophistication). +- [Guide pour les API web](/fr/docs/Web/Guide/API) + - : Une liste de l'ensemble des API web et de leur rôle. +- [JavaScript](/fr/docs/JavaScript "/fr/docs/JavaScript") + - : JavaScript est un langage de script notamment utilisé pour créer des applications sur le Web. +- [Localisations et encodages](/fr/docs/Localizations_and_character_encodings) + - : 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](http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset) (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](/fr/docs/Web/Guide/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](/fr/docs/Mozilla/Firefox_pour_Android). +- [Applications web progressives (PWA)](/fr/Apps/Progressive#Core_PWA_guides) + - : 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](/fr/docs/Web/Guide/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](/fr/docs/Web/Guide/Parsing_and_serializing_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)](/fr/docs/Web/Guide/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)](/fr/docs/Web/Guide/Unicode_Bidrectional_Text_Algorithm) + - : 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`](/fr/docs/Web/Guide/Using_FormData_Objects) + - : L'objet [`FormData`](https://developer.mozilla.org/en/DOM/XMLHttpRequest/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](/fr/docs/Web/Guide/User_input_methods) + - : 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](/fr/docs/Glossaire) + - : Définit de nombreux termes techniques relatifs au Web et à Internet. -<dl> - <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><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> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/Reference" title="/fr/docs/Web/Reference">Référence pour les développeurs web</a></li> -</ul> +- [Référence pour les développeurs web](/fr/docs/Web/Reference "/fr/docs/Web/Reference") diff --git a/files/fr/web/guide/introduction_to_web_development/index.md b/files/fr/web/guide/introduction_to_web_development/index.md index 0c2daff192..32653adc63 100644 --- a/files/fr/web/guide/introduction_to_web_development/index.md +++ b/files/fr/web/guide/introduction_to_web_development/index.md @@ -4,28 +4,35 @@ slug: Web/Guide/Introduction_to_Web_development translation_of: Web/Guide/Introduction_to_Web_development 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"> - <p><strong>Note :</strong> cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.</p></div> +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. <table> - <tbody> - <tr> - <td> - <h2 id="Sujets_de_documentation">Sujets de documentation</h2> - <p>Aucun article n'est encore disponible.</p> - </td> - <td> - <h2 id="Ressources">Ressources</h2> - <dl> - <dt> - <a class="external" href="http://www.alsacreations.com/">Alsacréations</a></dt> - <dd> - Tutoriels HTML, CSS, actualités et articles sur les standards du web.</dd> - </dl> - </td> - </tr> - </tbody> + <tbody> + <tr> + <td> + <h2 id="Sujets_de_documentation">Sujets de documentation</h2> + <p>Aucun article n'est encore disponible.</p> + </td> + <td> + <h2 id="Ressources">Ressources</h2> + <dl> + <dt> + <a class="external" href="http://www.alsacreations.com/" + >Alsacréations</a + > + </dt> + <dd> + Tutoriels HTML, CSS, actualités et articles sur les standards du + web. + </dd> + </dl> + </td> + </tr> + </tbody> </table> -<p> </p> -<p>{{ languages( { "en": "en/Web_development/Introduction_to_Web_development", "zh-tw": "zh_tw/Web_開發/Web開發入門" } ) }}</p> + + + +{{ languages( { "en": "en/Web_development/Introduction_to_Web_development", "zh-tw": "zh_tw/Web\_開發/Web開發入門" } ) }} diff --git a/files/fr/web/guide/mobile/index.md b/files/fr/web/guide/mobile/index.md index 8cc4376982..7823e039c1 100644 --- a/files/fr/web/guide/mobile/index.md +++ b/files/fr/web/guide/mobile/index.md @@ -3,42 +3,64 @@ title: Développement web mobile slug: Web/Guide/Mobile translation_of: Web/Guide/Mobile --- -<p>Cette page fournit un aperçu de certaines des techniques principales nécessaires pour concevoir des sites web qui fonctionneront bien sur les appareils mobiles. Si vous cherchez des informations sur le projet Firefox OS de Mozilla, consultez la page <a href="/fr/Firefox_OS">Firefox OS</a>. Des détails sur <a href="/fr/docs/Mozilla/Firefox_pour_Android" title="Firefox pour Android">Firefox pour Android</a> pourraient également vous intéresser.</p> -<p>Cette page est divisée en deux sections, <a href="#Conception_pour_les_appareils_mobiles">conception pour les appareils mobiles</a> et <a href="#D.C3.A9veloppement_multinavigateur">développement multinavigateur</a>. Consultez également le guide de Jason Grlicky <a href="/fr/docs/Web_Development/Mobile/Mobile-friendliness">mobile-friendliness</a> pour les développeurs web.</p> -<h2 id="Conception_pour_les_appareils_mobiles">Conception pour les appareils mobiles</h2> -<p>Les appareils mobiles ont des caractéristiques physiques assez différentes des ordinateurs portables ou de bureau. Leurs écrans sont généralement plus petits, évidemment, mais ils changent aussi automatiquement l'orientation de l'écran entre portrait et paysage lorsque l'utilisateur les tourne. Ils disposent généralement d'écrans tactiles pour les manipuler. Des API comme la géolocalisation ou l'orientation de l'appareil ne sont pas toujours gérées sur un ordinateur ou y sont beaucoup moins utiles, alors qu'elles donnent aux utilisateurs mobiles de nouvelles manières d'interagir avec votre site.</p> -<h3 id="Gestion_des_petits_écrans">Gestion des petits écrans</h3> -<p>Le <a href="/fr/docs/Développement_Web/Design_web_Responsive">Responsive Web Design</a> est un terme pour un ensemble de techniques permettant à votre site web d'adapter sa disposition lorsque son environnement change ; en particulier la taille et l'orientation de l'écran. Parmi ces techniques :</p> -<ul> - <li>les mises en page CSS fluides, pour permettre à la page de s'adapter progressivement lorsque la taille de la fenêtre de navigation change ;</li> - <li>l'utilisation de <a href="/fr/docs/CSS/Media_queries">media queries</a> pour inclure des règles CSS conditionnelles appropriées pour la <a href="/fr/docs/CSS/Media_queries#width">largeur</a> et la <a href="/fr/docs/CSS/Media_queries#height">hauteur</a> de l'écran.</li> -</ul> -<p>La <a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">balise meta <em>viewport</em></a> indique au navigateur d'afficher votre site à l'échelle appropriée pour l'appareil de l'utilisateur.</p> -<h3 id="Gestion_des_écrans_tactiles">Gestion des écrans tactiles</h3> -<p>Pour utiliser un écran tactile, vous devrez travailler avec les <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">évènements DOM Touch</a>. Vous n'aurez pas la possibilité d'utiliser la pseudo-classe <a href="/fr/docs/CSS/:hover">CSS :hover</a> et devrez concevoir les éléments cliquables comme les boutons de manière à prendre en compte le fait que les doigts sont plus gros qu'un pointeur de souris. Consultez cet article concernant la <a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">conception pour écrans tactiles</a>.</p> -<p>Vous pouvez utiliser la media query <a href="/fr/docs/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> pour charger un style CSS différent sur un appareil tactile.</p> -<h3 id="Optimisation_des_images">Optimisation des images</h3> -<p>Pour aider les utilisateurs dont les appareils ont une bande passante faible ou coûteuse, vous pouvez optimiser les images en ne chargeant que celles qui sont appropriées pour la taille et la résolution de l'écran. Ceci peut se faire en CSS selon la <a href="/fr/docs/CSS/Media_queries#height">hauteur</a>, la <a href="/fr/docs/CSS/Media_queries#width">largeur</a> et la <a href="/fr/docs/CSS/Media_queries#-moz-device-pixel-ratio">densité en pixels</a>.</p> -<p>Il est également possible d'utiliser des propriétés CSS pour concevoir des effets visuels comme des <a href="/fr/docs/CSS/Utilisation_de_dégradés_CSS">dégradés</a> et des <a href="/fr/docs/CSS/box-shadow">ombres</a> sans utiliser d'images.</p> -<h3 id="API_mobiles">API mobiles</h3> -<p>Enfin, vous pourrez tirer partir des nouvelles possibilités offertes par les appareils mobiles, comme l'<a href="/fr/docs/WebAPI/Detecting_device_orientation">orientation</a> et la <a href="/fr/docs/Using_geolocation">géolocalisation</a>.</p> -<h2 id="Développement_multinavigateur">Développement multinavigateur</h2> -<h3 id="Écriture_de_code_multinavigateur">Écriture de code multinavigateur</h3> -<p>Pour créer des sites web qui fonctionneront de manière acceptable sur différents navigateurs mobiles :</p> -<ul> - <li>Essayez d'éviter les fonctionnalités spécifiques à un navigateur, comme les propriétés CSS préfixées par le moteur de rendu.</li> - <li>Si vous avez besoin de ces fonctionnalités, vérifiez si d'autres navigateurs disposent de leurs propres versions de ces fonctionnalités, et traitez-les de la même manière.</li> - <li>Pour les navigateurs qui ne gèrent pas du tout ces fonctionnalités, fournissez une alternative acceptable.</li> -</ul> -<p>Par exemple, si vous prévoyez un fond avec dégradé de couleurs sur une zone de texte avec une propriété préfixée comme <code>-webkit-linear-gradient</code>, il est préférable d'ajouter les autres versions préfixées de la propriété <a href="/fr/docs/CSS/linear-gradient">linear-gradient</a>. Si vous ne le faites pas, assurez-vous au moins que le fond par défaut offre un bon contraste avec le texte : de cette manière la page sera au moins utilisable dans un navigateur qui n'est pas visé par votre règle <code>linear-gradient</code>.</p> -<p>Consultez cette <a href="/fr/docs/Web/CSS/Reference/Mozilla_Extensions">liste des propriétés spécifiques à Gecko</a>, cette liste de <a href="/fr/docs/Web/CSS/Reference/Webkit_Extensions">propriétés spécifiques à WebKit</a>, ainsi que le tableau de Peter Beverloo des <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">propriétés spécifiques des moteurs de rendu des navigateurs</a>.</p> -<p>Vous pouvez vous aider d'outils comme <a class="external" href="http://csslint.net/">CSS Lint</a> pour trouver des problèmes de ce genre dans votre code, et de préprocesseurs comme <a class="external" href="http://sass-lang.com/">SASS</a> et <a class="external" href="http://lesscss.org/">LESS</a> pour produire du code multinavigateur.</p> -<h3 id="Attention_avec_la_détection_d'agent_utilisateur">Attention avec la détection d'agent utilisateur</h3> -<p>Il est préférable que les sites web détectent des fonctionnalités spécifiques de l'appareil comme sa taille d'écran et ses capacités tactiles à l'aide des techniques listées ci-dessus, et s'y adaptent en conséquence. Mais parfois ce n'est pas possible et certains sites ont recours à la chaîne d'identification d'agent utilisateur (user agent) pour essayer de faire la distinction entre ordinateurs de bureau, tablettes et téléphones afin de servir un type de contenu différent à chaque type d'appareil.</p> -<p>Si vous faites cela, assurez-vous que votre algorithme est correct et que vous ne fournissez pas le mauvais type de contenu à un appareil parce que vous ne traitez pas la chaîne d'identification d'un navigateur particulier. Consultez ce <a href="/fr/docs/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop">guide d'utilisation de la chaîne user agent pour déteminer le type d'appareil</a>.</p> -<h3 id="Test_sur_plusieurs_navigateurs">Test sur plusieurs navigateurs</h3> -<p>Testez votre site web sur plusieurs navigateurs. Cela veut dire aussi tester sur plusieurs plateformes — au moins iOS et Android.</p> -<ul> - <li>testez Safari sur l'iPhone avec <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS simulator</a></li> - <li>testez Opera et Firefox avec le <a class="link-https" href="https://developer.android.com/sdk/index.html">SDK Android</a>. Consultez ces instructions pour <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">lancer Firefox pour Android avec l'émulateur Android</a>.</li> -</ul> +Cette page fournit un aperçu de certaines des techniques principales nécessaires pour concevoir des sites web qui fonctionneront bien sur les appareils mobiles. Si vous cherchez des informations sur le projet Firefox OS de Mozilla, consultez la page [Firefox OS](/fr/Firefox_OS). Des détails sur [Firefox pour Android](/fr/docs/Mozilla/Firefox_pour_Android "Firefox pour Android") pourraient également vous intéresser. + +Cette page est divisée en deux sections, [conception pour les appareils mobiles](#Conception_pour_les_appareils_mobiles) et [développement multinavigateur](#D.C3.A9veloppement_multinavigateur). Consultez également le guide de Jason Grlicky [mobile-friendliness](/fr/docs/Web_Development/Mobile/Mobile-friendliness) pour les développeurs web. + +## Conception pour les appareils mobiles + +Les appareils mobiles ont des caractéristiques physiques assez différentes des ordinateurs portables ou de bureau. Leurs écrans sont généralement plus petits, évidemment, mais ils changent aussi automatiquement l'orientation de l'écran entre portrait et paysage lorsque l'utilisateur les tourne. Ils disposent généralement d'écrans tactiles pour les manipuler. Des API comme la géolocalisation ou l'orientation de l'appareil ne sont pas toujours gérées sur un ordinateur ou y sont beaucoup moins utiles, alors qu'elles donnent aux utilisateurs mobiles de nouvelles manières d'interagir avec votre site. + +### Gestion des petits écrans + +Le [Responsive Web Design](/fr/docs/Développement_Web/Design_web_Responsive) est un terme pour un ensemble de techniques permettant à votre site web d'adapter sa disposition lorsque son environnement change ; en particulier la taille et l'orientation de l'écran. Parmi ces techniques : + +- les mises en page CSS fluides, pour permettre à la page de s'adapter progressivement lorsque la taille de la fenêtre de navigation change ; +- l'utilisation de [media queries](/fr/docs/CSS/Media_queries) pour inclure des règles CSS conditionnelles appropriées pour la [largeur](/fr/docs/CSS/Media_queries#width) et la [hauteur](/fr/docs/CSS/Media_queries#height) de l'écran. + +La [balise meta _viewport_](/fr/docs/Mozilla/Mobile/Balise_meta_viewport) indique au navigateur d'afficher votre site à l'échelle appropriée pour l'appareil de l'utilisateur. + +### Gestion des écrans tactiles + +Pour utiliser un écran tactile, vous devrez travailler avec les [évènements DOM Touch](/fr/docs/Web/Guide/DOM/Events/Touch_events). Vous n'aurez pas la possibilité d'utiliser la pseudo-classe [CSS :hover](/fr/docs/CSS/:hover) et devrez concevoir les éléments cliquables comme les boutons de manière à prendre en compte le fait que les doigts sont plus gros qu'un pointeur de souris. Consultez cet article concernant la [conception pour écrans tactiles](http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/). + +Vous pouvez utiliser la media query [-moz-touch-enabled](/fr/docs/CSS/Media_queries#-moz-touch-enabled) pour charger un style CSS différent sur un appareil tactile. + +### Optimisation des images + +Pour aider les utilisateurs dont les appareils ont une bande passante faible ou coûteuse, vous pouvez optimiser les images en ne chargeant que celles qui sont appropriées pour la taille et la résolution de l'écran. Ceci peut se faire en CSS selon la [hauteur](/fr/docs/CSS/Media_queries#height), la [largeur](/fr/docs/CSS/Media_queries#width) et la [densité en pixels](/fr/docs/CSS/Media_queries#-moz-device-pixel-ratio). + +Il est également possible d'utiliser des propriétés CSS pour concevoir des effets visuels comme des [dégradés](/fr/docs/CSS/Utilisation_de_dégradés_CSS) et des [ombres](/fr/docs/CSS/box-shadow) sans utiliser d'images. + +### API mobiles + +Enfin, vous pourrez tirer partir des nouvelles possibilités offertes par les appareils mobiles, comme l'[orientation](/fr/docs/WebAPI/Detecting_device_orientation) et la [géolocalisation](/fr/docs/Using_geolocation). + +## Développement multinavigateur + +### Écriture de code multinavigateur + +Pour créer des sites web qui fonctionneront de manière acceptable sur différents navigateurs mobiles : + +- Essayez d'éviter les fonctionnalités spécifiques à un navigateur, comme les propriétés CSS préfixées par le moteur de rendu. +- Si vous avez besoin de ces fonctionnalités, vérifiez si d'autres navigateurs disposent de leurs propres versions de ces fonctionnalités, et traitez-les de la même manière. +- Pour les navigateurs qui ne gèrent pas du tout ces fonctionnalités, fournissez une alternative acceptable. + +Par exemple, si vous prévoyez un fond avec dégradé de couleurs sur une zone de texte avec une propriété préfixée comme `-webkit-linear-gradient`, il est préférable d'ajouter les autres versions préfixées de la propriété [linear-gradient](/fr/docs/CSS/linear-gradient). Si vous ne le faites pas, assurez-vous au moins que le fond par défaut offre un bon contraste avec le texte : de cette manière la page sera au moins utilisable dans un navigateur qui n'est pas visé par votre règle `linear-gradient`. + +Consultez cette [liste des propriétés spécifiques à Gecko](/fr/docs/Web/CSS/Reference/Mozilla_Extensions), cette liste de [propriétés spécifiques à WebKit](/fr/docs/Web/CSS/Reference/Webkit_Extensions), ainsi que le tableau de Peter Beverloo des [propriétés spécifiques des moteurs de rendu des navigateurs](http://peter.sh/experiments/vendor-prefixed-css-property-overview/). + +Vous pouvez vous aider d'outils comme [CSS Lint](http://csslint.net/) pour trouver des problèmes de ce genre dans votre code, et de préprocesseurs comme [SASS](http://sass-lang.com/) et [LESS](http://lesscss.org/) pour produire du code multinavigateur. + +### Attention avec la détection d'agent utilisateur + +Il est préférable que les sites web détectent des fonctionnalités spécifiques de l'appareil comme sa taille d'écran et ses capacités tactiles à l'aide des techniques listées ci-dessus, et s'y adaptent en conséquence. Mais parfois ce n'est pas possible et certains sites ont recours à la chaîne d'identification d'agent utilisateur (user agent) pour essayer de faire la distinction entre ordinateurs de bureau, tablettes et téléphones afin de servir un type de contenu différent à chaque type d'appareil. + +Si vous faites cela, assurez-vous que votre algorithme est correct et que vous ne fournissez pas le mauvais type de contenu à un appareil parce que vous ne traitez pas la chaîne d'identification d'un navigateur particulier. Consultez ce [guide d'utilisation de la chaîne user agent pour déteminer le type d'appareil](/fr/docs/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop). + +### Test sur plusieurs navigateurs + +Testez votre site web sur plusieurs navigateurs. Cela veut dire aussi tester sur plusieurs plateformes — au moins iOS et Android. + +- testez Safari sur l'iPhone avec [iOS simulator](https://developer.apple.com/devcenter/ios/index.action) +- testez Opera et Firefox avec le [SDK Android](https://developer.android.com/sdk/index.html). Consultez ces instructions pour [lancer Firefox pour Android avec l'émulateur Android](https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator). diff --git a/files/fr/web/guide/performance/index.md b/files/fr/web/guide/performance/index.md index 5c2605f1aa..9731275914 100644 --- a/files/fr/web/guide/performance/index.md +++ b/files/fr/web/guide/performance/index.md @@ -7,14 +7,12 @@ tags: - Web translation_of: Web/Guide/Performance --- -<p>Lorsque l’on créent des sites et des applications internet modernes, il est important que notre code soit performant. C’est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d’un site ou de blog internet. Les plus connus sont listés ci-dessous : </p> +Lorsque l’on créent des sites et des applications internet modernes, il est important que notre code soit performant. C’est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d’un site ou de blog internet. Les plus connus sont listés ci-dessous : -<ul> - <li><a href="https://developers.google.com/speed/pagespeed/insights/">Google PageSpeed Insights</a></li> - <li><a href="https://www.pingdom.com">Pingdome - Website Performance Monitoring</a></li> - <li><a href="http://yslow.org/">ySlow</a></li> -</ul> +- [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) +- [Pingdome - Website Performance Monitoring](https://www.pingdom.com) +- [ySlow](http://yslow.org/) -<p>Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d’optimisation. Plusieurs produits logiciels open source à l’instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d’optimisez leurs performances web. <a href="https://codecanyon.net/item/wp-super-charge/17091749">WP Super Charge</a> est un des plugins disponible sur la boutique de WordPress, il permet à l’utilisateur d’optimisez les performances de son site en un clic.</p> +Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d’optimisation. Plusieurs produits logiciels open source à l’instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d’optimisez leurs performances web. [WP Super Charge](https://codecanyon.net/item/wp-super-charge/17091749) est un des plugins disponible sur la boutique de WordPress, il permet à l’utilisateur d’optimisez les performances de son site en un clic. -<p>{{LandingPageListSubpages}}</p> +{{LandingPageListSubpages}} diff --git a/files/fr/web/guide/user_input_methods/index.md b/files/fr/web/guide/user_input_methods/index.md index b2f48453e0..9cf53daea9 100644 --- a/files/fr/web/guide/user_input_methods/index.md +++ b/files/fr/web/guide/user_input_methods/index.md @@ -3,105 +3,100 @@ title: Entrées utilisateur et méthodes slug: Web/Guide/User_input_methods translation_of: Web/Guide/User_input_methods --- -<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> +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](/fr/docs/Web/Guide/DOM/Events/Touch_events), [l'API Pointer Lock](/fr/docs/WebAPI/Pointer_Lock), [l'API Screen Orientation](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation), [l'API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode) et [Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop). -<h2 id="Workflow_entrées_utilisateur_et_contrôles">Workflow entrées utilisateur et contrôles</h2> +## Workflow entrées utilisateur et contrôles -<p>La diagramme suivant illustre le déroulement des opérations typique pour implémenter les mécanismes d'entrée utilisateur:</p> +La diagramme suivant illustre le déroulement des opérations typique pour implémenter les mécanismes d'entrée utilisateur: -<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> +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. -<h2 id="Recommandations">Recommandations</h2> +## Recommandations -<p>Les mécanismes en entrées dépendent des capacités de l'appareil qui exécute l'application:</p> +Les mécanismes en entrées dépendent des capacités de l'appareil qui exécute l'application: -<ul> - <li>Certains appareils ont des écrans tactiles: le plateforme web dispose des <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">événements tactiles</a> pour interpréter l'activité du doigt sur les interfaces tactiles.</li> - <li>Pour les appareils ayant une souris/pavé tactile comme méthode de pointage, l'<a href="/fr/docs/WebAPI/Pointer_Lock">API Pointer Lock</a> aide à implémenter un jeu 3D à la première personne ou toute autre application nécessisant un contrôle total du dispositif de pointage. L'<a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">API Fullscreen</a> quant à elle aide à afficher l'application en mode plein écran.</li> - <li>En utilisant les fonctionnalités telles que les éléments <a href="/fr/docs/Web/HTML/Contenu_editable">contentEditable</a>, vous pouvez implémenter des éditeurs rich-text rapidement et avec <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag&Drop</a> vous pouvez laisser les utilisateurs déplacer des éléments dans votre application. Quand l'orientation de l'écran a de l'importance pour votre application, vous pouvez lire l'orientation de l'écran à travers l'<a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">API Screen Orientation</a> et verrouiller l'écran dans un sens.</li> - <li>Vous devriez toujours être attentif à l'accessibilité du clavier quand c'est approprié — beaucoup d'utilisateurs web utilisent uniquement le clavier pour naviger sur les sites web et applications, et les bloquer hors de votre fonctionnalité est une mauvaise idée.</li> -</ul> +- Certains appareils ont des écrans tactiles: le plateforme web dispose des [événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events) pour interpréter l'activité du doigt sur les interfaces tactiles. +- Pour les appareils ayant une souris/pavé tactile comme méthode de pointage, l'[API Pointer Lock](/fr/docs/WebAPI/Pointer_Lock) aide à implémenter un jeu 3D à la première personne ou toute autre application nécessisant un contrôle total du dispositif de pointage. L'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode) quant à elle aide à afficher l'application en mode plein écran. +- En utilisant les fonctionnalités telles que les éléments [contentEditable](/fr/docs/Web/HTML/Contenu_editable), vous pouvez implémenter des éditeurs rich-text rapidement et avec [Drag\&Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop) vous pouvez laisser les utilisateurs déplacer des éléments dans votre application. Quand l'orientation de l'écran a de l'importance pour votre application, vous pouvez lire l'orientation de l'écran à travers l'[API Screen Orientation](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation) et verrouiller l'écran dans un sens. +- Vous devriez toujours être attentif à l'accessibilité du clavier quand c'est approprié — beaucoup d'utilisateurs web utilisent uniquement le clavier pour naviger sur les sites web et applications, et les bloquer hors de votre fonctionnalité est une mauvaise idée. -<p>Vous trouverez ci-dessous un ensemble de recommandations et meilleures pratiques pour utiliser de tels outils dans des Open Web Apps.</p> +Vous trouverez ci-dessous un ensemble de recommandations et meilleures pratiques pour utiliser de tels outils dans des Open Web Apps. -<h3 id="Décidez_quel_mécanisme_en_entrée_vous_utilisez">Décidez quel mécanisme en entrée vous utilisez</h3> +### Décidez quel mécanisme en entrée vous utilisez -<h4 id="Clavier">Clavier</h4> +#### Clavier -<p>La saisie du clavier peut être contrôlée par votre application. Par exemple, si vous voulez ajouter des contrôles déclenchés quand des touches sont pressées, vous devez ajouter un gestionnaire d'événement sur l'objet window:</p> +La saisie du clavier peut être contrôlée par votre application. Par exemple, si vous voulez ajouter des contrôles déclenchés quand des touches sont pressées, vous devez ajouter un gestionnaire d'événement sur l'objet window: -<pre class="brush: js">window.addEventListener("keydown", handleKeyDown, true); -window.addEventListener("keyup", handleKeyUp, true);</pre> +```js +window.addEventListener("keydown", handleKeyDown, true); +window.addEventListener("keyup", handleKeyUp, true); +``` -<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> +où `handleKeyDown` et `handleKeyUp` sont des fonctions implémentant les contrôles sur les événements `keydown` et `keyup`. -<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> -</div> +> **Note :** Jetez un coup d'oeil à la [Référence des événements](/fr/docs/Web/Events) et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier. + +#### Souris -<h4 id="Souris">Souris</h4> +Les événements qui se produisent quand l'utilisateur interagit avec un appareil de pointage comme une souris sont représentés par l'interface DOM {{domxref("MouseEvent")}}. Les événements de souris les plus communs sont [`click`](/fr/docs/Web/Events/click), [`dblclick`](/fr/docs/Web/Events/dblclick), [`mouseup`](/fr/docs/Web/Events/mouseup), et [`mousedown`](/fr/docs/Web/Events/mousedown). La liste de tous les événements souris utilisant l'interface MouseEvent est disponible dans la [Référence des événements](/fr/docs/Web/Events). -<p>Les événements qui se produisent quand l'utilisateur interagit avec un appareil de pointage comme une souris sont représentés par l'interface DOM {{domxref("MouseEvent")}}. Les événements de souris les plus communs sont <a href="/fr/docs/Web/Events/click"><code>click</code></a>, <a href="/fr/docs/Web/Events/dblclick"><code>dblclick</code></a>, <a href="/fr/docs/Web/Events/mouseup"><code>mouseup</code></a>, et <a href="/fr/docs/Web/Events/mousedown"><code>mousedown</code></a>. La liste de tous les événements souris utilisant l'interface MouseEvent est disponible dans la <a href="/fr/docs/Web/Events">Référence des événements</a>.<br> - <br> - Quand le périphérique d'entrée est une souris, vous pouvez également contrôler les entrées utilisateur avec l'API Pointer Lock et implémenter le Drag & Drop (voir ci-dessous).</p> +Quand le périphérique d'entrée est une souris, vous pouvez également contrôler les entrées utilisateur avec l'API Pointer Lock et implémenter le Drag & Drop (voir ci-dessous). -<h4 id="Toucher_du_doigt">Toucher du doigt</h4> +#### Toucher du doigt -<p>Quand vous développez des applications web destinées à être installées sur des appareils à écran tactile, il est recommandé de prendre en considération les différentes capacités de l'appareil, en terme de résolution d'écran et d'entrée utilisateur. Les <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">événements tactiles</a> peuvent vous aider à implémenter des éléments interactifs et des geste d'interactions courants sur les appareils à écran tactile.<br> - <br> - Si vous voulez utiliser les événements tactiles, vous devez ajouter des gestionnaires d'événement et spécifier des fonctions de rappel, appelées quand l'événement est déclenché:</p> +Quand vous développez des applications web destinées à être installées sur des appareils à écran tactile, il est recommandé de prendre en considération les différentes capacités de l'appareil, en terme de résolution d'écran et d'entrée utilisateur. Les [événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events) peuvent vous aider à implémenter des éléments interactifs et des geste d'interactions courants sur les appareils à écran tactile. -<pre class="brush: js">element.addEventListener("touchstart", handleStart, false); +Si vous voulez utiliser les événements tactiles, vous devez ajouter des gestionnaires d'événement et spécifier des fonctions de rappel, appelées quand l'événement est déclenché: + +```js +element.addEventListener("touchstart", handleStart, false); element.addEventListener("touchend", handleEnd, false); element.addEventListener("touchcancel", handleCancel, false); element.addEventListener("touchend", handleEnd, false); -element.addEventListener("touchmove", handleMove, false);</pre> +element.addEventListener("touchmove", handleMove, false); +``` -<p>où <code>element</code> est l'élément du DOM sur lequel vous voulez enregistrer les événements tactiles.</p> +où `element` est l'élément du DOM sur lequel vous voulez enregistrer les événements tactiles. -<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> -</div> +> **Note :** Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des [événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events). -<h4 id="Événements_de_pointeur">Événements de pointeur</h4> +#### Événements de pointeur -<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> +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](/fr/docs/Web/API/Pointer_events) 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. -<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> -</div> +> **Note :** Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le [polyfill pointer.js](https://github.com/mozilla/pointer.js) est disponible sur le compte GitHub de Mozilla. -<h3 id="Implémentez_les_contrôles">Implémentez les contrôles</h3> +### Implémentez les contrôles -<h4 id="Verrouiller_le_pointeur">Verrouiller le pointeur</h4> +#### Verrouiller le pointeur -<p>Dans certains cas, typiquement dans le développement de jeux, vous pouvez avoir besoin d'accéder aux événements de la souris même lorsque le curseur dépasse la limite du navigateur ou de l'écran: l'{{domxref("Pointer_Lock_API", "API Pointer Lock")}} vous donne le contrôle total de l'appareil de pointage.</p> +Dans certains cas, typiquement dans le développement de jeux, vous pouvez avoir besoin d'accéder aux événements de la souris même lorsque le curseur dépasse la limite du navigateur ou de l'écran: l'{{domxref("Pointer_Lock_API", "API Pointer Lock")}} vous donne le contrôle total de l'appareil de pointage. -<p>Voici le code pour demander que le pointeur soit bloqué à l'intérieur d'<code>element</code>:</p> +Voici le code pour demander que le pointeur soit bloqué à l'intérieur d'`element`: -<pre class="brush: js">element.requestPointerLock();</pre> +```js +element.requestPointerLock(); +``` -<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> -</div> +> **Note :** Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}. -<h4 id="Orientation_de_l'écran">Orientation de l'écran</h4> +#### Orientation de l'écran -<p>Si l'orientation de l'écran est importante pour votre application, vous pouvez lire l'état de l'orientation de l'écran, être informé quand cet état change, et verrouiller l'orientation dans un état spécifique (habituellement portrait ou paysage) à travers l'<a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">API Screen Orientation</a>.</p> +Si l'orientation de l'écran est importante pour votre application, vous pouvez lire l'état de l'orientation de l'écran, être informé quand cet état change, et verrouiller l'orientation dans un état spécifique (habituellement portrait ou paysage) à travers l'[API Screen Orientation](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation). -<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> +Les données d'orientation peuvent être récupérées à travers l'attribut {{domxref("screen.orientation")}} ou à travers la media query [`orientation`](/fr/docs/Web/CSS/@media/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. -<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> -</div> +> **Note :** Pour plus d'informations sur l'API Screen Orientation API consultez [Gérer l'orientation de l'écran](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation). -<h4 id="Plein_écran">Plein écran</h4> +#### Plein écran -<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> +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: -<pre class="brush: js">var elem = document.getElementById("myvideo"); +```js +var elem = document.getElementById("myvideo"); if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.msRequestFullscreen) { @@ -110,77 +105,68 @@ if (elem.requestFullscreen) { 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> -</div> +> **Note :** Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation [utiliser le plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode). -<h4 id="Drag_Drop">Drag & Drop</h4> +#### Drag & Drop -<p><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a> (glisser/déposer) permet à l'utilisateur de votre application de cliquer sur un élément, maintenir le bouton de la souris enfoncé sur cet élément, le faire glisser vers un autre emplacement, et relacher le bouton de la souris pour le déposer à cet emplacement.<br> - <br> - Voici un exemple qui permet à du contenu d'être déplacé:</p> +[Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop) (glisser/déposer) permet à l'utilisateur de votre application de cliquer sur un élément, maintenir le bouton de la souris enfoncé sur cet élément, le faire glisser vers un autre emplacement, et relacher le bouton de la souris pour le déposer à cet emplacement. -<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> +Voici un exemple qui permet à du contenu d'être déplacé: -<p>Ici, on</p> +```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> +``` -<ul> - <li>Définit l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-dir"><code>draggable</code></a> à vrai pour que l'élément puisse être déplacé.</li> - <li>Ajoute un gestionnaire d'événement <a href="/fr/docs/Web/Events/dragstart"><code>dragstart</code></a> qui définit les données de déplacement à l'intérieur.</li> -</ul> +Ici, on -<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> -</div> +- Définit l'attribut [`draggable`](/fr/docs/Web/HTML/Attributs_universels#attr-dir) à vrai pour que l'élément puisse être déplacé. +- Ajoute un gestionnaire d'événement [`dragstart`](/fr/docs/Web/Events/dragstart) qui définit les données de déplacement à l'intérieur. -<h4 id="contentEditable">contentEditable</h4> +> **Note :** Vous pouvez trouver plus d'informations dans la documentation MDN [Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop). -<p>Dans un Open Web App, tout élément DOM peut être rendu directement éditable en utilisant l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-class"><code>contenteditable</code></a>.</p> +#### contentEditable -<pre class="brush: html"><div contenteditable="true"> - Ce texte peut être édité par l'utilisateur. -</div></pre> +Dans un Open Web App, tout élément DOM peut être rendu directement éditable en utilisant l'attribut [`contenteditable`](/fr/docs/Web/HTML/Attributs_universels#attr-class). -<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> +```html +<div contenteditable="true"> + Ce texte peut être édité par l'utilisateur. </div> - -<h2 id="Exemples">Exemples</h2> - -<dl> - <dt><strong><a href="/en/DOM/Touch_events#Example">Suivre plusieurs points de contact à la fois</a></strong></dt> - <dd>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un <code>{{htmlelement("canvas")}}</code> avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</dd> - <dt><strong><a href="/fr/docs/WebAPI/Pointer_Lock#example">Démo de verrouillage de pointeur simple</a></strong></dt> - <dd>Vous avons écrit une démo de verrouillage de pointeur pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple. Cette démo utilise JavaScript pour dessiner une balle dans un élément <code>{{htmlelement("canvas")}}</code>. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris.</dd> - <dt><strong><a href="http://html5demos.com/contenteditable">Démo contentEditable</a></strong></dt> - <dd>Ceci est un exemple qui montre comment contenteditable peut être utilisé pour créer une section de document éditable, et dont l'état est sauvegardé en utilisant <a href="/fr/docs/Web/API/Web_Storage_API">LocalStorage</a>.</dd> -</dl> - -<h2 id="Tutoriels">Tutoriels</h2> - -<ul> - <li><a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">Événement tactiles</a></li> - <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l'orientation de l'écran</a></li> - <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li> - <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">Drag & Drop de multiples éléments</a></li> - <li><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop/Op%C3%A9rations_de_glissement">Opérations de glissement</a></li> -</ul> - -<h2 id="Référence">Référence</h2> - -<ul> - <li>{{domxref("MouseEvent")}}</li> - <li>{{domxref("KeyboardEvent")}}</li> - <li><a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">Événements tactiles</a></li> - <li><a href="/fr/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></li> - <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a></li> - <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Fullscreen API</a></li> - <li><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a></li> - <li><a href="/fr/docs/Web/HTML/Contenu_editable">Content Editable</a></li> - <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li> - <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li> -</ul> +``` + +> **Note :** Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide [Contenu Éditable](/fr/docs/Web/HTML/Contenu_editable). + +## Exemples + +- **[Suivre plusieurs points de contact à la fois](/en/DOM/Touch_events#Example)** + - : Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un `{{htmlelement("canvas")}}` avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles. +- **[Démo de verrouillage de pointeur simple](/fr/docs/WebAPI/Pointer_Lock#example)** + - : Vous avons écrit une démo de verrouillage de pointeur pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple. Cette démo utilise JavaScript pour dessiner une balle dans un élément `{{htmlelement("canvas")}}`. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. +- **[Démo contentEditable](http://html5demos.com/contenteditable)** + - : Ceci est un exemple qui montre comment contenteditable peut être utilisé pour créer une section de document éditable, et dont l'état est sauvegardé en utilisant [LocalStorage](/fr/docs/Web/API/Web_Storage_API). + +## Tutoriels + +- [Événement tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events) +- [Gérer l'orientation de l'écran](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation) +- [Utiliser le mode plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode) +- [Drag & Drop de multiples éléments](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items) +- [Opérations de glissement](/fr/docs/Web/API/API_HTML_Drag_and_Drop/Op%C3%A9rations_de_glissement) + +## Référence + +- {{domxref("MouseEvent")}} +- {{domxref("KeyboardEvent")}} +- [Événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events) +- [Pointer Lock API](/fr/docs/WebAPI/Pointer_Lock) +- [Screen Orientation API](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation) +- [Fullscreen API](/fr/docs/Web/Guide/DOM/Using_full_screen_mode) +- [Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop) +- [Content Editable](/fr/docs/Web/HTML/Contenu_editable) +- [Keyboard events in Firefox OS TV](https://developer.mozilla.org/en-US/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV) +- [Implementing TV remote control navigation](/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation) diff --git a/files/fr/web/guide/writing_forward-compatible_websites/index.md b/files/fr/web/guide/writing_forward-compatible_websites/index.md index f9a62d2f43..6ac6b5429a 100644 --- a/files/fr/web/guide/writing_forward-compatible_websites/index.md +++ b/files/fr/web/guide/writing_forward-compatible_websites/index.md @@ -7,132 +7,133 @@ tags: translation_of: Web/Guide/Writing_forward-compatible_websites original_slug: Développement_Web/Développer_des_sites_à_compatibilité_descendante --- -<p>Cette page explique comment développer des sites qui continuent de fonctionner au fur et à mesure des mises à jour des navigateurs.</p> +Cette page explique comment développer des sites qui continuent de fonctionner au fur et à mesure des mises à jour des navigateurs. -<p>C'est d'autant plus important pour les intranets et autres sites non-publics; s'il n'est pas possible de voir votre site, il ne nous est pas possible de voir s'il est cassé. Il ne nous est pas toujours possible de suivre tous les sites, mais en suivre autant que possible permet d'en assurer la pérennité.</p> +C'est d'autant plus important pour les intranets et autres sites non-publics; s'il n'est pas possible de voir votre site, il ne nous est pas possible de voir s'il est cassé. Il ne nous est pas toujours possible de suivre tous les sites, mais en suivre autant que possible permet d'en assurer la pérennité. -<h2 id="JavaScript">JavaScript</h2> +## JavaScript -<h3 id="Préfixez_tous_les_accès_à_des_variables_globales_dans_les_attributs_onfoo_par_“window.”">Préfixez tous les accès à des variables globales dans les attributs <code>onfoo</code> par “<code>window.</code>”</h3> +### Préfixez tous les accès à des variables globales dans les attributs `onfoo` par “`window.`” -<div>Quand un attribut de gestion d'évenement (<code>onclick</code>, <code>onmouseover</code>, etc) est utilisé sur un élément HTML, toutes les résolutions de variable dans l'attribut sont d'abord résolues sur l'élément lui-même, puis sur le formulaire contenant l'élément (si c'est un élément de formulaire), puis sur <code>document</code>, puis finalement sur <code>window</code> (là où se trouvent les variables globales que vous avez définies).Par exemple, si vous avez le balisage suivant :</div> +Quand un attribut de gestion d'évenement (`onclick`, `onmouseover`, etc) est utilisé sur un élément HTML, toutes les résolutions de variable dans l'attribut sont d'abord résolues sur l'élément lui-même, puis sur le formulaire contenant l'élément (si c'est un élément de formulaire), puis sur `document`, puis finalement sur `window` (là où se trouvent les variables globales que vous avez définies).Par exemple, si vous avez le balisage suivant : -<pre><div onclick="alert(ownerDocument)">Cliquez moi</div></pre> + <div onclick="alert(ownerDocument)">Cliquez moi</div> -<p>Alors cliquer sur le texte affichera le <code>ownerDocument</code> du <code>div</code>. Il en sera toujours ainsi, même s'il y a une <code>var ownerDocument</code> déclarée dans l'espace de visibilité global.</p> +Alors cliquer sur le texte affichera le `ownerDocument` du `div`. Il en sera toujours ainsi, même s'il y a une `var ownerDocument` déclarée dans l'espace de visibilité global. -<p>Cela signifie qu'à chaque fois que vous accédez à une variable (ou une fonction) globale dans un attribut de gestion d'évenement vous pouvez vous retrouver avec une collision de nom. Il suffit pour cela qu'une nouvelle specification ajoute une nouvelle propriété DOM aux éléments, et que cette propriété porte le même nom que votre variable ou fonction.<br> - Si cela arrive, alors soudainement votre function ne sera plus appellée. Ceci est déjà arrivé de nombreuses fois à de multiples sites durant la phase d'évolution d'HTML5.</p> +Cela signifie qu'à chaque fois que vous accédez à une variable (ou une fonction) globale dans un attribut de gestion d'évenement vous pouvez vous retrouver avec une collision de nom. Il suffit pour cela qu'une nouvelle specification ajoute une nouvelle propriété DOM aux éléments, et que cette propriété porte le même nom que votre variable ou fonction. +Si cela arrive, alors soudainement votre function ne sera plus appellée. Ceci est déjà arrivé de nombreuses fois à de multiples sites durant la phase d'évolution d'HTML5. -<p>Pour éviter ce problème, qualifiez complétement vos variables globales en utilisant <code>window.</code>, comme ceci :</p> +Pour éviter ce problème, qualifiez complétement vos variables globales en utilisant `window.`, comme ceci : -<pre><script> - function nomLocal() { - alert('La fonction nomLocal a été appellée.'); - } -</script> -<div onclick="<strong>window.</strong>nomLocal()">Cliquer ici devrait faire apparaitre un message.<div> -</pre> + <script> + function nomLocal() { + alert('La fonction nomLocal a été appellée.'); + } + </script> + <div onclick="window.nomLocal()">Cliquer ici devrait faire apparaitre un message.<div> -<h3 id="Ne_concatenez_pas_les_scripts_dont_vous_n'avez_pas_le_contrôle.">Ne concatenez pas les scripts dont vous n'avez pas le contrôle.</h3> +### Ne concatenez pas les scripts dont vous n'avez pas le contrôle. -<p>En ECMAScript, la directive "<code>use strict;</code>" s'applique sur la totalité du fichier. Ainsi, ajouter un script qui dépends d'un comportement non-strict à la suite d'un script en mode strict risque fortement de générer des erreurs.</p> +En ECMAScript, la directive "`use strict;`" s'applique sur la totalité du fichier. Ainsi, ajouter un script qui dépends d'un comportement non-strict à la suite d'un script en mode strict risque fortement de générer des erreurs. -<h3 id="Demandez_aux_auteurs_des_bibliothèques_Javascript_que_vous_utilisez_de_suivre_ces_recommandations.">Demandez aux auteurs des bibliothèques Javascript que vous utilisez de suivre ces recommandations.</h3> +### Demandez aux auteurs des bibliothèques Javascript que vous utilisez de suivre ces recommandations. -<p>Suggérez aux développeurs de vos bibliothèques favorites de suivre ces recommendations. S'ils ne le font pas, vous n'avez pas l'assurance que la bibliothèque continue de fonctionner dans le futur. Malheureusement, les bibliothèques suivent rarement ces conseils.</p> +Suggérez aux développeurs de vos bibliothèques favorites de suivre ces recommendations. S'ils ne le font pas, vous n'avez pas l'assurance que la bibliothèque continue de fonctionner dans le futur. Malheureusement, les bibliothèques suivent rarement ces conseils. -<h2 id="Détection">Détection</h2> +## Détection -<h3 id="Détecter_des_fonctionnalités_particulières">Détecter des fonctionnalités particulières</h3> +### Détecter des fonctionnalités particulières -<p>Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur <code>"filter" in body.style</code> s'évalue à <code>true</code>, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet <code>window.event</code> disponible dans les gestionnaires d'évenement. </p> +Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur `"filter" in body.style` s'évalue à `true`, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet `window.event` disponible dans les gestionnaires d'évenement. -<p>De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte <em>pas</em> une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte <code>onload</code> sur les éléments scripts alors cela signifie qu'il ne supportera jamais <code>onreadystatechange</code> sur ces mêmes éléments.</p> +De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte *pas* une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte `onload` sur les éléments scripts alors cela signifie qu'il ne supportera jamais `onreadystatechange` sur ces mêmes éléments. -<p>Les comportement des navigateurs convergent de plus en plus: des fonctionnalités sont ajoutées, supprimées, des bugs sont corrigés. Tout ceci arrive regulièrement et arrivera encore.</p> +Les comportement des navigateurs convergent de plus en plus: des fonctionnalités sont ajoutées, supprimées, des bugs sont corrigés. Tout ceci arrive regulièrement et arrivera encore. -<p>Ne cherchez donc pas à détecter une fonctionnalité ou un objet pour en déduire ensuite que parce qu'elle existe (ou non) alors telle ou telle autre fonctionnalité doit alors aussi exister (ou non).</p> +Ne cherchez donc pas à détecter une fonctionnalité ou un objet pour en déduire ensuite que parce qu'elle existe (ou non) alors telle ou telle autre fonctionnalité doit alors aussi exister (ou non). -<h3 id="Ne_détectez_pas_l'agent_utilisateur">Ne détectez pas l'agent utilisateur</h3> +### Ne détectez pas l'agent utilisateur -<p>Ceci est une sous-catégorie très particulière de l'exemple précédent. Il ne faut pas penser qu'une certaine fonctionnalité (la présence ou non d'une certaine chaine de caractères dans l'agent utilisateur -UA-) implique la présence ou l'absence d'autres fonctionnalités.</p> +Ceci est une sous-catégorie très particulière de l'exemple précédent. Il ne faut pas penser qu'une certaine fonctionnalité (la présence ou non d'une certaine chaine de caractères dans l'agent utilisateur -UA-) implique la présence ou l'absence d'autres fonctionnalités. -<h4 id="Si_vous_devez_détecter_l'agent_utilisateur_alors_ne_détectez_que_pour_les_anciennes_versions.">Si vous devez détecter l'agent utilisateur, alors ne détectez que pour les anciennes versions.</h4> +#### Si vous devez détecter l'agent utilisateur, alors ne détectez que pour les anciennes versions. -<p>Si vous devez <strong>vraiment</strong> détecter l'agent utilisateur, alors ne l'utilisez que pour cibler des versions déjà dépassées.<br> - Tout d'abord, prévoyez toujours un chemin dans votre code pour les navigateurs que vous ne connaissez pas, ainsi que pour les versions courantes et futures des navigateurs avec lesquels vous avez testé votre site. Ensuite si ce chemin par défaut ne fonctionne pas dans certaines anciennes versions de certains navigateurs et uniquement si l'erreur ne peut pas être détectée par l'absence de fonctionnalités utilisées par votre chemin par défaut, alors il est raisonnable d'ajouter des hacks qui ne ciblent que ces anciennes versions de certains navigateurs, en recourant à la détection de l'agent utilisateur.</p> +Si vous devez **vraiment** détecter l'agent utilisateur, alors ne l'utilisez que pour cibler des versions déjà dépassées. +Tout d'abord, prévoyez toujours un chemin dans votre code pour les navigateurs que vous ne connaissez pas, ainsi que pour les versions courantes et futures des navigateurs avec lesquels vous avez testé votre site. Ensuite si ce chemin par défaut ne fonctionne pas dans certaines anciennes versions de certains navigateurs et uniquement si l'erreur ne peut pas être détectée par l'absence de fonctionnalités utilisées par votre chemin par défaut, alors il est raisonnable d'ajouter des hacks qui ne ciblent que ces anciennes versions de certains navigateurs, en recourant à la détection de l'agent utilisateur. -<p>Pour les besoins de ce conseil, considérez que "version courante" signifie la dernière version du navigateur que vous avez testé. Par exemple, si vous avez testé le chemin par défaut de votre code dans Firefox Aurora mais que Firefox Beta et les dernières versions ont un bug qui font planter votre code, alors il est raisonnable de considérer le numero de version de Aurora au moment du test comme étant la "version courante", et considérer la version Beta comme une version "ancienne", même si elle n'est pas encore sortie pour le public.</p> +Pour les besoins de ce conseil, considérez que "version courante" signifie la dernière version du navigateur que vous avez testé. Par exemple, si vous avez testé le chemin par défaut de votre code dans Firefox Aurora mais que Firefox Beta et les dernières versions ont un bug qui font planter votre code, alors il est raisonnable de considérer le numero de version de Aurora au moment du test comme étant la "version courante", et considérer la version Beta comme une version "ancienne", même si elle n'est pas encore sortie pour le public. -<h3 id="Ne_créez_pas_de_chemin_de_code_inutile_pour_une_multitude_de_navigateurs_différents">Ne créez pas de chemin de code inutile pour une multitude de navigateurs différents</h3> +### Ne créez pas de chemin de code inutile pour une multitude de navigateurs différents -<div>N'allez pas créer trop de branches de code différentes, qui s'executent en fonction de l'agent utilisateur ou de la détection de fonctionnalité si vous avez une branche de code qui fonctionne pour tous les navigateurs. Il y a de fortes chances pour que les navigateurs convergent vers un comportement commun, ce qui risque de casser les chemins alternatifs que vous auriez créés pour tel ou tel navigateur.</div> +N'allez pas créer trop de branches de code différentes, qui s'executent en fonction de l'agent utilisateur ou de la détection de fonctionnalité si vous avez une branche de code qui fonctionne pour tous les navigateurs. Il y a de fortes chances pour que les navigateurs convergent vers un comportement commun, ce qui risque de casser les chemins alternatifs que vous auriez créés pour tel ou tel navigateur. -<h2 id="Test">Test</h2> +## Test -<h3 id="Tester_dans_les_navigateurs_principaux">Tester dans les navigateurs principaux</h3> +### Tester dans les navigateurs principaux -<p>Testez votre code au moins sous Firefox, Chrome ou Safari (vu que les deux sont basés sur le même moteur WebKit), Opera et Internet Explorer. Si vous avez suivi le conseil donné précedemment à propos de l'unique branche de code pour toutes les versions de navigateurs (connues et inconnues), tester uniquement cette unique branche de code dans tous les navigateurs rends extremement probable le fait que votre code ne cassera pas dans le futur.</p> +Testez votre code au moins sous Firefox, Chrome ou Safari (vu que les deux sont basés sur le même moteur WebKit), Opera et Internet Explorer. Si vous avez suivi le conseil donné précedemment à propos de l'unique branche de code pour toutes les versions de navigateurs (connues et inconnues), tester uniquement cette unique branche de code dans tous les navigateurs rends extremement probable le fait que votre code ne cassera pas dans le futur. -<p>Parfois, plusieurs navigateurs implementent une certaine fonctionnalité de manière légérement différente. Si vous avez une unique branche de code qui tourne dans tous les navigateurs principaux, cela signifie que vous utilisez soit des fonctionnalités pour lesquelles les navigateurs ont un comportement identiques, ou, s'ils n'ont pas encore convergé vers un seul comportement, votre code fonctionnera quelque soit le comportement final qui sera utilisé par tous.</p> +Parfois, plusieurs navigateurs implementent une certaine fonctionnalité de manière légérement différente. Si vous avez une unique branche de code qui tourne dans tous les navigateurs principaux, cela signifie que vous utilisez soit des fonctionnalités pour lesquelles les navigateurs ont un comportement identiques, ou, s'ils n'ont pas encore convergé vers un seul comportement, votre code fonctionnera quelque soit le comportement final qui sera utilisé par tous. -<h2 id="Prefixes_et_fonctionnalités_propres_à_un_certain_navigateur">Prefixes et fonctionnalités propres à un certain navigateur</h2> +## Prefixes et fonctionnalités propres à un certain navigateur -<h3 id="N'utilisez_pas_de_hack_pour_cibler_la_version_actuelle_ou_une_version_future_d'un_navigateur">N'utilisez pas de hack pour cibler la version actuelle ou une version future d'un navigateur</h3> +### N'utilisez pas de hack pour cibler la version actuelle ou une version future d'un navigateur -<p>Cela reviendrai à supposer que la corrélation actuelle entre plusieurs bugs implique une future corrélation entre ces mêmes bugs. Nous avons vu que cela n'était pas le cas.</p> +Cela reviendrai à supposer que la corrélation actuelle entre plusieurs bugs implique une future corrélation entre ces mêmes bugs. Nous avons vu que cela n'était pas le cas. -<p>Il est par contre acceptable de cibler d'anciennes versions du navigateur si votre hack repose sur un bug présent dans les anciennes versions et corrigé dans les versions actuelles. Une fois que le bug X a été corrigé d'un navigateur, vous pouvez savoir que toutes les versions qui avaient le bug X avaient aussi le bug Y, et vous pourrez ainsi vous servir de X pour cibler des cas particuliers pour le bug Y.</p> +Il est par contre acceptable de cibler d'anciennes versions du navigateur si votre hack repose sur un bug présent dans les anciennes versions et corrigé dans les versions actuelles. Une fois que le bug X a été corrigé d'un navigateur, vous pouvez savoir que toutes les versions qui avaient le bug X avaient aussi le bug Y, et vous pourrez ainsi vous servir de X pour cibler des cas particuliers pour le bug Y. -<p>Dans ce cas, on considère par "actuelles" les versions les plus récentes du navigateur que vous avez testé, comme nous l'avons déjà évoqué dans le cas de la détection de l'agent utilisateur précédemment.</p> +Dans ce cas, on considère par "actuelles" les versions les plus récentes du navigateur que vous avez testé, comme nous l'avons déjà évoqué dans le cas de la détection de l'agent utilisateur précédemment. -<h3 id="Evitez_de_dépendre_de_fonctionnalités_non_standard_ultra_récentes">Evitez de dépendre de fonctionnalités non standard ultra récentes</h3> +### Evitez de dépendre de fonctionnalités non standard ultra récentes -<p>Même si la fonctionnalitée est préfixée, l'utiliser peut être dangereux : au fur et à mesure de l'évolution de la spécification, l'implémentation préfixée du navigateur peut évoluer pour se rapprocher de la spécification. De plus, une fois la fonctionnalité standardisée, les versions prefixées seront vraisemblablement supprimées.</p> +Même si la fonctionnalitée est préfixée, l'utiliser peut être dangereux : au fur et à mesure de l'évolution de la spécification, l'implémentation préfixée du navigateur peut évoluer pour se rapprocher de la spécification. De plus, une fois la fonctionnalité standardisée, les versions prefixées seront vraisemblablement supprimées. -<p>Les fonctionnalités non standard, prefixées, sont fournies par les développeurs de navigateurs pour vous permettre de les expérimenter et d'offrir vos remarques en retour. Elles ne sont pas censées être déployées. Si vous choisissez de les utiliser, préparez-vous à faire des mises à jour régulières de votre site pour rester à flot avec les changements.</p> +Les fonctionnalités non standard, prefixées, sont fournies par les développeurs de navigateurs pour vous permettre de les expérimenter et d'offrir vos remarques en retour. Elles ne sont pas censées être déployées. Si vous choisissez de les utiliser, préparez-vous à faire des mises à jour régulières de votre site pour rester à flot avec les changements. -<p>Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site.</p> +Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site. -<h3 id="N'utilisez_pas_les_versions_préfixées_des_fonctionnalités_à_moins_de_cibler_les_anciennes_versions">N'utilisez pas les versions préfixées des fonctionnalités, à moins de cibler les anciennes versions</h3> +### N'utilisez pas les versions préfixées des fonctionnalités, à moins de cibler les anciennes versions -<p>Le comportement des versions préfixées des fonctionnalités peut changer dans une future version. Néanmoins, dès lors qu'un navigateur est sorti avec une fonctionnalité non-prefixée, vous pouvez utiliser la version préfixée pour cibler les anciennes versions. Assurez-vous de toujours utiliser la version non-préfixée quand celle-ci est disponible.</p> +Le comportement des versions préfixées des fonctionnalités peut changer dans une future version. Néanmoins, dès lors qu'un navigateur est sorti avec une fonctionnalité non-prefixée, vous pouvez utiliser la version préfixée pour cibler les anciennes versions. Assurez-vous de toujours utiliser la version non-préfixée quand celle-ci est disponible. -<p>Voici un exemple, pour un navigateur qui utilise le préfixe <code>-vnd</code> en CSS et qui a sorti une version non-prefixée de la propriété <code>rends-moi-joli</code>, avec un comportement défini pour la valeur "<code>parfois</code>" qui diffère de la valeur préfixée.</p> +Voici un exemple, pour un navigateur qui utilise le préfixe `-vnd` en CSS et qui a sorti une version non-prefixée de la propriété `rends-moi-joli`, avec un comportement défini pour la valeur "`parfois`" qui diffère de la valeur préfixée. -<pre class="brush: html"><style> +```html +<style> .joli-element { -vnd-rends-moi-joli: parfois; rends-moi-joli: parfois; } -</style> -</pre> +</style> +``` -<p>L'ordre des déclarations dans la règle précédente est important : la version non préfixée doit apparaitre en dernier.</p> +L'ordre des déclarations dans la règle précédente est important : la version non préfixée doit apparaitre en dernier. -<h3 id="N'utilisez_pas_les_versions_non_préfixées_des_propriétés_CSS_ou_des_APIs_tant_qu'au_moins_un_navigateur_ne_les_ont_pas_implémentées">N'utilisez pas les versions non préfixées des propriétés CSS ou des APIs tant qu'au moins un navigateur ne les ont pas implémentées</h3> +### N'utilisez pas les versions non préfixées des propriétés CSS ou des APIs tant qu'au moins un navigateur ne les ont pas implémentées -<p>Tant que le support d'une version non préfixée d'une fonctionnalité n'est pas généralisé auprès des navigateurs, son comportement peut encore changer de manière radicale. Plus particulièrement, n'utilisez pas les versions non préfixées si aucun navigateur ne les implémente. Vous ne pouvez même pas être sûr que la syntaxe de la version finale sera la même que la syntaxe utilisée dans l'une des version préfixées.</p> +Tant que le support d'une version non préfixée d'une fonctionnalité n'est pas généralisé auprès des navigateurs, son comportement peut encore changer de manière radicale. Plus particulièrement, n'utilisez pas les versions non préfixées si aucun navigateur ne les implémente. Vous ne pouvez même pas être sûr que la syntaxe de la version finale sera la même que la syntaxe utilisée dans l'une des version préfixées. -<h2 id="Hygiène_de_code">Hygiène de code</h2> +## Hygiène de code -<h3 id="Evitez_les_>_manquants">Evitez les > manquants</h3> +### Evitez les > manquants -<p>Passer votre code au validateur est un bon moyen de s'assurer de cela. Mais même si votre site ne valide pas complétement, vous devriez vous assurer que tous vos caractères > sont présents.<br> - S'ils manquent, cela peut vous amener à des situations où un nom de balise est interprété comme un attribut d'une balise précédente. Cela peut sembler fonctionner pendant quelques temps, mais finira par casser si une spécification future défini un sens à cet attribut. </p> +Passer votre code au validateur est un bon moyen de s'assurer de cela. Mais même si votre site ne valide pas complétement, vous devriez vous assurer que tous vos caractères > sont présents. +S'ils manquent, cela peut vous amener à des situations où un nom de balise est interprété comme un attribut d'une balise précédente. Cela peut sembler fonctionner pendant quelques temps, mais finira par casser si une spécification future défini un sens à cet attribut. -<p>Voici un exemple qui fonctionne dans les navigateurs ne possédant pas le support du HTML5, mais est cassé dans un navigateur le supportant :</p> +Voici un exemple qui fonctionne dans les navigateurs ne possédant pas le support du HTML5, mais est cassé dans un navigateur le supportant : -<pre class="brush: html"><form action="http://www.exemple.com"> - <input type="submit" value="Soumettre le formulaire" -</form> -</pre> +```html +<form action="http://www.exemple.com"> + <input type="submit" value="Soumettre le formulaire" +</form> +``` -<p>à cause du > manquant sur la balise <code>input</code>.</p> +à cause du > manquant sur la balise `input`. -<h3 id="Ne_laissez_pas_de_tests_qui_ne_fonctionnent_pas_dans_votre_code">Ne laissez pas de tests qui ne fonctionnent pas dans votre code</h3> +### Ne laissez pas de tests qui ne fonctionnent pas dans votre code -<p>Si vous essayez d'utiliser une propriété CSS, mais que celle-ci n'a pas d'effet, supprimez-la. Elle pourrait se mettre à avoir un effet que vous n'attendiez pas du tout dans une version future.</p> +Si vous essayez d'utiliser une propriété CSS, mais que celle-ci n'a pas d'effet, supprimez-la. Elle pourrait se mettre à avoir un effet que vous n'attendiez pas du tout dans une version future. -<p>{{ languages( {"en":"en/Web_development/Writing_forward-compatible_websites" } ) }}</p> +{{ languages( {"en":"en/Web_development/Writing_forward-compatible_websites" } ) }} |