diff options
Diffstat (limited to 'files/fr/learn')
219 files changed, 5870 insertions, 6625 deletions
diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html index 54a4415545..4a9aea28fd 100644 --- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html @@ -14,105 +14,96 @@ original_slug: Apprendre/a11y/Accessibility_troubleshooting <p>{{LearnSidebar}}<br> {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> -<p><span class="tlid-translation translation"><span title="">Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.</span></span></p> +<p>Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><span class="tlid-translation translation"><span title="">Conditions préalables:</span></span></th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la</span></span> <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td> + <th scope="row">Conditions préalables:</th> + <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la <a href="/fr/docs/Learn/Accessibility">previous articles in the course</a>.</td> </tr> <tr> - <th scope="row"><span class="tlid-translation translation">Objectif:</span></th> - <td><span class="tlid-translation translation"><span title="">Tester les connaissances de base sur les principes fondamentaux d'accessibilité.</span></span></td> + <th scope="row">Objectif:</th> + <td>Tester les connaissances de base sur les principes fondamentaux d'accessibilité.</td> </tr> </tbody> </table> -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Point_de_départ"><span class="tlid-translation translation"><span title="">Point de départ</span></span></h2> +<h2 id="Point_de_départ">Point de départ</h2> -<div class="result-shield-container tlid-copy-target"> </div> -</div> -</div> -</div> -<p><span class="tlid-translation translation"><span title="">Pour lancer cette évaluation, vous devez aller chercher le </span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. <span class="tlid-translation translation"><span title="">Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local</span></span></p> +<p>Pour lancer cette évaluation, vous devez aller chercher le <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local</p> -<p><span class="tlid-translation translation"><span title="">Le site d'évaluation terminé devrait ressembler à ceci:</span></span></p> +<p>Le site d'évaluation terminé devrait ressembler à ceci:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="assessment-site-finished.png"></p> -<p><span class="tlid-translation translation"><span title="">Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement.</span> <span title="">Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!</span></span></p> +<p>Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!</p> -<h2 id="Résumé_du_projet"><span class="tlid-translation translation"><span title="">Résumé du projet</span></span></h2> +<h2 id="Résumé_du_projet">Résumé du projet</h2> -<p><span class="tlid-translation translation"><span title="">Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours.</span> <span title="">Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.</span></span></p> +<p>Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.</p> -<div class="text-wrap tlid-copy-target"> -<h3 class="result-shield-container tlid-copy-target" id="Couleur"><span class="tlid-translation translation"><span title="">Couleur</span></span></h3> -</div> +<h3 id="Couleur">Couleur</h3> -<p><span class="tlid-translation translation"><span title="">Le texte est difficile à lire en raison du schéma de couleurs actuel.</span> <span title="">Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?</span></span></p> +<p>Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?</p> <h3 id="Semantic_HTML">Semantic HTML</h3> <ol> - <li><span class="tlid-translation translation"><span title="">Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?</span></span></li> - <li><span class="tlid-translation translation"><span title="">La partie du menu de navigation du site </span></span> ( <code><div class="nav"></div></code>) <span class="tlid-translation translation"><span title="">pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié.</span> <span title="">Lequel devrait-il être mis à jour?</span> <span title="">Faites la mise à jour.</span></span></li> + <li>Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.</li> + <li>Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?</li> + <li>La partie du menu de navigation du site ( <code><div class="nav"></div></code>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.</li> </ol> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques.</span> <span title="">Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.</span></span></p> +<p><strong>Note :</strong> Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.</p> </div> -<h3 id="Les_images"><font>Les images</font></h3> +<h3 id="Les_images">Les images</h3> -<p><span class="tlid-translation translation"><span title="">Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran.</span> <span title="">Pouvez-vous réparer ceci?</span></span></p> +<p>Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?</p> <h3 id="Le_lecteur_audio">Le lecteur audio</h3> <ol> - <li><span class="tlid-translation translation"><span title="">Le lecteur </span></span> <font> <code><audio></code> </font> <span class="tlid-translation translation"><span title="">n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?</span></span></li> - <li><span class="tlid-translation translation"><span title="">Le lecteur</span></span> <font> <code><audio></code> </font> <span class="tlid-translation translation"><span title="">n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5.</span> <span title="">Comment pouvez-vous leur permettre d'accéder encore à l'audio?</span></span></li> + <li>Le lecteur <code><audio></code> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?</li> + <li>Le lecteur <code><audio></code> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?</li> </ol> <h3 id="Les_formulaires">Les formulaires</h3> <ol> - <li><span class="tlid-translation translation"><span title="">L'élément</span></span> <font> <code><input></code> </font> <span class="tlid-translation translation"><span title="">dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants.</span> <span title="">Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran?</span></span> <font>?</font></li> - <li><span class="tlid-translation translation"><span title="">Les deux éléments</span></span> <font> <code><input></code> </font> <span class="tlid-translation translation"><span title="">du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir?</span> <span title="">Notez que vous devrez également mettre à jour certaines règles CSS.</span></span></li> + <li>L'élément <code><input></code> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?</li> + <li>Les deux éléments <code><input></code> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.</li> </ol> -<h3 id="Le_contrôle_afficher_masquer_les_commentaires"><span class="tlid-translation translation"><span title="">Le contrôle afficher / masquer les commentaires</span></span></h3> +<h3 id="Le_contrôle_afficher_masquer_les_commentaires">Le contrôle afficher / masquer les commentaires</h3> -<p><span class="tlid-translation translation"><span title="">Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier.</span> <span title="">Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?</span></span></p> +<p>Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?</p> -<h3 id="La_table"><font>La table</font></h3> +<h3 id="La_table">La table</h3> -<p><span class="tlid-translation translation"><span title="">Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre.</span> <span title="">Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?</span></span></p> +<p>Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?</p> -<h3 id="Autres_considérations"><span class="tlid-translation translation"><span title="">Autres considérations?</span></span></h3> +<h3 id="Autres_considérations">Autres considérations?</h3> -<p><span class="tlid-translation translation"><span title="">Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?</span></span></p> +<p>Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?</p> -<h2 id="Évaluation"><span class="tlid-translation translation"><span title="">Évaluation</span></span></h2> +<h2 id="Évaluation">Évaluation</h2> -<p><span class="tlid-translation translation"><span title="">Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige.</span> <span title="">Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la</span></span><font> </font><a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a><font>, </font> <span class="tlid-translation translation"><span title="">ou sur le canal IRC</span></span> <font> <a href="irc://irc.mozilla.org/mdn">#mdn</a> </font> <span class="tlid-translation translation"><span title="">sur </span></span> <font> <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. </font> <span class="tlid-translation translation"><span title="">Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!</span></span></p> +<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a>, ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!</p> -<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> +<p>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> -<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2> +<h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> </ul> diff --git a/files/fr/learn/accessibility/css_and_javascript/index.html b/files/fr/learn/accessibility/css_and_javascript/index.html index 06b093fa74..43455aa4be 100644 --- a/files/fr/learn/accessibility/css_and_javascript/index.html +++ b/files/fr/learn/accessibility/css_and_javascript/index.html @@ -19,51 +19,51 @@ original_slug: Apprendre/a11y/CSS_and_JavaScript <div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés.</span> <span title="">Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.</span></span></p> +<p>CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de</span></span> <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td> + <td>Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td> </tr> <tr> - <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th> - <td><span class="tlid-translation translation"><span title="">Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.</span></span></td> + <th scope="row">Objectif :</th> + <td>Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.</td> </tr> </tbody> </table> -<h2 id="CSS_et_JavaScript_des_technologies_accessibles"><span class="tlid-translation translation"><span title="">CSS et JavaScript, des technologies accessibles ?</span></span></h2> +<h2 id="CSS_et_JavaScript_des_technologies_accessibles">CSS et JavaScript, des technologies accessibles ?</h2> -<p><span class="tlid-translation translation"><span title="">CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation.</span> <span title="">En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.</span></span></p> +<p>CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation. En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.</p> <h2 id="CSS">CSS</h2> -<p><span class="tlid-translation translation"><span title="">Commençons par regarder le CSS.</span></span></p> +<p>Commençons par regarder le CSS.</p> -<h3 id="Sémantique_correcte_et_attentes_de_lutilisateur"><span class="tlid-translation translation"><span title="">Sémantique correcte et attentes de l'utilisateur</span></span></h3> +<h3 id="Sémantique_correcte_et_attentes_de_lutilisateur">Sémantique correcte et attentes de l'utilisateur</h3> -<p><span class="tlid-translation translation"><span title="">Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire.</span> <span title="">Comme nous l’avons souvent mentionné dans notre article </span></span> <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title="">vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié.</span> <span title="">Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés.</span> <span title="">L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs </span></span> — <span class="tlid-translation translation"><span title="">les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.</span></span></p> +<p>Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a>, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.</p> -<p><span class="tlid-translation translation"><span title="">Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu.</span> <span title="">De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.</span></span></p> +<p>Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.</p> -<p><span class="tlid-translation translation"><span title="">La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive.</span> <span title="">Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.</span></span></p> +<p>La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.</p> -<h4 id="Structure_du_contenu_du_texte_standard"><span class="tlid-translation translation"><span title="">Structure du contenu du texte "standard"</span></span></h4> +<h4 id="Structure_du_contenu_du_texte_standard">Structure du contenu du texte "standard"</h4> -<p><span class="tlid-translation translation"><span title="">Titres, paragraphes, listes</span></span> — <span class="tlid-translation translation"><span title="">le contenu de texte de base de votre page :</span></span></p> +<p>Titres, paragraphes, listes — le contenu de texte de base de votre page :</p> -<pre class="brush: html"><h1><span class="tlid-translation translation"><span title="">En-têtes</span></span></h1> +<pre class="brush: html"><h1>En-têtes</h1> -<p><span class="tlid-translation translation"><span title="">paragraphes</span></span></p> +<p>paragraphes</p> <ul> - <li><span class="tlid-translation translation"><span title="">Ma liste</span></span></li> - <li><span class="tlid-translation translation"><span title="">a deux éléments</span></span>.</li> + <li>Ma liste</li> + <li>a deux éléments.</li> </ul></pre> -<p><span class="tlid-translation translation"><span title="">Quelques styles CSS typiques pourraient ressembler à ceci :</span></span></p> +<p>Quelques styles CSS typiques pourraient ressembler à ceci :</p> <pre class="brush: css">h1 { font-size: 5rem; @@ -74,56 +74,54 @@ p, li { font-size: 1.6rem; }</pre> -<p><span class="tlid-translation translation"><span title="">Vous devriez </span></span>:</p> +<p>Vous devriez :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Sélectionnez une taille de police</span></span>, une hauteur de ligne, un<span class="tlid-translation translation"><span title=""> espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte</span></span> principal<span class="tlid-translation translation"><span title="">.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Vos listes devraient ressembler à des listes</span></span>.</li> + <li>Sélectionnez une taille de police, une hauteur de ligne, un espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.</li> + <li>Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal.</li> + <li>Vos listes devraient ressembler à des listes.</li> <li>La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a> et <a href="/fr/docs/Learn/CSS/Styling_text"> Introduction au style de texte</a> <span class="tlid-translation translation"><span title="">pour plus d'informations.</span></span></p> +<p>Voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a> et <a href="/fr/docs/Learn/CSS/Styling_text"> Introduction au style de texte</a> pour plus d'informations.</p> -<h4 id="Texte_mis_en_emphase"><span class="tlid-translation translation"><span title="">Texte mis en emphase</span></span></h4> +<h4 id="Texte_mis_en_emphase">Texte mis en emphase</h4> -<p><span class="tlid-translation translation"><span title="">On met en avant une portion de texte grâce au balises <em>inline</em> <code><em></code> :</span></span></p> +<p>On met en avant une portion de texte grâce au balises <em>inline</em> <code><em></code> :</p> -<pre class="brush: html"><p> <span class="tlid-translation translation"><span title="">L'eau est</span></span> <em> <span class="tlid-translation translation"><span title="">très chaud</span></span>e </em>.</p> +<pre class="brush: html"><p> L'eau est <em> très chaude </em>.</p> -<p> <span class="tlid-translation translation"><span title="">Les gouttelettes d’eau accumulées sur les surfaces s’appellent</span></span> <strong>condensation</strong>.</p></pre> +<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent <strong>condensation</strong>.</p></pre> -<p><span class="tlid-translation translation"><span title="">Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :</span></span></p> +<p>Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :</p> <pre class="brush: css">strong, em { color: #a60000; }</pre> -<p><span class="tlid-translation translation"><span title="">Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative.</span> <span title="">Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion.</span> <span title="">Pour mettre des contenus en avant de manière efficace, voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Emphasis_and_importance">Fondamentaux du texte HTML</a>.</p> +<p>Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion. Pour mettre des contenus en avant de manière efficace, voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Emphasis_and_importance">Fondamentaux du texte HTML</a>.</p> -<h4 id="Les_abréviations"><span class="tlid-translation translation"><span title="">Les abréviations</span></span></h4> +<h4 id="Les_abréviations">Les abréviations</h4> -<p><span class="tlid-translation translation"><span title="">Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :</span></span></p> +<p>Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :</p> -<pre class="brush: html"><p> <span class="tlid-translation translation"><span title="">Le contenu web est marqué à l'aide de</span></span> <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> +<pre class="brush: html"><p> Le contenu web est marqué à l'aide de <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> -<p><span class="tlid-translation translation"><span title="">Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments</span></span> :</p> +<p>Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :</p> <pre class="brush: css">abbr { color: #a60000; }</pre> -<p><span class="tlid-translation translation"><span title="">Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue.</span> <span title="">Pour plus d'informations sur les abréviations, voir </span></span><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">Abréviations</a>.</p> +<p>Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">Abréviations</a>.</p> -<div class="text-wrap tlid-copy-target"> -<h4 class="result-shield-container tlid-copy-target" id="Liens"><span class="tlid-translation translation"><span title="">Liens</span></span></h4> -</div> +<h4 id="Liens">Liens</h4> -<p><span class="tlid-translation translation"><span title="">Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web :</span></span></p> +<p>Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web :</p> -<pre class="brush: html"><p> <span class="tlid-translation translation"><span title="">Visiter la</span></span> <a href="https://www.mozilla.org"> <span class="tlid-translation translation"><span title="">Page d'accueil de Mozilla</span></span> </a>.</p></pre> +<pre class="brush: html"><p> Visiter la <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p></pre> -<p><span class="tlid-translation translation"><span title="">Un style de lien très simple est présenté ci-dessous :</span></span></p> +<p>Un style de lien très simple est présenté ci-dessous :</p> <pre class="brush: css">a { color: #ff0000; @@ -139,124 +137,124 @@ a:active { background-color: #a60000; }</pre> -<p><span class="tlid-translation translation"><span title="">Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge)</span><span title="">.</span> <span title="">De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé.</span> <span title="">L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :</span></span></p> +<p>Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge). De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> +<p><img alt="" src="focus-highlight-firefox.png"></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> +<p><img alt="" src="focus-highlight-chrome.png"></p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens.</span> <span title="">Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour</span></span> — <span class="tlid-translation translation"><span title="">ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier</span></span>.</p> +<p>Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.</p> -<h4 id="Éléments_form"><span class="tlid-translation translation"><span title="">Éléments form</span></span></h4> +<h4 id="Éléments_form">Éléments form</h4> -<p><span class="tlid-translation translation"><span title="">Éléments permettant aux utilisateurs de saisir des données sur des sites web :</span></span></p> +<p>Éléments permettant aux utilisateurs de saisir des données sur des sites web :</p> <pre class="brush: html"><div> - <label for="name"><span class="tlid-translation translation"><span title="">Entrez votre nom</span></span></label> + <label for="name">Entrez votre nom</label> <input type="text" id="name" name="name"> </div></pre> -<p><span class="tlid-translation translation"><span title="">Vous pouvez voir de bons exemples de CSS dans notre exemple</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/form-css.html">en direct</a>).</p> +<p>Vous pouvez voir de bons exemples de CSS dans notre exemple <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/form-css.html">en direct</a>).</p> -<p><span class="tlid-translation translation"><span title="">La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.</span></span></p> +<p>La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.</p> -<p><span class="tlid-translation translation"><span title="">Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus).</span> <span title="">Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.</span></span></p> +<p>Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.</p> -<h4 id="Tableaux"><span class="tlid-translation translation"><span title="">Tableaux</span></span></h4> +<h4 id="Tableaux">Tableaux</h4> -<p><span class="tlid-translation translation"><span title="">Tableaux pour la présentation des données tabulées</span></span>.</p> +<p>Tableaux pour la présentation des données tabulées.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez voir un bon exemple simple de </span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/table-css.html">en direct</a>).</p> +<p>Vous pouvez voir un bon exemple simple de <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/table-css.html">en direct</a>).</p> -<p><span class="tlid-translation translation"><span title="">En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse.</span> <span title="">Il est judicieux de vous assurer que les en-têtes de table se démarquent </span></span> (<span class="tlid-translation translation"><span title="">normalement en gras</span></span>), <span class="tlid-translation translation"><span title="">et de zébrer les lignes via le pseudo-sélecteur <code>:nth-child(n) </code>pour faciliter la lecture.</span></span></p> +<p>En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur <code>:nth-child(n) </code>pour faciliter la lecture.</p> -<h3 id="Couleur_et_contraste_de_couleur"><span class="tlid-translation translation"><span title="">Couleur et contraste de couleur</span></span></h3> +<h3 id="Couleur_et_contraste_de_couleur">Couleur et contraste de couleur</h3> -<p><span class="tlid-translation translation"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte </span></span><span class="tlid-translation translation"><span title="">contraste bien avec la couleur de fond</span></span>. <span class="tlid-translation translation"><span title="">Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.</span></span></p> +<p>Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.</p> -<p><span class="tlid-translation translation"><span title="">Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes.</span> <span title="">Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier.</span> <span title="">Par exemple, le</span></span><span class="tlid-translation translation"><span title=""> </span></span><a href="https://webaim.org/resources/contrastchecker/">vérificateur de contraste de couleur</a> du WebAIM est <span class="tlid-translation translation"><span title="">simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.</span></span></p> +<p>Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le <a href="https://webaim.org/resources/contrastchecker/">vérificateur de contraste de couleur</a> du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil</span></span>.</p> +<p><strong>Note :</strong> Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.</p> </div> -<p><span class="tlid-translation translation"><span title="">Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur.</span> <span title="">Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.</span></span></p> +<p>Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.</p> -<h3 id="Cacher_des_choses"><span class="tlid-translation translation"><span title="">Cacher des choses</span></span></h3> +<h3 id="Cacher_des_choses">Cacher des choses</h3> -<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps.</span> <span title="">Par exemple, dans notre </span></span><a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Exemple de boîte d'information à onglets</a> (voir notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>), <span class="tlid-translation translation"><span title="">nous avons trois panneaux d’informations, mais nous les</span></span> <a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">positionnons</a> <span class="tlid-translation translation"><span title="">les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi</span> <span title="">accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner)</span></span>.</p> +<p>Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Exemple de boîte d'information à onglets</a> (voir notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>), nous avons trois panneaux d’informations, mais nous les <a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">positionnons</a> les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> +<p><img alt="" src="tabbed-info-box.png"></p> -<p><span class="tlid-translation translation"><span title="">Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre.</span> <span title="">Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.</span></span></p> +<p>Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre. Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.</p> -<p><span class="tlid-translation translation"><span title="">Par contre, vous ne devriez pas utiliser</span></span> {{cssxref("visibility")}}<code>:hidden</code> ou {{cssxref("display")}}<code>:none</code>, <span class="tlid-translation translation"><span title="">car ils masquent le contenu des lecteurs d'écran s</span><span title="">auf si vous souhaitez que ce contenu leur soit masqué.</span></span></p> +<p>Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}<code>:hidden</code> ou {{cssxref("display")}}<code>:none</code>, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.</p> <div class="note"> -<p><strong>Note </strong>: <span class="subtitle"><a href="https://webaim.org/techniques/css/invisiblecontent/">Contenu invisible juste pour les utilisateurs de lecteur d'écran</a> </span> <span class="tlid-translation translation"><span title="">contient beaucoup plus de détails utiles concernant ce sujet.</span></span></p> +<p><strong>Note :</strong> <a href="https://webaim.org/techniques/css/invisiblecontent/">Contenu invisible juste pour les utilisateurs de lecteur d'écran</a> contient beaucoup plus de détails utiles concernant ce sujet.</p> </div> -<h3 id="Accepter_que_les_utilisateurs_puissent_remplacer_les_styles"><span class="tlid-translation translation"><span title="">Accepter que les utilisateurs puissent remplacer les styles</span></span></h3> +<h3 id="Accepter_que_les_utilisateurs_puissent_remplacer_les_styles">Accepter que les utilisateurs puissent remplacer les styles</h3> -<h4 id="Acceptez_que_les_utilisateurs_puissent_remplacer_vos_styles"><span class="tlid-translation translation"><span title="">Acceptez que les utilisateurs puissent remplacer vos style</span></span>s</h4> +<h4 id="Acceptez_que_les_utilisateurs_puissent_remplacer_vos_styles">Acceptez que les utilisateurs puissent remplacer vos styles</h4> -<p><span class="tlid-translation translation"><span title="">Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :</span></span></p> +<p>Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Voir </span></span><a href="/fr/docs/Outils/Éditeur_de_style">Éditeur de Style</a> <span class="tlid-translation translation"><span title="">pour un guide utile expliquant comment le faire manuellement dans Firefox, et </span></span><a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer</a> <span class="tlid-translation translation"><span title="">par Adrian Gordon pour</span> <span title="">les instructions IE équivalentes (EN).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour</span></span> <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, et <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> + <li>Voir <a href="/fr/docs/Outils/Éditeur_de_style">Éditeur de Style</a> pour un guide utile expliquant comment le faire manuellement dans Firefox, et <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer</a> par Adrian Gordon pour les instructions IE équivalentes (EN).</li> + <li>Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, et <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Les utilisateurs peuvent le faire pour diverses raisons.</span> <span title="">Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire.</span> <span title="">Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception.</span> <span title="">Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.</span></span></p> +<p>Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.</p> <h2 id="JavaScript">JavaScript</h2> -<p><span class="tlid-translation translation"><span title="">JavaScript peut également compromettre l’accessibilité, selon son utilisation.</span></span></p> +<p>JavaScript peut également compromettre l’accessibilité, selon son utilisation.</p> -<p><span class="tlid-translation translation"><span title="">Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière.</span> <span title="">Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.</span></span></p> +<p>Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière. Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.</p> -<p><span class="tlid-translation translation"><span title="">Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions.</span> <span title="">Comme nous l'avons vu dans notre article</span></span> <a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title=""> les principales considérations sont les suivantes :</span></span></p> +<p>Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article <a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a>, les principales considérations sont les suivantes :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Bonne sémantique : Utiliser le bon élément pour le bon travail.</span> <span title="">Par exemple, assurez-vous que vous utilisez les en-têtes et les paragraphes, et les éléments</span></span> {{htmlelement("button")}} et {{htmlelement("a")}}.</li> - <li><span class="tlid-translation translation"><span title="">S'assurer que le contenu est disponible sous forme de texte, soit directement sous forme de contenu textuel, soit par un libellé</span></span> <span class="tlid-translation translation"><span title="">pour des éléments</span></span> <code><form></code> soit par <a href="/fr/docs/Apprendre/a11y/HTML#Alternatives_textuelles">textes par défaut</a> <span class="tlid-translation translation"><span title="">pour les images.</span></span></li> + <li>Bonne sémantique : Utiliser le bon élément pour le bon travail. Par exemple, assurez-vous que vous utilisez les en-têtes et les paragraphes, et les éléments {{htmlelement("button")}} et {{htmlelement("a")}}.</li> + <li>S'assurer que le contenu est disponible sous forme de texte, soit directement sous forme de contenu textuel, soit par un libellé pour des éléments <code><form></code> soit par <a href="/fr/docs/Apprendre/a11y/HTML#Alternatives_textuelles">textes par défaut</a> pour les images.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir </span></span><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>. <span class="tlid-translation translation"><span title="">Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé.</span> <span title="">Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran.</span> <span title="">Le prochain article couvrira également cela en détail.</span></span></p> +<p>Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir <a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>. Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé. Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran. Le prochain article couvrira également cela en détail.</p> -<p><span class="tlid-translation translation"><span title="">Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de </span></span><a href="/fr/docs/Web/API/WebGL_API">L'API WebGL : graphismes 2D et 3D pour le web</a> <span class="tlid-translation translation"><span title="">sera rendu sur un élément</span></span> {{htmlelement("canvas")}}, <span class="tlid-translation translation"><span title="">qui n'a pour l'instant aucune possibilité de fournir</span> <span title="">textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants.</span> <span title="">On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des</span></span> <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> faite <span class="tlid-translation translation"><span title="">pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.</span></span></p> +<p>Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de <a href="/fr/docs/Web/API/WebGL_API">L'API WebGL : graphismes 2D et 3D pour le web</a> sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des <a href="/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> faite pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.</p> -<h3 id="Le_problème_avec_trop_de_JavaScript"><span class="tlid-translation translation"><span title="">Le problème avec trop de JavaScript</span></span></h3> +<h3 id="Le_problème_avec_trop_de_JavaScript">Le problème avec trop de JavaScript</h3> -<p><span class="tlid-translation translation"><span title="">Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript.</span> <span title="">Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé</span><span title="">.</span></span></p> +<p>Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé.</p> -<p><span class="tlid-translation translation"><span title="">En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail !</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait.</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte.</span> <span title="">Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.</span></span></p> +<p>En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail ! Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.</p> -<h3 id="Le_garder_discret"><span class="tlid-translation translation"><span title="">Le garder discret</span></span></h3> +<h3 id="Le_garder_discret">Le garder discret</h3> -<p><span class="tlid-translation translation"><span title="">Lors de la création de votre contenu, gardez à l'esprit </span></span> <span class="tlid-translation translation"><span title="">l'idée d'un</span></span> <strong><span class="tlid-translation translation"><span title="">JavaScript</span></span> discret, en retrait</strong><span class="tlid-translation translation"><span title="">.</span> <span title="">JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible.</span> La règle est d'utiliser <span title="">lorsque cela est possible les fonctionnalités intégrées au navigateur.</span></span></p> +<p>Lors de la création de votre contenu, gardez à l'esprit l'idée d'un <strong>JavaScript discret, en retrait</strong>. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.</p> -<p><span class="tlid-translation translation"><span title="">De bons exemples d'utilisation de JavaScript discret incluent :</span></span></p> +<p>De bons exemples d'utilisation de JavaScript discret incluent :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données.</span> <span title="">S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Fournir des commandes personnalisées pour les </span></span> <code><video></code> <span class="tlid-translation translation"><span title="">HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur</span></span> <code><video></code> <span class="tlid-translation translation"><span title="">par défaut ne sont pas des touches</span> <span title="">accessibles dans la plupart des navigateurs).</span></span></li> + <li>Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données. S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.</li> + <li>Fournir des commandes personnalisées pour les <code><video></code> HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur <code><video></code> par défaut ne sont pas des touches accessibles dans la plupart des navigateurs).</li> </ul> -<p id="Client-side_form_validation"><span class="tlid-translation translation"><span title="">Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (<span class="tlid-translation translation"><span title="">voir aussi la </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">démonstration en direct</a>). <span class="tlid-translation translation"><span title="">Ici, vous verrez un formulaire simple.</span> <span title="">Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.</span></span></p> +<p>Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (voir aussi la <a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">démonstration en direct</a>). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.</p> -<p><span class="tlid-translation translation"><span title="">Ce type de validation de formulaire est discret </span></span>— <span class="tlid-translation translation"><span title="">vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client</span><span title=""> (en désactivant JavaScript dans le navigateur, par exemple).</span> <span title="">La validation côté client est toujours très utile pour signaler les erreurs </span></span>—<span class="tlid-translation translation"><span title=""> les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page.</span> <span title="">C'est un avantage certain en termes de convivialité.</span></span></p> +<p>Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La validation côté serveur n'a pas été implémentée dans cette simple démonstration</span></span>.</p> +<p><strong>Note :</strong> La validation côté serveur n'a pas été implémentée dans cette simple démonstration.</p> </div> -<p><span class="tlid-translation translation"><span title="">Nous avons également rendu cette validation de formulaire assez accessible.</span> <span title="">Nous avons utilisé des éléments</span></span> {{htmlelement("label")}} <span class="tlid-translation translation"><span title="">pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :</span></span></p> +<p>Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :</p> -<pre class="brush: html"><label for="name"> <span class="tlid-translation translation"><span title="">Entrez votre nom</span></span> :</label> +<pre class="brush: html"><label for="name"> Entrez votre nom :</label> <input type="text" name="name" id="name"></pre> -<p><span class="tlid-translation translation"><span title="">Nous ne faisons la validation qu'une fois le formulaire soumis </span></span>—<span class="tlid-translation translation"><span title=""> ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :</span></span></p> +<p>Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :</p> <pre class="brush: js">form.onsubmit = validate; @@ -276,65 +274,65 @@ function validate(e) { }</pre> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci</span></span>.</p> +<p><strong>Note :</strong> Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.</p> </div> -<p><span class="tlid-translation translation"><span title="">La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres).</span> <span title="">Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie</span></span> (<code>if(testItem.input.value === '')</code>).</p> +<p>La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (<code>if(testItem.input.value === '')</code>).</p> -<p><span class="tlid-translation translation"><span title="">Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis.</span> <span title="">S'il y a des erreurs </span></span> (<code>if(errorList.innerHTML !== '')</code>) <span class="tlid-translation translation"><span title="">nous arrêtons la soumission du formulaire</span></span> ( <span class="tlid-translation translation"><span title="">à l'aide de</span></span><a href="/fr/docs/Web/API/Event/preventDefault"> event.preventDefault()</a>), <span class="tlid-translation translation"><span title="">et affichons tous les messages d'erreur créés (voir ci-dessous).</span> <span title="">Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.</span></span></p> +<p>Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (<code>if(errorList.innerHTML !== '')</code>) nous arrêtons la soumission du formulaire ( à l'aide de<a href="/fr/docs/Web/API/Event/preventDefault"> event.preventDefault()</a>), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.</p> -<p><span class="tlid-translation translation"><span title="">Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste</span></span> <code>errorList</code>.</p> +<p>Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste <code>errorList</code>.</p> <pre class="brush: js">function createLink(testItem) { - var listItem = document.createElement('li'); - var anchor = document.createElement('a'); - anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; - anchor.href = '#' + testItem.input.name; - anchor.onclick = function() { - testItem.input.focus(); - }; - listItem.appendChild(anchor); - errorList.appendChild(listItem); + var listItem = document.createElement('li'); + var anchor = document.createElement('a'); + anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); }</pre> -<p><span class="tlid-translation translation"><span title="">Chaque lien a un double objectif </span></span>—<span class="tlid-translation translation"><span title=""> il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.</span></span></p> +<p>Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La partie </span></span> <code>focus()</code> <span class="tlid-translation translation"><span title="">de cet exemple est un peu délicate.</span> <span title="">Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc </span></span> <code>onclick</code>/<code>focus()</code>. <span class="tlid-translation translation"><span title="">Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc</span></span> <code>onclick</code>/<code>focus()</code> <span class="tlid-translation translation"><span title="">pour le focaliser.</span> <span title="">Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien).</span> <span title="">Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir</span></span> {{bug(277178)}}).</p> +<p><strong>Note :</strong> La partie <code>focus()</code> de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc <code>onclick</code>/<code>focus()</code>. Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc <code>onclick</code>/<code>focus()</code> pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).</p> </div> -<p><span class="tlid-translation translation"><span title="">De plus, le champ</span></span> <code>errorField</code> <span class="tlid-translation translation"><span title="">est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question</span> <span title="">en remontant au début de la page</span></span></p> +<p>De plus, le champ <code>errorField</code> est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page</p> -<p><span class="tlid-translation translation"><span title="">Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :</span></span></p> +<p>Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :</p> <pre><div class="errors" role="alert" aria-relevant="all"> <ul> </ul> </div></pre> -<p><span class="tlid-translation translation"><span title="">Nous expliquerons ces attributs dans notre prochain article, qui couvre</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> <span class="tlid-translation translation"><span title="">de manière beaucoup plus détaillée.</span></span></p> +<p>Nous expliquerons ces attributs dans notre prochain article, qui couvre <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> de manière beaucoup plus détaillée.</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs</span></span> <code>required</code>, <code>min</code>/<code>minlength</code>, et <code>max</code>/<code>maxlength</code> (voir {{htmlelement("input")}} <span class="tlid-translation translation"><span title="">référence d'élément pour plus d'informations).</span> <span title="">Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).</span></span></p> +<p><strong>Note :</strong> Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs <code>required</code>, <code>min</code>/<code>minlength</code>, et <code>max</code>/<code>maxlength</code> (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).</p> </div> <div class="note"> -<p><strong>Note </strong>: WebAIM's <a href="https://webaim.org/techniques/formvalidation/">Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)</a> <span class="tlid-translation translation"><span title="">fournit des informations supplémentaires utiles sur la validation de formulaire accessible.</span></span></p> +<p><strong>Note :</strong> WebAIM's <a href="https://webaim.org/techniques/formvalidation/">Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)</a> fournit des informations supplémentaires utiles sur la validation de formulaire accessible.</p> </div> -<h3 id="Autres_problèmes_daccessibilité_JavaScript"><span class="tlid-translation translation"><span title="">Autres problèmes d'accessibilité JavaScript</span></span></h3> +<h3 id="Autres_problèmes_daccessibilité_JavaScript">Autres problèmes d'accessibilité JavaScript</h3> -<p><span class="tlid-translation translation"><span title="">Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité.</span> Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente<span title="">.</span></span></p> +<p>Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.</p> -<h4 id="Événements_spécifiques_à_la_souris"><span class="tlid-translation translation"><span title="">Événements spécifiques à la souris</span></span></h4> +<h4 id="Événements_spécifiques_à_la_souris">Événements spécifiques à la souris</h4> -<p><span class="tlid-translation translation"><span title="">Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements.</span> <span title="">Certains événements peuvent avoir des problèmes d'accessibilité.</span> <span title="">L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que </span></span> <a href="/fr/docs/Web/Events/mouseover"> mouseover</a>, <a href="/fr/docs/Web/Events/mouseout"> mouseout</a>, <a href="/fr/docs/Web/Events/dblclick"> dblclick</a>, <span class="tlid-translation translation"><span title="">etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.</span></span></p> +<p>Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que <a href="/fr/docs/Web/Events/mouseover"> mouseover</a>, <a href="/fr/docs/Web/Events/mouseout"> mouseout</a>, <a href="/fr/docs/Web/Events/dblclick"> dblclick</a>, etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.</p> -<p><span class="tlid-translation translation"><span title="">Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique)</span></span> —<a href="/fr/docs/Web/Events/focus">focus</a> et <a href="/fr/docs/Web/Events/blur">blur (event)</a> <span class="tlid-translation translation"><span title="">fourniraient une accessibilité aux utilisateurs de clavier.</span></span> </p> +<p>Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —<a href="/fr/docs/Web/Events/focus">focus</a> et <a href="/fr/docs/Web/Events/blur">blur (event)</a> fourniraient une accessibilité aux utilisateurs de clavier. </p> -<p><span class="tlid-translation translation"><span title="">Regardons un exemple qui illustre cela.</span> <span title="">Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.</span></span></p> +<p>Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.</p> -<p><span class="tlid-translation translation"><span title="">Nous avons créé un exemple très simple, que vous pouvez trouver sur </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">Exemple d'événements de souris et de clavier</a> (<span class="tlid-translation translation"><span title="">voir aussi le</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">code source</a>). <span class="tlid-translation translation"><span title="">Le code comporte deux fonctions qui affichent et cachent l'image agrandie ;</span> <span title="">ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :</span></span></p> +<p>Nous avons créé un exemple très simple, que vous pouvez trouver sur <a href="https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">Exemple d'événements de souris et de clavier</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">code source</a>). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :</p> <pre class="brush: js">imgThumb.onmouseover = showImg; imgThumb.onmouseout = hideImg; @@ -342,28 +340,28 @@ imgThumb.onmouseout = hideImg; imgThumb.onfocus = showImg; imgThumb.onblur = hideImg;</pre> -<p><span class="tlid-translation translation"><span title="">Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement.</span> <span title="">Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête).</span> <span title="">Cela peut être fait en tapant sur l'image, car nous avons inclus</span></span> <code>tabindex="0"</code> <span class="tlid-translation translation"><span title="">dessus.</span></span></p> +<p>Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus <code>tabindex="0"</code> dessus.</p> -<p><span class="tlid-translation translation"><span title="">L'événement </span></span><a href="/fr/docs/Web/API/Element/click_event">click</a><span class="tlid-translation translation"><span title=""> est intéressant </span></span>—<span class="tlid-translation translation"><span title=""> cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement </span></span><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">element.onclick</a> <span class="tlid-translation translation"><span title="">après avoir pressé <kbd>Entrée</kbd> sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile</span><span title="">.</span> <span title="">Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir</span></span> <a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>).</p> +<p>L'événement <a href="/fr/docs/Web/API/Element/click_event">click</a> est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">element.onclick</a> après avoir pressé <kbd>Entrée</kbd> sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir <a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>).</p> -<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.</span></span></p> +<p>Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.</p> -<p><span class="tlid-translation translation"><span title="">Ensuite, WAI-ARIA !</span></span></p> +<p>Ensuite, WAI-ARIA !</p> <div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> <div> -<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2> +<h2 id="Dans_ce_module">Dans ce module</h2> <ul> <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li> <li><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">HTML : une bonne base pour l'accessibilité</a></li> <li><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li> </ul> </div> diff --git a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html index 392a00d82b..e81880d90d 100644 --- a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html +++ b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html @@ -15,10 +15,9 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>L'objectif de ce test de connaissances est d'évaluer si vous maîtrisez les <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">meilleures pratiques d'accessibilité en CSS et en JavaScript</a>.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices suivants.<br><br> - Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section <a href="#assessment_or_further_help">Évaluation ou aide supplémentaire</a> en bas de la page.</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices suivants.</p> + <p>Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section <a href="#assessment_or_further_help">Évaluation ou aide supplémentaire</a> en bas de la page.</p> </div> <h2 id="css_accessibility_1">Accessibilité en CSS - Exercice 1</h2> @@ -31,8 +30,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}}</p> -<div class="notecard note"> - <p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="css_accessibility_2">Accessibilité en CSS - Exercice 2</h2> @@ -50,8 +49,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}}</p> -<div class="notecard note"> - <p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y2-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y2-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="javascript_accessibility_1">Accessibilité en JavaScript - Exercice 1</h2> @@ -60,8 +59,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>Ce n'est hélas pas très accessible — dans l'état actuel des choses vous pouvez seulement utiliser la souris. Nous aimerions que vous ajoutiez du code HTML et JavaScript de façon à rendre l'application également utilisable avec un clavier.</p> -<div class="notecard note"> - <p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/js/js/js1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/js/js/js1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="assessment_or_further_help">Évaluation ou aide supplémentaire</h2> diff --git a/files/fr/learn/accessibility/html/index.html b/files/fr/learn/accessibility/html/index.html index 70e128d05d..354bf4075f 100644 --- a/files/fr/learn/accessibility/html/index.html +++ b/files/fr/learn/accessibility/html/index.html @@ -21,11 +21,11 @@ original_slug: Apprendre/a11y/HTML <p>Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, compréhension basique de HTML (voir<a href="/fr/Apprendre/HTML/Introduction_à_HTML"> </a><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">I</a><a href="/fr/Apprendre/HTML/Introduction_à_HTML">ntroduction à HTML</a>), et compréhension de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td> + <td>Compétences informatiques de base, compréhension basique de HTML (voir<a href="/fr/Apprendre/HTML/Introduction_à_HTML"> </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">I</a><a href="/fr/Apprendre/HTML/Introduction_à_HTML">ntroduction à HTML</a>), et compréhension de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td> </tr> <tr> <th scope="row">Objectif :</th> @@ -40,11 +40,11 @@ original_slug: Apprendre/a11y/HTML <p>Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :</p> -<pre class="brush: html notranslate"><div>Lire la vidéo</div></pre> +<pre class="brush: html"><div>Lire la vidéo</div></pre> <p>Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :</p> -<pre class="brush: html notranslate"><button>Lire la vidéo</button></pre> +<pre class="brush: html"><button>Lire la vidéo</button></pre> <p>Non seulement <code><button></code> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.</p> @@ -59,7 +59,7 @@ original_slug: Apprendre/a11y/HTML <p>Continuons et jetons un œil au HTML accessible dans le détail.</p> <div class="note"> -<p><strong>Note </strong>: C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders">gérer les problèmes courants d'accessibilité</a> pour plus de détails.</p> +<p><strong>Note :</strong> C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders">gérer les problèmes courants d'accessibilité</a> pour plus de détails.</p> </div> <h2 id="Une_bonne_sémantique">Une bonne sémantique</h2> @@ -76,7 +76,7 @@ original_slug: Apprendre/a11y/HTML <p>L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :</p> -<pre class="brush: html example-good line-numbers language-html notranslate"><h1>Mon titre</h1> +<pre class="brush: html example-good"><h1>Mon titre</h1> <p>Ceci est la premère section de mon document.</p> @@ -107,7 +107,7 @@ original_slug: Apprendre/a11y/HTML <p>Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :</p> -<pre class="brush: html example-bad line-numbers language-html notranslate"><font size="7">Mon titre</font> +<pre class="brush: html example-bad"><font size="7">Mon titre</font> <br><br> Ceci est la première section de mon document. <br><br> @@ -147,7 +147,7 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus int <p>Essayez notre exemple <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, qui ressemble à quelque chose comme ça :</p> -<pre class="brush: html notranslate"><table width="1200"> +<pre class="brush: html"><table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> @@ -212,194 +212,194 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus int </tr> </table></pre> -<p><span class="tlid-translation translation"><span title="">Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données).</span> <span title="">Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.</span></span></p> +<p>Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.</p> -<p><span class="tlid-translation translation"><span title="">Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage,</span> <span title="">design manquant de souplesse).</span> <span title="">Ne les utilisez pas !</span></span></p> +<p>Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un</span></span> <a href="https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">exemple plus moderne de structure de site Web</a>, <span class="tlid-translation translation"><span title="">qui pourrait ressembler à ceci :</span></span></p> +<p>Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un <a href="https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">exemple plus moderne de structure de site Web</a>, qui pourrait ressembler à ceci :</p> -<pre class="brush: html notranslate"><header> - <h1><span class="tlid-translation translation"><span title="">Entête</span></span></h1> +<pre class="brush: html"><header> + <h1>Entête</h1> </header> <nav> - <!-- <span class="tlid-translation translation"><span title="">navigation principale ici</span></span> --> + <!-- navigation principale ici --> </nav> -<!-- <span class="tlid-translation translation"><span title="">Voici le contenu principal de notre page</span></span> --> +<!-- Voici le contenu principal de notre page --> <main> - <!-- <span class="tlid-translation translation"><span title="">Il contient un article</span></span> --> + <!-- Il contient un article --> <article> - <h2><span class="tlid-translation translation"><span title="">Intitulé de l'article</span></span></h2> + <h2>Intitulé de l'article</h2> - <!-- <span class="tlid-translation translation"><span title="">contenu de l'article ici</span></span> --> + <!-- contenu de l'article ici --> </article> <aside> - <h2><span class="tlid-translation translation"><span title="">en relation</span></span></h2> + <h2>en relation</h2> - <!-- <span class="tlid-translation translation"><span title="">à part le contenu ici</span></span> --> + <!-- à part le contenu ici --> </aside> </main> -<!-- <span class="tlid-translation translation"><span title="">Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web.</span></span> --> +<!-- Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. --> <footer> - <!-- <span class="tlid-translation translation"><span title="">contenu du pied de page ici</span></span> --> + <!-- contenu du pied de page ici --> </footer></pre> -<p><span class="tlid-translation translation"><span title="">Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse.</span> <span title="">Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).</span></span></p> +<p>Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).</p> -<p><span class="tlid-translation translation"><span title="">Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir </span></span><a href="/fr/docs/Web/HTML/Element#Content_sectioning">Référence des éléments HTML</a>). <span class="tlid-translation translation"><span title="">Vous pouvez créer une disposition en utilisant uniquement des éléments</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">imbriqués, mais il est préférable d'utiliser</span> des <span title="">éléments de sectionnement appropriés pour envelopper votre navigation principale</span></span> ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), <span class="tlid-translation translation"><span title="">en répétant des unités de contenu</span></span> ({{htmlelement("article")}}), <span class="tlid-translation translation"><span title=""> etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir</span></span> <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5</a> <span class="tlid-translation translation"><span title="">pour une idée de la prise en charge du lecteur d’écran</span></span>).</p> +<p>Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir <a href="/fr/docs/Web/HTML/Element#Content_sectioning">Référence des éléments HTML</a>). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5</a> pour une idée de la prise en charge du lecteur d’écran).</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer.</span> <span title="">les utilisateurs de lecteur d’écran qui se liront auront du sens.</span></span></p> +<p><strong>Note :</strong> Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.</p> </div> -<h3 id="Contrôles_de_linterface_utilisateur"><span class="tlid-translation translation"><span title="">Contrôles de l'interface utilisateur</span></span></h3> +<h3 id="Contrôles_de_linterface_utilisateur">Contrôles de l'interface utilisateur</h3> -<p><span class="tlid-translation translation"><span title="">Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire.</span> <span title="">Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles.</span> <span title="">Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.</span></span></p> +<p>Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.</p> -<p><span class="tlid-translation translation"><span title="">L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier.</span> <span title="">Vous pouvez essayer ceci en utilisant notre exemple </span></span><a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilité du clavier natif</a> (<span class="tlid-translation translation"><span title="">voir le</span></span> <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">code source</a>) – <span class="tlid-translation translation"><span title="">ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation;</span> <span title="">après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ;</span> <span title="">les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.</span></span></p> +<p>L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilité du clavier natif</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">code source</a>) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> +<p><img alt="" src="button-focused-unfocused.png"></p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents,</span> <span title="">par exemple, l'élément</span></span> {{htmlelement("select")}} <span class="tlid-translation translation"><span title="">peut avoir ses options affichées et alterner entre les touches fléchées haut et bas).</span></span> </p> +<p>Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). </p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles.</span> <span title="">Voir</span></span> comment <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility">gérer les problèmes courants d'accessibilité</a> <span class="tlid-translation translation"><span title="">pour plus de détails.</span></span></p> +<p><strong>Note :</strong> Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility">gérer les problèmes courants d'accessibilité</a> pour plus de détails.</p> </div> -<p><span class="tlid-translation translation"><span title="">Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés,</span></span> par exemple :</p> +<p>Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :</p> -<pre class="brush: html example-good notranslate"><h1><span class="tlid-translation translation"><span title="">Liens</span></span></h1> +<pre class="brush: html example-good"><h1>Liens</h1> -<p> <span class="tlid-translation translation"><span title="">Ceci est un lien vers</span></span> <a href="https://www.mozilla.org">Mozilla</a>.</p> +<p> Ceci est un lien vers <a href="https://www.mozilla.org">Mozilla</a>.</p> -<p> <span class="tlid-translation translation"><span title="">Un autre lien, pour</span></span> <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> +<p> Un autre lien, pour <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> -<h2><span class="tlid-translation translation"><span title="">Boutons</span></span></h2> +<h2>Boutons</h2> <p> - <button data-message="This is from the first button"><span class="tlid-translation translation"><span title="">Cliquez moi</span></span>!</button> - <button data-message="This is from the second button"> <span class="tlid-translation translation"><span title="">Cliquez moi aussi</span></span> !</button> - <button data-message="This is from the third button"><span class="tlid-translation translation"><span title="">Et moi</span></span>!</button> + <button data-message="This is from the first button">Cliquez moi!</button> + <button data-message="This is from the second button"> Cliquez moi aussi !</button> + <button data-message="This is from the third button">Et moi!</button> </p> <h2>formulaire</h2> <form> <div> - <label for="name"> <span class="tlid-translation translation"><span title="">Remplis ton nom</span></span> :</label> + <label for="name"> Remplis ton nom :</label> <input type="text" id="name" name="name"> </div> <div> - <label for="age"> <span class="tlid-translation translation"><span title="">Entrez votre âge</span></span> :</label> + <label for="age"> Entrez votre âge :</label> <input type="text" id="age" name="age"> </div> <div> - <label for="mood"> <span class="tlid-translation translation"><span title="">Choisissez votre humeur</span></span> :</label> + <label for="mood"> Choisissez votre humeur :</label> <select id="mood" name="mood"> - <option><span class="tlid-translation translation">Heureux</span></option> - <option> <span class="tlid-translation translation"><span title="">Triste</span></span> </option> - <option> <span class="tlid-translation translation">Fâché</span> </option> - <option> <span class="tlid-translation translation">Préoccupé</span> </option> + <option>Heureux</option> + <option> Triste </option> + <option> Fâché </option> + <option> Préoccupé </option> </select> </div> </form></pre> -<p><span class="tlid-translation translation"><span title="">Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément </span></span> {{htmlelement("label")}} <span class="tlid-translation translation"><span title="">pour les contrôles de formulaire).</span></span></p> +<p>Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément {{htmlelement("label")}} pour les contrôles de formulaire).</p> -<p><span class="tlid-translation translation"><span title="">Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML.</span> <span title="">Par exemple, vous voyez parfois des boutons balisés en utilisant</span></span> {{htmlelement("div")}}s, <span class="tlid-translation translation"><span title=""> par exemple :</span></span></p> +<p>Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s, par exemple :</p> -<pre class="brush: html example-bad notranslate"><div data-message="This is from the first button"> <span class="tlid-translation translation"><span title="">Cliquez-moi!</span></span></div> -<div data-message="This is from the second button"> <span class="tlid-translation translation"><span title=""> Cliquez moi aussi!</span></span></div> -<div data-message="This is from the third button"> <span class="tlid-translation translation"><span title="">Et moi!</span></span></div></pre> +<pre class="brush: html example-bad"><div data-message="This is from the first button"> Cliquez-moi!</div> +<div data-message="This is from the second button"> Cliquez moi aussi!</div> +<div data-message="This is from the third button"> Et moi!</div></pre> -<p><span class="tlid-translation translation"><span title="">Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments</span></span> {{htmlelement("button")}}. <span class="tlid-translation translation"><span title="">De plus, vous n’obtenez aucun des styles CSS par défaut</span> que <span title="">les boutons ont.</span></span></p> +<p>Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.</p> -<h4 id="Remettre_laccessibilité_au_clavier"><span class="tlid-translation translation"><span title="">Remettre l'accessibilité au clavier</span></span></h4> +<h4 id="Remettre_laccessibilité_au_clavier">Remettre l'accessibilité au clavier</h4> -<p><span class="tlid-translation translation"><span title="">Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple</span></span> <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> – <span class="tlid-translation translation"><span title=""> voir également le</span></span> <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). <span class="tlid-translation translation"><span title="">Ici, nous avons donné à nos faux boutons <code><div></code> la possibilité</span> <span title="">se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut</span></span> <code>tabindex="0"</code> :</p> +<p>Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> – voir également le <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). Ici, nous avons donné à nos faux boutons <code><div></code> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut <code>tabindex="0"</code> :</p> -<pre class="brush: html notranslate"><div data-message="This is from the first button" tabindex="0"> <span class="tlid-translation translation"><span title="">Cliquez-moi!</span></span></div> -<div data-message="This is from the second button" tabindex="0"> <span class="tlid-translation translation"><span title="">Cliquez moi aussi!</span></span></div> -<div data-message="This is from the third button" tabindex="0"> <span class="tlid-translation translation"><span title="">Et moi!</span></span></div></pre> +<pre class="brush: html"><div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div> +<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div> +<div data-message="This is from the third button" tabindex="0"> Et moi!</div></pre> -<p><span class="tlid-translation translation"><span title="">Fondamentalement, l'attribut</span></span> {{htmlattrxref("tabindex")}} <span class="tlid-translation translation"><span title="">est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut.</span> <span title="">C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure.</span> <span title="">Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique.</span> <span title="">Il y a deux autres options pour</span></span> <code>tabindex</code> :</p> +<p>Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour <code>tabindex</code> :</p> <ul> - <li><code>tabindex="0"</code> – <span class="tlid-translation translation"><span title="">comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir.</span> <span title="">C’est la valeur la plus utile de</span></span> <code>tabindex</code>.</li> - <li><code>tabindex="-1"</code> – <span class="tlid-translation translation"><span title="">cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex.</span> <span title="">via JavaScript, ou en tant que cible de liens.</span></span></li> + <li><code>tabindex="0"</code> – comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir. C’est la valeur la plus utile de <code>tabindex</code>.</li> + <li><code>tabindex="-1"</code> – cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex. via JavaScript, ou en tant que cible de liens.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour.</span> <span title="">Pour ce faire, nous avons dû ajouter le bout de code JavaScript</span></span> suivant :</p> +<p>Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document.onkeydown = function(e) { +<pre class="brush: js">document.onkeydown = function(e) { if(e.keyCode === 13) { // The Enter/Return key document.activeElement.onclick(e); } -}</code></pre> +}</pre> -<p><span class="tlid-translation translation"><span title="">Ici, nous ajoutons un écouteur à l’objet</span></span> <code class="language-js">d<code>ocument</code></code> <span class="tlid-translation translation"><span title="">pour détecter le moment où un bouton a été appuyé sur le clavier.</span> <span title="">Nous vérifions quel bouton a été pressé via la propriété</span></span> <code class="language-js"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code></code> <span class="tlid-translation translation"><span title="">de l'objet événement;</span> <span title="">s'il s'agit du code clé qui correspond</span></span> <code class="language-js"> Return/Enter</code>, <span class="tlid-translation translation"><span title="">nous exécutons la fonction stockée dans le gestionnaire du bouton </span></span> <code class="language-js"> <code>onclick</code></code> <span class="tlid-translation translation"><span title=""> à l'aide de </span></span><code class="language-js"><code>document.activeElement.onclick()</code></code><span class="tlid-translation translation"><span title="">. </span></span><code class="language-js"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement">activeElement</a></code></code><span class="tlid-translation translation"><span title=""> nous donne l'élément qui est actuellement ciblé sur la page.</span></span></p> +<p>Ici, nous ajoutons un écouteur à l’objet <code>document</code> pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété <code><a href="/fr/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton <code>onclick</code> à l'aide de <code>document.activeElement.onclick()</code>. <code><a href="/fr/docs/Web/API/Document/activeElement">activeElement</a></code> nous donne l'élément qui est actuellement ciblé sur la page.</p> <div class="note"> -<p><span class="tlid-translation translation"><span title=""><strong>Note :</strong> N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), </span></span><code class="language-js"><code>addEventListener</code></code><span class="tlid-translation translation"><span title=""> ne fonctionnera pas.</span></span></p> +<p><strong>Note :</strong> N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), <code>addEventListener</code> ne fonctionnera pas.</p> </div> -<p><span class="tlid-translation translation"><span title="">C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes.</span></span> <span class="tlid-translation translation"><span title=""><strong>Mieux vaut utiliser le bon élément pour le bon travail en premier lieu</strong>.</span></span></p> +<p>C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. <strong>Mieux vaut utiliser le bon élément pour le bon travail en premier lieu</strong>.</p> -<h4 id="Étiquettes_de_texte_significatives"><span class="tlid-translation translation"><span title="">Étiquettes de texte significatives</span></span></h4> +<h4 id="Étiquettes_de_texte_significatives">Étiquettes de texte significatives</h4> -<p><span class="tlid-translation translation"><span title="">Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.</span></span></p> +<p>Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.</p> -<p><span class="tlid-translation translation"><span title="">Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs.</span> <span title="">Ne vous contentez pas d'utiliser </span></span>« <span class="tlid-translation translation"><span title="">Cliquez ici</span></span> »<span class="tlid-translation translation"><span title=""> pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire.</span> <span title="">La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.</span></span></p> +<p>Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.</p> -<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></code></p> +<p><img alt="" src="voiceover-formcontrols.png"></p> -<p><span class="tlid-translation translation"><span title="">Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :</span></span></p> +<p>Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :</p> -<pre class="brush: html example-good notranslate"><code class="language-js"><p></code> <span class="tlid-translation translation"><span title="">Les baleines sont vraiment des créatures géniales</span></span> <code class="language-js">. <a href="whales.html"></code> <span class="tlid-translation translation"><span title="">En savoir plus sur les baleines</span></span> <code class="language-js"></a>.</p></code></pre> +<pre class="brush: html example-good"><p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p></pre> -<p><span class="tlid-translation translation"><span title="">c'est un mauvais texte du lien :</span></span></p> +<p>c'est un mauvais texte du lien :</p> -<pre class="brush: html example-bad notranslate"><code class="language-js"><p></code> <span class="tlid-translation translation"><span title="">Les baleines sont des créatures vraiment impressionnantes.</span> <span title="">Pour en savoir plus sur les baleines,</span></span> <code class="language-js"> <a href="whales.html"></code><span class="tlid-translation translation"><span title="">cliquez ici</span></span><code class="language-js"></a>.</p></code> +<pre class="brush: html example-bad"><p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines, <a href="whales.html">cliquez ici</a>.</p> </pre> <div class="note"> -<p><code class="language-js"><strong>Note</strong>:</code><span class="tlid-translation translation"><span title="">Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur</span></span> la <code class="language-js"><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">création d'hyperliens</a></code>. <span class="tlid-translation translation"><span title="">Vous pouvez également voir quelques bons et mauvais exemples dans</span></span> <code class="language-js"><a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html">Bons-liens.html</a> et <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html">Mauvais-liens.html</a>.</code></p> +<p><strong>Note :</strong> Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">création d'hyperliens</a>. Vous pouvez également voir quelques bons et mauvais exemples dans <a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html">Bons-liens.html</a> et <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html">Mauvais-liens.html</a>.</p> </div> -<p><span class="tlid-translation translation"><span title="">Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire.</span> <span title="">Ce qui suit semble être un exemple assez raisonnable :</span></span></p> +<p>Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :</p> -<pre class="brush: html example-bad notranslate"> <span class="tlid-translation translation"><span title="">Remplis ton nom</span></span> <code class="language-js">: <input type="text" id="name" name="name"></code></pre> +<pre class="brush: html example-bad"> Remplis ton nom : <input type="text" id="name" name="name"></pre> -<p><span class="tlid-translation translation"><span title="">Cependant, ce n'est pas très utile pour les utilisateurs handicapés.</span> <span title="">Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas.</span> <span title="">Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type </span></span>« <span class="tlid-translation translation"><span title="">éditer le texte".</span></span></p> +<p>Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".</p> -<p><span class="tlid-translation translation"><span title="">Ce qui suit est un exemple bien meilleur :</span></span></p> +<p>Ce qui suit est un exemple bien meilleur :</p> -<pre class="brush: html example-good notranslate"><code class="language-js"><div> - <label for="name"></code><span class="tlid-translation translation"><span title="">Entrez votre nom</span></span><code class="language-js">:</label> +<pre class="brush: html example-good"><div> + <label for="name">Entrez votre nom:</label> <input type="text" id="name" name="name"> -</div></code></pre> +</div></pre> -<p><span class="tlid-translation translation"><span title="">Avec le code comme celui-ci, le label sera clairement associée à input;</span> <span title="">la description ressemblera davantage à "Entrez votre nom: éditez le texte".</span></span></p> +<p>Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".</p> -<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></code></p> +<p><img alt="" src="voiceover-good-form-label.png"></p> -<p><span class="tlid-translation translation"><span title="">En prime, dans la plupart des navigateurs, associer a un</span></span> <code class="language-js">label</code><span class="tlid-translation translation"><span title=""> à une</span></span> <code class="language-js"> form input</code> <span class="tlid-translation translation"><span title="">signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément</span></span> <code class="language-js"> label</code>. <span class="tlid-translation translation"><span title="">Cela donne à </span></span><code class="language-js">input</code><span class="tlid-translation translation"><span title=""> une zone de résultats plus grande, ce qui facilite la sélection</span></span></p> +<p>En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong>:</code><span class="tlid-translation translation"><span title="">vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans</span></span> <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html">exemple de bon formulaire</a><span class="tlid-translation translation"><span title=""> et </span></span><a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html">exemple de mauvais formulaire</a><span class="tlid-translation translation"><span title="">.</span></span></p> +<p><strong>Note :</strong> vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html">exemple de bon formulaire</a> et <a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html">exemple de mauvais formulaire</a>.</p> </div> -<h2 id="Tableaux_de_données_accessibles"><span class="tlid-translation translation"><span title="">Tableaux de données accessibles</span></span></h2> +<h2 id="Tableaux_de_données_accessibles">Tableaux de données accessibles</h2> -<p><span class="tlid-translation translation"><span title="">Une table de données de base peut être écrite avec un balisage très simple, par exemple :</span></span></p> +<p>Une table de données de base peut être écrite avec un balisage très simple, par exemple :</p> -<pre class="brush: html notranslate"><code class="language-js"><table> +<pre class="brush: html"><table> <tr> <td>Nom</td> <td>Age</td> @@ -420,112 +420,110 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus int <td>5</td> <td>Femelle</td> </tr> -</table></code></pre> +</table></pre> -<p><span class="tlid-translation translation"><span title="">Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données.</span> <span title="">Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).</span></span></p> +<p>Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).</p> -<p><span class="tlid-translation translation"><span title="">Regardez maintenant notre </span></span> tableau d'exemple sur les groupes punk – <span class="tlid-translation translation"><span title="">vous pouvez voir quelques aides à l'accessibilité au travail ici :</span></span></p> +<p>Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Les en-têtes de tableau sont définis à l'aide d'éléments</span></span><code class="language-js"> {{htmlelement("th")}} — </code> <span class="tlid-translation translation"><span title="">vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut</span></span> <code class="language-js"> <code>scope</code></code><span class="tlid-translation translation"><span title="">. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples</span></span></li> - <li><span class="tlid-translation translation"><span title="">L'élément </span></span><code class="language-js">{{htmlelement("caption")}}</code><span class="tlid-translation translation"><span title=""> et l'attribut summary </span></span> <code class="language-js"> <code><table></code></code> <span class="tlid-translation translation"><span title="">effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table.</span> </span> <code class="language-js"> <code><caption></code></code><span class="tlid-translation translation"><span title=""> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile.</span> <span title="">Vous n'avez pas vraiment besoin des deux.</span></span></li> + <li>Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} — vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut <code>scope</code>. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples</li> + <li>L'élément {{htmlelement("caption")}} et l'attribut summary <code><table></code> effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table. <code><caption></code> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux.</li> </ul> <div class="note"> -<p><code class="language-js"><strong>Note</strong> :</code> <span class="tlid-translation translation"><span title="">voir notre article</span></span> <code class="language-js"><a href="/fr/docs/Apprendre/HTML/Tableaux/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a> </code> <span class="tlid-translation translation"><span title="">pour plus de détails sur les tables de données accessibles.</span></span></p> +<p><strong>Note :</strong> voir notre article <a href="/fr/docs/Apprendre/HTML/Tableaux/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a> pour plus de détails sur les tables de données accessibles.</p> </div> -<h2 id="Alternatives_textuelles"><span class="tlid-translation translation"><span title="">Alternatives textuelles</span></span></h2> +<h2 id="Alternatives_textuelles">Alternatives textuelles</h2> -<p><span class="tlid-translation translation"><span title="">Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants.</span> <span title="">Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble</span></span> <code class="language-js">{{htmlelement("img")}}</code><span class="tlid-translation translation"><span title="">.</span></span></p> +<p>Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.</p> -<p><span class="tlid-translation translation"><span title="">Nous avons un exemple simple écrit, </span></span><code class="language-js"><a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a></code><span class="tlid-translation translation"><span title="">, comporte quatre copies de la même image :</span></span></p> +<p>Nous avons un exemple simple écrit, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, comporte quatre copies de la même image :</p> -<pre class="notranslate"><code class="language-js"><img src="dinosaur.png"> +<pre><img src="dinosaur.png"> <img src="dinosaur.png" - alt="</code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">."> + alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."> <img src="dinosaur.png" - alt="</code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">." - title="</code> <span class="tlid-translation translation"><span title="">Le dinosaure rouge de Mozilla</span></span> <code class="language-js">"> + alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées." + title="Le dinosaure rouge de Mozilla "> <img src="dinosaur.png" aria-labelledby="dino-label"> -<p id="dino-label"></code> <span class="tlid-translation translation"><span title="">Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">.</p> -</code></pre> +<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p> +</pre> -<p><span class="tlid-translation translation"><span title="">La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit </span></span>« <span class="tlid-translation translation"><span title="">/dinosaur.png, image</span></span> »<span class="tlid-translation translation"><span title="">.</span> <span title="">Il lit le nom du fichier pour essayer de fournir de l'aide.</span> <span title="">Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.</span></span></p> +<p>La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong>:</code> <span class="tlid-translation translation"><span title="">c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder.</span> <span title="">Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller.</span> <span title="">Juste ne le faite pas !</span></span></p> +<p><strong>Note :</strong> c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !</p> </div> -<p><span class="tlid-translation translation"><span title="">Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt </span></span>– « <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées.</span></span> »</p> +<p>Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »</p> -<p><span class="tlid-translation translation"><span title="">Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé</span></span> <code class="language-js"><strong>alt text</strong></code> <span class="tlid-translation translation"><span title="">n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">chaque fois que possible.</span> <span title="">Notez que le contenu de l'attribut</span></span> <code class="language-js"> <code>alt</code></code><span class="tlid-translation translation"><span title=""> doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement.</span> <span title="">Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.</span></span></p> +<p>Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé <strong>alt text</strong> n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs <code>alt</code> chaque fois que possible. Notez que le contenu de l'attribut <code>alt</code> doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.</p> -<p><span class="tlid-translation translation"><span title="">Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification.</span> <span title="">S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.</span></span></p> +<p>Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.</p> <div class="note"> -<p><code class="language-js"><strong>Note </strong>:</code> <span class="tlid-translation translation"><span title="">Lisez </span></span><code class="language-js"><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a> et<a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web"> Images adaptatives</a></code> <span class="tlid-translation translation"><span title="">pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.</span></span></p> +<p><strong>Note :</strong> Lisez <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a> et<a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web"> Images adaptatives</a> pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.</p> </div> -<p><span class="tlid-translation translation"><span title="">Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus.</span> <span title="">Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier.</span> <span title="">En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.</span></span></p> +<p>Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.</p> -<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></code></p> +<p><img alt="" src="title-attribute.png"></p> -<p><span class="tlid-translation translation"><span title="">Jetons un autre coup d'oeil à la quatrième méthode :</span></span></p> +<p>Jetons un autre coup d'oeil à la quatrième méthode :</p> -<pre class="brush: html notranslate"><code class="language-js"><img src="dinosaur.png" aria-labelledby="dino-label"> +<pre class="brush: html"><img src="dinosaur.png" aria-labelledby="dino-label"> -<p id="dino-label"></code> <span class="tlid-translation translation"><span title="">Le Tyrannosaure rouge Mozilla</span></span> <code class="language-js"> ... </p></code></pre> +<p id="dino-label"> Le Tyrannosaure rouge Mozilla ... </p></pre> -<p><span class="tlid-translation translation"><span title="">Dans ce cas, nous n'utilisons pas du tout l'attribut </span></span><code class="language-js"><code>alt</code></code> <span class="tlid-translation translation"><span title="">Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un</span></span> <code class="language-js"> <code>id</code></code><span class="tlid-translation translation"><span title=""> puis nous avons utilisé l'attribut</span></span> <code class="language-js"> <code>aria-labelledby</code></code> <span class="tlid-translation translation"><span title="">pour :</span> <span title="">faire référence à cela</span></span> <code class="language-js"> <code>id</code></code><span class="tlid-translation translation"><span title="">, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt</span></span> <code class="language-js"> text/label</code><span class="tlid-translation translation"><span title=""> pour cette image.</span> <span title="">Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec </span></span><code class="language-js"><code>alt</code></code><span class="tlid-translation translation"><span title="">.</span></span></p> +<p>Dans ce cas, nous n'utilisons pas du tout l'attribut <code>alt</code> Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un <code>id</code> puis nous avons utilisé l'attribut <code>aria-labelledby</code> pour : faire référence à cela <code>id</code>, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec <code>alt</code>.</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong>: <code>aria-labelledby</code></code> <span class="tlid-translation translation"><span title="">fait partie de la spécification </span></span><code class="language-js"><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI ARIA</a></code><span class="tlid-translation translation"><span title="">, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant.</span> <span title="">Pour en savoir plus sur son fonctionnement, lisez notre article</span></span> <code class="language-js"><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basic</a></code><span class="tlid-translation translation"><span title="">.</span></span></p> +<p><strong>Note :</strong> <code>aria-labelledby</code> fait partie de la spécification <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI ARIA</a>, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basic</a>.</p> </div> -<h3 id="Autres_mécanismes_alternatifs_de_texte"><span class="tlid-translation translation"><span title="">Autres mécanismes alternatifs de texte</span></span></h3> +<h3 id="Autres_mécanismes_alternatifs_de_texte">Autres mécanismes alternatifs de texte</h3> -<p><span class="tlid-translation translation"><span title="">Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif.</span> <span title="">Par exemple, il existe un attribut </span></span><code class="language-js"><code>longdesc</code></code><span class="tlid-translation translation"><span title=""> destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :</span></span></p> +<p>Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut <code>longdesc</code> destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :</p> -<pre class="brush: html notranslate"><code class="language-js"> -<img src="dinosaur.png" longdesc="dino-info.html"></code></pre> +<pre class="brush: html"> +<img src="dinosaur.png" longdesc="dino-info.html"></pre> -<p><span class="tlid-translation translation"><span title="">Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente).</span> <span title="">Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran.</span> <span title="">Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.</span></span></p> +<p>Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.</p> -<p><span class="tlid-translation translation"><span title="">HTML5 comprend deux nouveaux éléments</span></span> <code class="language-js"> — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — </code> <span class="tlid-translation translation"><span title="">qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :</span></span></p> +<p>HTML5 comprend deux nouveaux éléments — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :</p> -<pre class="brush: html notranslate"><code class="language-js"><figure> - <img src="dinosaur.png" alt="</code> <span class="tlid-translation translation"><span title="">Le Mozilla Tyrannosaurus</span></span> <code class="language-js">"> - <figcaption></code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span> <code class="language-js">.</figcaption> -</figure></code></pre> +<pre class="brush: html"><figure> + <img src="dinosaur.png" alt="Le Mozilla Tyrannosaurus "> + <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption> +</figure></pre> -<p><span class="tlid-translation translation"><span title="">Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.</span></span></p> +<p>Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.</p> -<h3 id="Attributs_alt_vides"><span class="tlid-translation translation"><span title="">Attributs alt vides</span></span></h3> +<h3 id="Attributs_alt_vides">Attributs alt vides</h3> -<pre class="brush: html notranslate"><code class="language-js"> +<pre class="brush: html"> <h3> <img src="article-icon.png" alt=""> - </code> <span class="tlid-translation translation"><span title="">Tyrannosaurus Rex: le roi des dinosaures</span></span> <code class="language-js"> -</h3></code></pre> + Tyrannosaurus Rex: le roi des dinosaures +</h3></pre> -<p><span class="tlid-translation translation"><span title="">Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle.</span> <span title="">Vous remarquerez dans l'exemple de code ci-dessus que l'attribut </span></span> <code class="language-js"> <code>alt</code> </code> <span class="tlid-translation translation"><span title="">de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement </span></span>« <span class="tlid-translation translation"><span title="">image</span></span> »<span class="tlid-translation translation"><span title="">, ou similaire)</span> <span title="">.</span></span></p> +<p>Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut <code>alt </code> de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .</p> -<p><span class="tlid-translation translation"><span title="">La raison d'utiliser un vide </span></span><code class="language-js"><code>alt</code></code> <span class="tlid-translation translation"><span title="">au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">n'est fourni.</span> <span title="">Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée.</span> <span title="">Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">sur vos images.</span> <span title="">Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.</span></span></p> +<p>La raison d'utiliser un vide <code>alt</code> au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun <code>alt</code> n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide <code>alt</code> sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong> :</code><span class="tlid-translation translation"><span title=""> si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.</span></span></p> +<p><strong>Note :</strong> si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.</p> </div> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> -</div> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas.</span> <span title="">Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases.</span> <span title="">Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.</span></span></p> +<p>Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.</p> <p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> diff --git a/files/fr/learn/accessibility/index.html b/files/fr/learn/accessibility/index.html index 3a3d54ee77..0b9b6f493f 100644 --- a/files/fr/learn/accessibility/index.html +++ b/files/fr/learn/accessibility/index.html @@ -14,14 +14,14 @@ original_slug: Apprendre/a11y --- <div>{{LearnSidebar}}</div> -<p class="summary">Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du <a href="/fr/Apprendre/HTML">HTML</a>, du <a href="/fr/Apprendre/CSS">CSS</a> et du <a href="/fr/Apprendre/JavaScript">JavaScript</a>), effectuer <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">des tests sur les différents navigateurs</a> et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.</p> +<p>Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du <a href="/fr/Apprendre/HTML">HTML</a>, du <a href="/fr/Apprendre/CSS">CSS</a> et du <a href="/fr/Apprendre/JavaScript">JavaScript</a>), effectuer <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">des tests sur les différents navigateurs</a> et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.</p> <h2 id="Prérequis">Prérequis</h2> <p>Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/Apprendre/JavaScript">JavaScript</a> en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/accessibility/mobile/index.html b/files/fr/learn/accessibility/mobile/index.html index 893693f212..62de168f05 100644 --- a/files/fr/learn/accessibility/mobile/index.html +++ b/files/fr/learn/accessibility/mobile/index.html @@ -16,297 +16,295 @@ original_slug: Apprendre/a11y/Mobile <div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes.</span> <span title="">Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.</span></span></p> +<p>L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td><span class="tlid-translation translation"><span title="">Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la</span></span> <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td> + <td>Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la <a href="/fr/docs/Learn/Accessibility">previous articles in the course</a>.</td> </tr> <tr> <th scope="row">Objective:</th> - <td><span class="tlid-translation translation"><span title="">Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.</span></span></td> + <td>Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.</td> </tr> </tbody> </table> -<h2 id="Accessibilité_sur_les_appareils_mobiles"><span class="tlid-translation translation"><span title="">Accessibilité sur les appareils mobiles</span></span></h2> +<h2 id="Accessibilité_sur_les_appareils_mobiles">Accessibilité sur les appareils mobiles</h2> -<p><span class="tlid-translation translation"><span title="">L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes.</span> <span title="">Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).</span></span></p> +<p>L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).</p> -<p><span class="tlid-translation translation"><span title="">De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès.</span> <span title="">Les navigateurs mobiles modernes ont tendance à avoir un bon support pour</span></span> <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, <span class="tlid-translation translation"><span title="">aussi</span></span></p> +<p>De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, aussi</p> -<p><span class="tlid-translation translation"><span title="">Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.</span></span></p> +<p>Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.</p> -<p><span class="tlid-translation translation"><span title="">Certaines exceptions nécessitent une attention particulière pour le mobile;</span> <span title="">les principaux sont:</span></span></p> +<p>Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à-dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.</span></span></li> + <li>Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à-dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).</li> + <li>Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).</li> + <li>Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.</li> </ul> -<h2 id="Résumé_des_tests_de_lecteur_d'écran_sur_Android_et_iOS"><span class="tlid-translation translation"><span title="">Résumé des tests de lecteur d'écran sur Android et iOS</span></span></h2> +<h2 id="Résumé_des_tests_de_lecteur_d'écran_sur_Android_et_iOS">Résumé des tests de lecteur d'écran sur Android et iOS</h2> -<p><span class="tlid-translation translation"><span title="">Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels.</span> <span title="">Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.</span></span></p> +<p>Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.</p> -<p><span class="tlid-translation translation"><span title="">Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</span></span></p> +<p>Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</p> <h3 id="Android_TalkBack">Android TalkBack</h3> -<p><span class="tlid-translation translation"><span title="">Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.</span></span></p> +<p>Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.</p> -<p><span class="tlid-translation translation"><span title="">Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer.</span> <span title="">Suivez toute invite supplémentaire à l'écran qui vous est présentée.</span></span></p> +<p>Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.</p> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Les anciennes versions de TalkBack sont activées dans</span></span> <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">slightly different ways</a>.</p> +<p><strong>Note:</strong> Les anciennes versions de TalkBack sont activées dans <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">slightly different ways</a>.</p> -<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes.</span> <span title="">Par exemple:</span></span></p> +<p>Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle.</span> <span title="">L'appareil lira chaque option.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.</span></span></li> + <li>Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.</li> + <li>Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.</li> + <li>Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.</li> + <li>Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.</li> </ol> -<p><span class="tlid-translation translation"><span title="">Si vous souhaitez désactiver TalkBack:</span></span></p> +<p>Si vous souhaitez désactiver TalkBack:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Accédez à votre application Paramètres en utilisant les gestes ci-dessus.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Accédez à Accessibilité> TalkBack</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Accédez au commutateur et activez-le pour le désactiver.</span></span> .</li> + <li>Accédez à votre application Paramètres en utilisant les gestes ci-dessus.</li> + <li>Accédez à Accessibilité> TalkBack .</li> + <li>Accédez au commutateur et activez-le pour le désactiver. .</li> </ol> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide.</span> <span title="">Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite.</span></span> .</p> +<p><strong>Note:</strong> Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .</p> -<p><span class="tlid-translation translation"><span title="">Pour une liste plus complète des gestes TalkBack, voir</span></span> <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p> +<p>Pour une liste plus complète des gestes TalkBack, voir <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p> -<h4 id="Déverrouiller_le_téléphone"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4> +<h4 id="Déverrouiller_le_téléphone">Déverrouiller le téléphone</h4> -<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.</span></span></p> +<p>Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage.</span> <span title="">Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.</span></span></p> +<p>Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez également explorer en touchant le bouton <em>Déverrouiller</em> en bas au centre de l'écran, puis en appuyant deux fois.</span></span></p> +<p>Vous pouvez également explorer en touchant le bouton <em>Déverrouiller</em> en bas au centre de l'écran, puis en appuyant deux fois.</p> -<h4 id="Menus_globaux_et_locaux"><span class="tlid-translation translation"><span title="">Menus globaux et locaux</span></span></h4> +<h4 id="Menus_globaux_et_locaux">Menus globaux et locaux</h4> -<p><span class="tlid-translation translation"><span title="">TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil.</span> <span title="">Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.</span></span></p> +<p>TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.</p> -<h4 id="Pour_accéder_à_ces_menus"><span class="tlid-translation translation"><span title=""><strong>Pour accéder à ces menus</strong>:</span></span></h4> +<h4 id="Pour_accéder_à_ces_menus"><strong>Pour accéder à ces menus</strong>:</h4> <ol> - <li><span class="tlid-translation translation"><span title="">Accédez au menu global en glissant rapidement vers le bas, puis à droite</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Accédez au menu local en balayant rapidement vers le haut, puis à droite.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour naviguer entre les différentes options.</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.</span></span></li> + <li>Accédez au menu global en glissant rapidement vers le bas, puis à droite .</li> + <li>Accédez au menu local en balayant rapidement vers le haut, puis à droite.</li> + <li>Balayez vers la gauche et la droite pour naviguer entre les différentes options. .</li> + <li>Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.</li> </ol> -<p><span class="tlid-translation translation"><span title="">Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir</span></span> <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p> +<p>Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p> -<h4 id="Parcourir_des_pages_Web"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4> +<h4 id="Parcourir_des_pages_Web">Parcourir des pages Web</h4> -<p><span class="tlid-translation translation"><span title="">Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.</span></span></p> +<p>Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.</p> -<p><span class="tlid-translation translation"><span title="">Par exemple, avec TalkBack activé:</span></span></p> +<p>Par exemple, avec TalkBack activé:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span> + <li>Ouvrez votre navigateur web.</li> + <li>Activer la barre d'URL.</li> + <li>Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: <ul> - <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir.</span> <span title="">Répétez pour chaque </span></span>caractère<span class="tlid-translation translation"><span title="">.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li> + <li>Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .</li> + <li>Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.</li> + <li>Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</li> </ul> </li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page.</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".</span></span></li> - <li><span class="tlid-translation translation"><span title="">Appuyez deux fois pour le sélectionner.</span> <span title="">Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.</span></span></li> + <li>Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .</li> + <li>Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.</li> + <li>Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".</li> + <li>Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.</li> + <li>Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.</li> </ol> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Voir </span></span> aussi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932">Get started on Android with TalkBack</a> <span class="tlid-translation translation"><span title="">pour obtenir une documentation plus complète.</span></span></p> +<p><strong>Note:</strong> Voir aussi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932">Get started on Android with TalkBack</a> pour obtenir une documentation plus complète.</p> <h3 id="iOS_VoiceOver">iOS VoiceOver</h3> -<p><span class="tlid-translation translation"><span title="">Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.</span></span></p> +<p>Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.</p> -<p><span class="tlid-translation translation"><span title="">Pour l'activer, accédez à l'application <em>Paramètres</em>, puis sélectionnez <em>Général</em> > <em>Accessibilité</em> > <em>VoiceOver</em>.</span> <span title="">Appuyez sur le curseur <em>VoiceOver</em> pour l'activer (vous verrez également un certain nombre d'autres options liées à <em>VoiceOver</em> sur cette page).</span></span></p> +<p>Pour l'activer, accédez à l'application <em>Paramètres</em>, puis sélectionnez <em>Général</em> > <em>Accessibilité</em> > <em>VoiceOver</em>. Appuyez sur le curseur <em>VoiceOver</em> pour l'activer (vous verrez également un certain nombre d'autres options liées à <em>VoiceOver</em> sur cette page).</p> -<p><span class="tlid-translation translation"><span title="">Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents</span></span> :</p> +<p>Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :</p> <ol> - <li><span class="tlid-translation translation"><span title="">Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez;</span> <span title="">votre appareil parlera de l'élément sur lequel vous avez tapé.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt avec trois doigts pour faire défiler une page.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.</span></span></li> + <li>Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.</li> + <li>Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).</li> + <li>Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.</li> + <li>Faites glisser votre doigt avec trois doigts pour faire défiler une page.</li> + <li>Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.</li> </ol> -<p><span class="tlid-translation translation"><span title="">Pour le désactiver à nouveau, revenez à <em>Paramètres</em>> <em>Général</em>> <em>Accessibilité</em>> <em>VoiceOver</em> en utilisant les gestes ci-dessus, puis basculez le curseur <em>VoiceOver</em> sur Désactivé.</span></span></p> +<p>Pour le désactiver à nouveau, revenez à <em>Paramètres</em>> <em>Général</em>> <em>Accessibilité</em>> <em>VoiceOver</em> en utilisant les gestes ci-dessus, puis basculez le curseur <em>VoiceOver</em> sur Désactivé.</p> -<h4 id="Déverrouiller_le_téléphone_2"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4> +<h4 id="Déverrouiller_le_téléphone_2">Déverrouiller le téléphone</h4> -<p><span class="tlid-translation translation"><span title="">Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude.</span> <span title="">Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.</span></span></p> +<p>Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.</p> -<h4 id="Utiliser_le_rotor"><span class="tlid-translation translation"><span title="">Utiliser le rotor</span></span></h4> +<h4 id="Utiliser_le_rotor">Utiliser le rotor</h4> -<p><span class="tlid-translation translation"><span title="">Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes.</span> <span title="">Pour l'utiliser:</span></span></p> +<p>Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Tournez deux doigts sur l’écran comme si vous tourniez un cadran.</span> <span title="">Chaque option sera lue à voix haute au fur et à mesure que vous tournez.</span> <span title="">Vous pouvez aller et venir pour parcourir les options.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez trouvé l'option que vous voulez:</span></span> + <li>Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.</li> + <li>Une fois que vous avez trouvé l'option que vous voulez: <ul> - <li><span class="tlid-translation translation"><span title="">Relâchez vos doigts pour le sélectionner.</span></span></li> - <li><span class="tlid-translation translation"><span title="">S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.</span></span></li> + <li>Relâchez vos doigts pour le sélectionner.</li> + <li>S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.</li> </ul> </li> </ol> -<p><span class="tlid-translation translation"><span title="">Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).</span></span></p> +<p>Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).</p> -<h4 id="Parcourir_des_pages_Web_2"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4> +<h4 id="Parcourir_des_pages_Web_2">Parcourir des pages Web</h4> -<p><span class="tlid-translation translation"><span title="">Essayons la navigation Web avec VoiceOver:</span></span></p> +<p>Essayons la navigation Web avec VoiceOver:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span> + <li>Ouvrez votre navigateur web.</li> + <li>Activer la barre d'URL.</li> + <li>Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: <ul> - <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner.</span> <span title="">Appuyez deux fois pour le taper.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li> + <li>Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.</li> + <li>Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.</li> + <li>Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</li> </ul> </li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page.</span> <span title="">Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Par défaut, l’option de rotor sélectionnée sera Speaking Rate;</span> <span title="">vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre.</span> <span title="">Voici quelques exemples d'options disponibles:</span></span> + <li>Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).</li> + <li>Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.</li> + <li>Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles: <ul> - <li><span class="tlid-translation translation"><span title=""><em>Taux de parole</em> : Modifiez le taux de parole.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Conteneurs </em>: déplacez-vous entre différents conteneurs sémantiques de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>En-têtes </em>: déplacez-vous entre les en-têtes de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Liens</em> : permet de se déplacer entre les liens de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Contrôles de formulaire </em>: déplacez-vous entre les contrôles de formulaire de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Langue</em> : déplacez-vous entre différentes traductions, si elles sont disponibles.</span></span></li> + <li><em>Taux de parole</em> : Modifiez le taux de parole.</li> + <li><em>Conteneurs </em>: déplacez-vous entre différents conteneurs sémantiques de la page.</li> + <li><em>En-têtes </em>: déplacez-vous entre les en-têtes de la page.</li> + <li><em>Liens</em> : permet de se déplacer entre les liens de la page.</li> + <li><em>Contrôles de formulaire </em>: déplacez-vous entre les contrôles de formulaire de la page.</li> + <li><em>Langue</em> : déplacez-vous entre différentes traductions, si elles sont disponibles.</li> </ul> </li> - <li><span class="tlid-translation translation"><span title="">S<em>électionnez les en-têtes</em>.</span> <span title="">Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.</span></span></li> + <li>S<em>électionnez les en-têtes</em>. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.</li> </ol> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir </span></span> aussi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p> +<p><strong>Note:</strong> Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p> -<h2 id="Mécanismes_de_contrôle"><span class="tlid-translation translation"><span title="">Mécanismes de contrôle</span></span></h2> +<h2 id="Mécanismes_de_contrôle">Mécanismes de contrôle</h2> -<p><span class="tlid-translation translation"><span title="">Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle</span></span> (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). <span class="tlid-translation translation"><span title="">En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.</span></span></p> +<p>Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle (see <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.</p> -<p><span class="tlid-translation translation"><span title="">Par exemple, l'événement </span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a> <span class="tlid-translation translation"><span title="">est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile.</span> <span title="">Essayez notre</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> exemple (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) <span class="tlid-translation translation"><span title="">pour voir ce que nous entendons.</span></span> .</p> +<p>Par exemple, l'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">click</a> est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> exemple (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) pour voir ce que nous entendons. .</p> -<p><span class="tlid-translation translation"><span title="">Sinon, des événements spécifiques à la souris, tels que </span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> et <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> <span class="tlid-translation translation"><span title="">créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.</span></span></p> +<p>Sinon, des événements spécifiques à la souris, tels que <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> et <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.</p> -<p><span class="tlid-translation translation"><span title="">Si vous essayez de contrôler notre exemple</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) <span class="tlid-translation translation"><span title="">avec un clavier ou une touche, vous verrez le problème.</span> <span title="">Cela se produit car nous utilisons un code tel que:</span></span></p> +<p>Si vous essayez de contrôler notre exemple <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:</p> -<pre><code>div.onmousedown = function() { +<pre class="brush: js">div.onmousedown = function() { initialBoxX = div.offsetLeft; initialBoxY = div.offsetTop; movePanel(); } -document.onmouseup = stopMove;</code></pre> +document.onmouseup = stopMove;</pre> -<p><span class="tlid-translation translation"><span title="">Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:</span></span></p> +<p>Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:</p> -<pre><code>div.ontouchstart = function(e) { +<pre class="brush: js">div.ontouchstart = function(e) { initialBoxX = div.offsetLeft; initialBoxY = div.offsetTop; positionHandler(e); movePanel(); } -panel.ontouchend = stopMove;</code></pre> +panel.ontouchend = stopMove;</pre> -<p><span class="tlid-translation translation"><span title="">Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> aussi).</p> +<p>Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> aussi).</p> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à</span></span> <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p> +<p><strong>Note:</strong> Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à <a href="/fr/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p> <h2 id="Responsive_design">Responsive design</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">Responsive design</a> <span class="tlid-translation translation"><span title="">a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils.</span></span> .</p> +<p><a href="/fr/docs/Web/Apps/Progressive/Responsive">Responsive design</a> a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .</p> -<p><span class="tlid-translation translation"><span title="">En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:</span></span></p> +<p>En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Adéquation des mises en page pour les appareils mobiles.</span> <span title="">Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible.</span> <span title="">Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, et <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> - <li><span class="tlid-translation translation"><span title="">Conserver les tailles d’image téléchargées.</span> <span title="">En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes.</span> <span title="">Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant.</span> <span title="">Vous pouvez gérer cela en utilisant</span></span> <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li> - <li><span class="tlid-translation translation"><span title="">Penser aux hautes résolutions.</span> <span title="">De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net.</span> <span title="">Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives.</span> <span title="">De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels.</span> <span title="">SVG a une petite taille de fichier et restera net quelle que soit la taille affichée</span></span> (voir <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> <span class="tlid-translation translation"><span title="">pour plus de détails</span></span> ).</li> + <li>Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que <a href="/fr/docs/Web/CSS/Media_Queries">media queries</a>, <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> + <li>Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li> + <li>Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée (voir <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> pour plus de détails ).</li> </ul> -<p><strong>Note: </strong> <span class="tlid-translation translation"><span title="">Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).</span></span></p> +<p><strong>Note: </strong> Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).</p> -<h3 id="Considérations_mobiles_spécifiques"><span class="tlid-translation translation"><span title="">Considérations mobiles spécifiques</span></span></h3> +<h3 id="Considérations_mobiles_spécifiques">Considérations mobiles spécifiques</h3> -<p><span class="tlid-translation translation"><span title="">Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile.</span> <span title="">Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.</span></span></p> +<p>Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.</p> -<h4 id="Ne_pas_désactiver_le_zoom"><span class="tlid-translation translation"><span title="">Ne pas désactiver le zoom</span></span></h4> +<h4 id="Ne_pas_désactiver_le_zoom">Ne pas désactiver le zoom</h4> -<p><span class="tlid-translation translation"><span title="">En utilisant</span></span> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, <span class="tlid-translation translation"><span title="">il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre</span></span> {{htmlelement("head")}}:</p> +<p>En utilisant <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:</p> -<pre><code><meta name="viewport" content="user-scalable=no"></code></pre> +<pre class="brush: html"><meta name="viewport" content="user-scalable=no"></pre> -<p><span class="tlid-translation translation"><span title="">Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée.</span> <span title="">Il y a certaines situations où le zoom peut casser l'interface utilisateur;</span> <span title="">Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.</span></span></p> +<p>Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.</p> -<h4 id="Garder_les_menus_accessibles"><span class="tlid-translation translation"><span title="">Garder les menus accessibles</span></span></h4> +<h4 id="Garder_les_menus_accessibles">Garder les menus accessibles</h4> -<p><span class="tlid-translation translation"><span title="">Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si</span> <span title="">c'est nécessaire - lorsque le site est visualisé sur mobile.</span> <span title="">Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".</span></span></p> +<p>Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".</p> -<p><span class="tlid-translation translation"><span title="">Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans</span></span> {{anch("Control mechanisms")}} <span class="tlid-translation translation"><span title="">ci-dessus, et que</span> <span title="">le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation.</span></span> .</p> +<p>Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .</p> -<p><span class="tlid-translation translation"><span title="">Cliquez ici pour un</span></span> <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p> +<p>Cliquez ici pour un <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p> -<h2 id="Entrée_utilisateur"><span class="tlid-translation translation"><span title="">Entrée utilisateur</span></span></h2> +<h2 id="Entrée_utilisateur">Entrée utilisateur</h2> -<p><span class="tlid-translation translation"><span title="">Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau.</span> <span title="">Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.</span></span></p> +<p>Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.</p> -<p><span class="tlid-translation translation"><span title="">Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire.</span> <span title="">Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu</span></span> {{htmlelement("select")}} <span class="tlid-translation translation"><span title="">contenant les options les plus courantes (ce qui aide également à</span> <span title="">cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes.</span> <span title="">Vous pouvez voir un exemple simple de cette idée en action dans</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> ( <span class="tlid-translation translation"><span title="">voir le</span></span> <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p> +<p>Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu {{htmlelement("select")}} contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> ( voir le <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p> -<p><span class="tlid-translation translation"><span title="">Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil.</span> <span title="">Voir</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> <span class="tlid-translation translation"><span title=""> pour quelques exemples</span></span> (voir <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — <span class="tlid-translation translation"><span title="">essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:</span></span></p> +<p>Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> pour quelques exemples (voir <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Les types</span></span> <code>number</code>, <code>tel</code>, et <code>email</code> <span class="tlid-translation translation"><span title="">affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Les types</span></span> <code>time</code> et <code>date</code> <span class="tlid-translation translation"><span title="">affichent des sélecteurs appropriés pour la sélection des heures et des dates.</span></span> .</li> + <li>Les types <code>number</code>, <code>tel</code>, et <code>email</code> affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.</li> + <li>Les types <code>time</code> et <code>date</code> affichent des sélecteurs appropriés pour la sélection des heures et des dates. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités.</span> <span title="">Reportez-vous à </span></span> <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> <span class="tlid-translation translation"><span title="">pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article </span></span> <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> <span class="tlid-translation translation"><span title="">pour en savoir plus.</span></span> .</p> +<p>Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> pour en savoir plus. .</p> -<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre.</span> <span title="">Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.</span></span></p> +<p>Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.</p> -<div class="text-wrap tlid-copy-target"> -<h4 class="result-shield-container tlid-copy-target" id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h4> -</div> +<h3 id="Voir_également">Voir également</h3> <ul> - <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — <span class="tlid-translation translation"><span title="">Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.</span></span></li> - <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — <span class="tlid-translation translation"><span title="">Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.</span></span></li> + <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.</li> + <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.</li> </ul> <div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> <div> -<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2> +<h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> </ul> </div> </div> diff --git a/files/fr/learn/accessibility/multimedia/index.html b/files/fr/learn/accessibility/multimedia/index.html index d16e2a3bc0..e957ae2002 100644 --- a/files/fr/learn/accessibility/multimedia/index.html +++ b/files/fr/learn/accessibility/multimedia/index.html @@ -18,55 +18,51 @@ original_slug: Apprendre/a11y/Multimedia <div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs.</span> <span title="">Cet article montre comment.</span></span></p> +<p>Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><span class="tlid-translation translation"><span title="">Conditions</span></span> requise:</th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de</span></span> <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité?</a></td> + <th scope="row">Conditions requise:</th> + <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité?</a></td> </tr> <tr> <th scope="row">Objectif:</th> - <td><span class="tlid-translation translation"><span title="">Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre</span></span> .</td> + <td>Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .</td> </tr> </tbody> </table> -<h2 id="Multimédia_et_accessibilité"><span class="tlid-translation translation"><span title="">Multimédia et accessibilité</span></span></h2> +<h2 id="Multimédia_et_accessibilité">Multimédia et accessibilité</h2> -<p><span class="tlid-translation translation"><span title="">Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes.</span> <span title="">(avec</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> l'attribut).</p> +<p>Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> l'attribut).</p> -<p><span class="tlid-translation translation"><span title="">Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia.</span> <span title="">Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.</span></span></p> +<p>Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.</p> -<p><span class="tlid-translation translation"><span title="">Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</span></span></p> +<p>Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</p> <h2 id="Simple_images">Simple images</h2> -<p><span class="tlid-translation translation"><span title="">Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article</span></span> <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a> — <span class="tlid-translation translation"><span title=""> vous pouvez vous y référer pour plus de détails.</span> <span title="">En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.</span></span></p> +<p>Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a> — vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.</p> -<p> </p> - -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Par exemple</span></span>:</div> -</div> +<p>Par exemple:</p> <pre class="brush: html"><img src="dinosaur.png" - alt=" <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees</span></span> ."> + alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees ."> </pre> -<h2 id="Commandes_audio_et_vidéo_accessibles"><span class="tlid-translation translation"><span title="">Commandes audio et vidéo accessibles</span></span></h2> +<h2 id="Commandes_audio_et_vidéo_accessibles">Commandes audio et vidéo accessibles</h2> -<p><span class="tlid-translation translation"><span title="">La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas?</span> <span title="">Enquêtons</span></span> .</p> +<p>La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .</p> -<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs"><span class="tlid-translation translation"><span title="">Le problème avec les contrôles HTML5 natifs</span></span></h3> +<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs">Le problème avec les contrôles HTML5 natifs</h3> -<p><span class="tlid-translation translation"><span title="">Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement.</span> <span title="">Par exemple (voir</span></span> <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">code source</a> et <a href="https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">en direct</a>):</p> +<p>Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">code source</a> et <a href="https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">en direct</a>):</p> <pre class="brush: html"><audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> - <p> <span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="viper.mp3"> <span class="tlid-translation translation"><span title="">lien vers l\'audio</span></span> </a> <span class="tlid-translation translation"><span title="">au lieu</span></span> .</p> + <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a> au lieu .</p> </audio> <br> @@ -74,43 +70,43 @@ original_slug: Apprendre/a11y/Multimedia <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> - <p><span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="rabbit320.mp4"><span class="tlid-translation translation"><span title="">lien vers la</span></span> video</a> instead.</p> + <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> </video></pre> -<p><span class="tlid-translation translation"><span title="">L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia.</span> <span title="">Il semble que dans Firefox et Chrome</span></span> :</p> +<p>L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :</p> -<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> +<p><img alt="Screenshot of Video Controls in Firefox" src="native-controls-firefox.png"></p> -<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> +<p><img alt="Screenshot of Video Controls in Chrome" src="native-controls-chrome.png"></p> -<p><span class="tlid-translation translation"><span title="">Cependant, il y a des problèmes avec ces contrôles</span></span> :</p> +<p>Cependant, il y a des problèmes avec ces contrôles :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site.</span></span> .</li> + <li>Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.</li> + <li>Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés.</span> <span title="">Regardons comment.</span></span></p> +<p>Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.</p> -<h3 id="Création_de_contrôles_audio_et_vidéo_personnalisés"><span class="tlid-translation translation"><span title="">Création de contrôles audio et vidéo personnalisés</span></span></h3> +<h3 id="Création_de_contrôles_audio_et_vidéo_personnalisés">Création de contrôles audio et vidéo personnalisés</h3> -<p><span class="tlid-translation translation"><span title="">La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même.</span></span> .</p> +<p>La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .</p> -<p><span class="tlid-translation translation"><span title="">Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés</span></span> .</p> +<p>Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .</p> <h4 id="Basic_setup">Basic setup</h4> -<p><span class="tlid-translation translation"><span title="">Tout d'abord, prenez une copie de notre</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> <span class="tlid-translation translation"><span title="">fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur</span></span> .</p> +<p>Tout d'abord, prenez une copie de notre <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .</p> -<p><span class="tlid-translation translation"><span title="">Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire</span></span> .</p> +<p>Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .</p> -<p><span class="tlid-translation translation"><span title="">Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</span></span></p> +<p>Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</p> <pre class="brush: html"><section class="player"> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> - <p><span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="rabbit320.mp4"><span class="tlid-translation translation"><span title="">lien vers la</span></span> video</a> instead.</p> + <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> </video> <div class="controls"> @@ -124,9 +120,9 @@ original_slug: Apprendre/a11y/Multimedia <h4 id="JavaScript_basic_setup">JavaScript basic setup</h4> -<p><span class="tlid-translation translation"><span title="">Nous avons inséré quelques boutons de commande simples sous notre vidéo.</span> <span title="">Bien sûr, ces contrôles ne feront rien par défaut;</span> <span title="">pour ajouter des fonctionnalités, nous allons utiliser JavaScript</span></span> .</p> +<p>Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .</p> -<p><span class="tlid-translation translation"><span title="">Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</span></span></p> +<p>Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</p> <pre class="brush: js">var playPauseBtn = document.querySelector('.playpause'); var stopBtn = document.querySelector('.stop'); @@ -134,21 +130,21 @@ var rwdBtn = document.querySelector('.rwd'); var fwdBtn = document.querySelector('.fwd'); var timeLabel = document.querySelector('.time');</pre> -<p><span class="tlid-translation translation"><span title="">Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:</span></span></p> +<p>Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:</p> <pre class="brush: js">var player = document.querySelector('video');</pre> -<p><span class="tlid-translation translation"><span title="">Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.</span></span></p> +<p>Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.</p> -<p><span class="tlid-translation translation"><span title="">Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés.</span> <span title="">Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:</span></span></p> +<p>Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:</p> <pre class="brush: js">player.removeAttribute('controls');</pre> -<p><span class="tlid-translation translation"><span title="">Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.</span></span></p> +<p>Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.</p> -<h4 id="Câbler_nos_boutons"><span class="tlid-translation translation"><span title="">Câbler nos boutons</span></span></h4> +<h4 id="Câbler_nos_boutons">Câbler nos boutons</h4> -<p><span class="tlid-translation translation"><span title="">Commençons par configurer le bouton lecture / pause.</span> <span title="">Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous.</span> <span title="">Ajoutez-le à votre code, en bas:</span></span></p> +<p>Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:</p> <pre class="brush: js">playPauseBtn.onclick = function() { if(player.paused) { @@ -160,7 +156,7 @@ var timeLabel = document.querySelector('.time');</pre> } };</pre> -<p><span class="tlid-translation translation"><span title="">Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</span></span></p> +<p>Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</p> <pre class="brush: js">stopBtn.onclick = function() { player.pause(); @@ -168,9 +164,9 @@ var timeLabel = document.querySelector('.time');</pre> playPauseBtn.textContent = 'Play'; };</pre> -<p><span class="tlid-translation translation"><span title="">Il n'y a pas de fonction</span></span> <code>stop()</code> <span class="tlid-translation translation"><span title="">disponible sur</span></span> {{domxref("HTMLMediaElement")}}s, <span class="tlid-translation translation"><span title="">nous le mettons donc en</span></span> <code>pause()</code> <span class="tlid-translation translation"><span title="">et, dans le même temps, définissons la valeur</span></span> <code>currentTime</code> sur 0.</p> +<p>Il n'y a pas de fonction <code>stop()</code> disponible sur {{domxref("HTMLMediaElement")}}s, nous le mettons donc en <code>pause()</code> et, dans le même temps, définissons la valeur <code>currentTime</code> sur 0.</p> -<p><span class="tlid-translation translation"><span title="">Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre</span></span> code:</p> +<p>Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code:</p> <pre class="brush: js">rwdBtn.onclick = function() { player.currentTime -= 3; @@ -185,11 +181,11 @@ fwdBtn.onclick = function() { } };</pre> -<p><span class="tlid-translation translation"><span title="">Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à </span></span> <code>currentTime</code> <span class="tlid-translation translation"><span title="">chaque fois qu’on clique dessus.</span> <span title="">Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.</span></span></p> +<p>Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à <code>currentTime</code> chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.</p> -<p><span class="tlid-translation translation"><span title="">Notez que nous vérifions également si la durée</span></span> <code>currentTime</code> <span class="tlid-translation translation"><span title="">est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé.</span> <span title="">Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée.</span></span> .</p> +<p>Notez que nous vérifions également si la durée <code>currentTime</code> est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .</p> -<p><span class="tlid-translation translation"><span title="">Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</span></span></p> +<p>Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</p> <pre class="brush: js">player.ontimeupdate = function() { var minutes = Math.floor(player.currentTime / 60); @@ -213,105 +209,105 @@ fwdBtn.onclick = function() { timeLabel.textContent = mediaTime; };</pre> -<p><span class="tlid-translation translation"><span title="">Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction.</span> <span title="">Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.</span></span></p> +<p>Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.</p> -<h4 id="Lectures_complémentaires"><span class="tlid-translation translation"><span title="">Lectures complémentaires</span></span></h4> +<h4 id="Lectures_complémentaires">Lectures complémentaires</h4> -<p><span class="tlid-translation translation"><span title="">Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio.</span> <span title="">Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:</span></span></p> +<p>Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:</p> <ul> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> </ul> -<p><span class="tlid-translation translation"><span title="">Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés.</span> <span title="">Voir</span></span> <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> ( <span class="tlid-translation translation"><span title="">également</span></span> <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">voir le code source</a>).</p> +<p>Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> ( également <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">voir le code source</a>).</p> -<h2 id="Transcriptions_audio"><span class="tlid-translation translation"><span title="">Transcriptions audio</span></span></h2> +<h2 id="Transcriptions_audio">Transcriptions audio</h2> -<p><span class="tlid-translation translation"><span title="">Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte.</span> <span title="">Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.</span></span></p> +<p>Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.</p> -<p><span class="tlid-translation translation"><span title="">En termes de création de la transcription, vos options sont les suivantes:</span></span></p> +<p>En termes de création de la transcription, vos options sont les suivantes:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que</span></span> <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, ou <a href="https://www.rev.com/">Rev</a>. <span class="tlid-translation translation"><span title="">Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions.</span> <span title="">Vous pouvez même essayer de les faire vous-même.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que </span></span> <a href="https://trint.com">Trint</a>. <span class="tlid-translation translation"><span title="">Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous.</span> <span title="">Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés.</span> <span title="">Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement.</span></span> . </li> + <li>Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, ou <a href="https://www.rev.com/">Rev</a>. Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.</li> + <li>Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions. Vous pouvez même essayer de les faire vous-même.</li> + <li>Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que <a href="https://trint.com">Trint</a>. Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. . </li> </ul> -<p><span class="tlid-translation translation"><span title="">Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez.</span> <span title="">la précision et le temps requis pour produire la transcription varient selon les services.</span> <span title="">Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée.</span> <span title="">Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.</span></span></p> +<p>Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.</p> -<p><span class="tlid-translation translation"><span title="">Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs.</span> <span title="">Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.</span></span></p> +<p>Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.</p> -<h3 id="Exemples_de_transcription"><span class="tlid-translation translation"><span title="">Exemples de transcription</span></span></h3> +<h3 id="Exemples_de_transcription">Exemples de transcription</h3> -<p><span class="tlid-translation translation"><span title="">Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil.</span> <span title="">Par exemple, jetez un coup d’œil à</span></span> <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> <em>et choisissez plus > Transcript</em>.</p> +<p>Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> <em>et choisissez plus > Transcript</em>.</p> -<p><span class="tlid-translation translation"><span title="">Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué;</span> <span title="">voir notre exemple</span></span> <a href="https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">transcription audio-ui</a> exemple (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">code source</a>).</p> +<p>Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple <a href="https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">transcription audio-ui</a> exemple (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">code source</a>).</p> -<h3 id="Descriptions_audio"><span class="tlid-translation translation"><span title="">Descriptions audio</span></span></h3> +<h3 id="Descriptions_audio">Descriptions audio</h3> -<p><span class="tlid-translation translation"><span title="">Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.</span></span></p> +<p>Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.</p> -<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.</span></span></p> +<p>Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.</p> -<p><span class="tlid-translation translation"><span title="">Cependant, il y a des cas extrêmes.</span> <span title="">Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique.</span> <span title="">Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription.</span> <span title="">Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.</span></span></p> +<p>Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Une transcription audio aidera en général plusieurs groupes d'utilisateurs.</span> <span title="">En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant.</span> <span title="">Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.</span></span></p> +<p><strong>Note :</strong> Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.</p> </div> -<h2 id="Pistes_de_texte_vidéo"><span class="tlid-translation translation"><span title="">Pistes de texte vidéo</span></span></h2> +<h2 id="Pistes_de_texte_vidéo">Pistes de texte vidéo</h2> -<p><span class="tlid-translation translation"><span title="">Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo.</span></span> .</p> +<p>Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées.</span> <span title="">Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque).</span> <span title="">.)</span></span></p> +<p><strong>Note :</strong> Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)</p> </div> -<p><span class="tlid-translation translation"><span title="">Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:</span></span></p> +<p>Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:</p> -<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="closed-captions.png"></p> -<p><span class="tlid-translation translation"><span title="">Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple</span></span></p> +<p>Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple</p> -<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="Subtitles_German.jpg"></p> -<p><span class="tlid-translation translation"><span title="">Il existe différents types de pistes de texte avec des objectifs différents.</span> <span title="">Les principaux que vous rencontrerez sont:</span></span></p> +<p>Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement.</span> <span title="">.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.</span></span></li> + <li>Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement. .</li> + <li>Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.</li> + <li>Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.</li> + <li>Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.</li> </ul> -<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5"><span class="tlid-translation translation"><span title="">Implémentation de pistes de texte vidéo HTML5</span></span></h3> +<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5">Implémentation de pistes de texte vidéo HTML5</h3> -<p><span class="tlid-translation translation"><span title="">Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées.</span> <span title="">Ces chaînes de texte sont appelées cues</span></span> .</p> +<p>Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .</p> -<p><span class="tlid-translation translation"><span title="">Un fichier WebVTT typique ressemblera à ceci:</span></span></p> +<p>Un fichier WebVTT typique ressemblera à ceci:</p> <pre>WEBVTT 1 00:00:22.230 --> 00:00:24.606 - <span class="tlid-translation translation"><span title="">Ceci est le premier sous-titre.</span></span> + Ceci est le premier sous-titre. 2 00:00:30.739 --> 00:00:34.074 - <span class="tlid-translation translation"><span title="">C'est le deuxième</span></span> . + C'est le deuxième . ...</pre> -<p><span class="tlid-translation translation"><span title="">Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</span></span></p> +<p>Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Enregistrez-le en tant que fichier .vtt dans un endroit approprié.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Lien vers le fichier .vtt avec </span></span> <span class="tlid-translation translation"><span title="">l'élément</span></span> {{htmlelement("track")}} . <code><track></code> <span class="tlid-translation translation"><span title="">devrait être placé dans</span></span> <code><audio></code> ou <code><video></code>, <span class="tlid-translation translation"><span title="">mais après tout </span></span> <code><source></code> <span class="tlid-translation translation"><span title="">éléments</span></span> . <span class="tlid-translation translation"><span title="">Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions.</span> <span title="">De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres.</span></span> .</li> + <li>Enregistrez-le en tant que fichier .vtt dans un endroit approprié.</li> + <li>Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . <code><track></code> devrait être placé dans <code><audio></code> ou <code><video></code>, mais après tout <code><source></code> éléments . Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Voici un exemple:</span></span></p> +<p>Voici un exemple:</p> <pre class="brush: html"><video controls> <source src="example.mp4" type="video/mp4"> @@ -319,57 +315,52 @@ fwdBtn.onclick = function() { <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video></pre> -<p><span class="tlid-translation translation"><span title="">Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</span></span></p> +<p>Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</p> -<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="video-player-with-captions.png"></p> -<p><span class="tlid-translation translation"><span title="">Pour plus de détails, veuillez lire</span></span> <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous titres à des vidéos HTML 5</a>. <span class="tlid-translation translation"><span title="">Vous trouverez</span></span> <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">un exemple</a> <span class="tlid-translation translation"><span title="">qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi</span></span><span class="tlid-translation translation"><span title=""> le</span></span> <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a>.) <span class="tlid-translation translation"><span title="">Cet exemple utilise du JavaScript.</span> <span title="">pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.</span></span></p> +<p>Pour plus de détails, veuillez lire <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous titres à des vidéos HTML 5</a>. Vous trouverez <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">un exemple</a> qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a>.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte.</span> <span title="">Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.</span></span></p> +<p><strong>Note :</strong> Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.</p> </div> -<h2 id="Autre_contenu_multimédia"><span class="tlid-translation translation"><span title="">Autre contenu multimédia</span></span></h2> +<h2 id="Autre_contenu_multimédia">Autre contenu multimédia</h2> -<p><span class="tlid-translation translation"><span title="">Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web.</span> <span title="">Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:</span></span></p> +<p>Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:</p> <ul> - <li><a href="/en-US/docs/Web/API/Canvas_API">HTML5 canvas</a></li> + <li><a href="/fr/docs/Web/API/Canvas_API">HTML5 canvas</a></li> <li>Flash</li> <li>Silverlight</li> </ul> -<p><span class="tlid-translation translation"><span title="">Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas.</span> <span title="">Dans certains cas, ce n'est pas si grave, par exemple:</span></span></p> +<p>Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section</span></span> {{anch("Transcript examples")}} .</li> - <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies.</span> <span title="">Par exemple, voir</span></span> <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, ou <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> + <li>Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section {{anch("Transcript examples")}} .</li> + <li>Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, ou <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Cependant, il est difficile de rendre les autres multimédias accessibles.</span> <span title="">Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.</span></span></p> +<p>Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier.</span> <span title="">Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.</span></span></p> +<p>Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.</p> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> -</div> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</span></span></p> +<p>Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</p> <p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> -<p> </p> - -<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2> +<h2 id="Dans_ce_module">Dans ce module</h2> <ul> <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li> <li><a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> </ul> -<p> </p> diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.html b/files/fr/learn/accessibility/wai-aria_basics/index.html index a9990d7f55..c7821400cf 100644 --- a/files/fr/learn/accessibility/wai-aria_basics/index.html +++ b/files/fr/learn/accessibility/wai-aria_basics/index.html @@ -19,62 +19,62 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript.</span> <span title="">WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe.</span> <span title="">Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.</span></span></p> +<p>Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row"> Prerequis:</th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des </span></span><a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.</td> + <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des <a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.</td> </tr> <tr> - <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th> - <td><span class="tlid-translation translation"><span title="">Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant</span></span>.</td> + <th scope="row">Objectif :</th> + <td>Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.</td> </tr> </tbody> </table> -<h2 id="Qu'est_WAI-ARIA"><span class="tlid-translation translation"><span title="">Qu'est WAI-ARIA?</span></span></h2> +<h2 id="Qu'est_WAI-ARIA">Qu'est WAI-ARIA?</h2> -<p><span class="tlid-translation translation"><span title="">Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</span></span></p> +<p>Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</p> -<h3 id="Un_nouvel_ensemble_de_problèmes"><span class="tlid-translation translation"><span title="">Un nouvel ensemble de problèmes</span></span></h3> +<h3 id="Un_nouvel_ensemble_de_problèmes">Un nouvel ensemble de problèmes</h3> <p>Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.</p> -<p><span class="tlid-translation translation"><span title="">Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes </span></span> ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.) <span class="tlid-translation translation"><span title="">Avant de les utiliser, les développeurs utilisaient simplement</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s avec des identifiants ou des classes, par exemple</span></span> <code><div class="nav"></code> <span class="tlid-translation translation"><span title="">, mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation.</span></span> .</p> +<p>Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.) Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <code><div class="nav"></code> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .</p> -<p><span class="tlid-translation translation"><span title="">La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation</span></span> (<span class="tlid-translation translation"><span title="">ou autre</span></span>), <span class="tlid-translation translation"><span title="">par exemple:</span></span></p> +<p>La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:</p> -<pre class="brush: html"><a href="#hidden" class="hidden"><span class="tlid-translation translation"><span title="">Passer à la navigation</span></span></a></pre> +<pre class="brush: html"><a href="#hidden" class="hidden">Passer à la navigation</a></pre> -<p><span class="tlid-translation translation"><span title="">Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.</span></span></p> +<p>Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.</p> -<p><span class="tlid-translation translation"><span title="">Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux</span></span> input <span class="tlid-translation translation"><span title=""> pour rendre de tels contrôles:</span></span></p> +<p>Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux input pour rendre de tels contrôles:</p> <pre class="brush: html"><input type="date"> <input type="range"></pre> -<p><span class="tlid-translation translation"><span title="">Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web.</span> <span title="">En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments </span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.</span></span></p> +<p>Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.</p> -<p><span class="tlid-translation translation"><span title="">Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.</span></span></p> +<p>Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.</p> <h3 id="Entrez_WAI-ARIA">Entrez WAI-ARIA</h3> -<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> <span class="tlid-translation translation"><span title="">est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque.</span> <span title="">Trois caractéristiques principales sont définies dans la spécification:</span></span></p> +<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:</p> <ul> - <li><span class="tlid-translation translation"><span title=""><strong>Rôles</strong> - Ceux-ci définissent ce qu'un élément est ou fait.</span> <span title="">Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple</span> <span title="">role = "navigation"</span></span> ({{htmlelement("nav")}}) ou <code>role="complementary"</code> ({{htmlelement("aside")}}) <span class="tlid-translation translation"><span title="">, mais il en existe d'autres qui décrivent différentes structures de pages, telles que</span></span> <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, <span class="tlid-translation translation"><span title="">etc., que l'on trouve couramment dans les UIs</span></span>.</li> - <li><strong><span class="tlid-translation translation"><span title="">Propriétés</span></span></strong> — <span class="tlid-translation translation"><span title="">Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique.</span> <span title="">Par exemple</span></span><span class="tlid-translation translation"><span title="">,</span></span><span class="tlid-translation translation"><span title=""> </span></span> <code>aria-required="true"</code><span class="tlid-translation translation"><span title=""> spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que </span></span> <code>aria-labelledby="label"</code> <span class="tlid-translation translation"><span title="">vous permet de mettre un ID sur un élément, puis de le référencer </span><span title="">en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec</span></span> <code><label for="input"></code>. <span class="tlid-translation translation"><span title="">À titre d'exemple, vous pouvez utiliser</span></span> <code>aria-labelledby</code> <span class="tlid-translation translation"><span title="">pour spécifier qu'une description de clé contenue dans un</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">est le </span></span> label <span class="tlid-translation translation"><span title="">de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image</span></span> — <span class="tlid-translation translation"><span title="">spécifiez les informations existantes sur la page en tant que texte alternatif d’image</span></span>, <span class="tlid-translation translation"><span title="">plutôt que de devoir les répéter à l'intérieur de l'attribut</span></span> <code>alt</code>. <span class="tlid-translation translation"><span title="">Vous pouvez voir un exemple de celà à </span></span><a href="/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles">Alternatives textuelles</a>.</li> - <li><strong><span class="tlid-translation translation"><span title="">États</span></span></strong> — <span class="tlid-translation translation"><span title="">Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que</span></span> <code>aria-disabled="true"</code>, <span class="tlid-translation translation"><span title="">qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée.</span> <span title="">Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.</span></span></li> + <li><strong>Rôles</strong> - Ceux-ci définissent ce qu'un élément est ou fait. Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple role = "navigation" ({{htmlelement("nav")}}) ou <code>role="complementary"</code> ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, etc., que l'on trouve couramment dans les UIs.</li> + <li><strong>Propriétés</strong> — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, <code>aria-required="true"</code> spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que <code>aria-labelledby="label"</code> vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec <code><label for="input"></code>. À titre d'exemple, vous pouvez utiliser <code>aria-labelledby</code> pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}} est le label de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image — spécifiez les informations existantes sur la page en tant que texte alternatif d’image, plutôt que de devoir les répéter à l'intérieur de l'attribut <code>alt</code>. Vous pouvez voir un exemple de celà à <a href="/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles">Alternatives textuelles</a>.</li> + <li><strong>États</strong> — Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que <code>aria-disabled="true"</code>, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations).</span> <span title="">WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.</span></span></p> +<p>Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la</span></span> <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">définition des rôles</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">définition des rôles</a>.</p> -<p><span class="tlid-translation translation"><span title="">La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir</span></span> <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Définitions des états et des propriétés (tous les attributs aria- *)</a>.</p> +<p>La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Définitions des états et des propriétés (tous les attributs aria- *)</a>.</p> </div> <h3 id="Où_WAI-ARIA_est_supporté">Où WAI-ARIA est supporté?</h3> @@ -92,13 +92,13 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <ol> <li>Browser support is generally quite good — at the time of writing, <a href="http://caniuse.com/#feat=wai-aria">caniuse.com</a> stated that global browser support for WAI-ARIA was around 88%.</li> - <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a><span> article.</span></li> + <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a> article.</li> </ol> <p>In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.</p> <div class="note"> -<p><strong>Note</strong>: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p> +<p><strong>Note :</strong> Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p> </div> <h3 id="When_should_you_use_WAI-ARIA">When should you use WAI-ARIA?</h3> @@ -107,24 +107,24 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <ol> <li><strong>Signposts/Landmarks</strong>: ARIA's <code>role</code> attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, etc.</li> - <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li> + <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/fr/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li> <li><strong>Enhancing keyboard accessibility</strong>: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using <code>tabindex</code>).</li> <li><strong>Accessibility of non-semantic controls</strong>: When a series of nested <code><div></code>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like <code>button</code>, <code>listbox</code>, or <code>tabgroup</code>, and properties like <code>aria-required</code> or <code>aria-posinset</code> to provide further clues as to functionality.</li> </ol> -<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/en-US/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p> +<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/fr/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p> <p>But again, only use it when necessary!</p> <div class="note"> -<p><strong>Note</strong>: Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p> +<p><strong>Note :</strong> Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p> </div> <h2 id="Practical_WAI-ARIA_implementations">Practical WAI-ARIA implementations</h2> <p>In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.</p> -<p>See our section on <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p> +<p>See our section on <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p> <h3 id="SignpostsLandmarks">Signposts/Landmarks</h3> @@ -160,7 +160,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="landmarks-list.png"></p> <p>However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<code><input type="search"></code>). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.</p> @@ -202,7 +202,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.</p> -<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p> +<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/fr/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p> <p>Let's look at a quick example — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (also <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">see it running live</a>). In this example we have a simple random quote box:</p> @@ -213,7 +213,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics </blockquote> </section></pre> -<p>Our JavaScript loads a JSON file via <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p> +<p>Our JavaScript loads a JSON file via <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/fr/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p> <pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> @@ -234,7 +234,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>This will cause a screenreader to read out the content as it is updated.</p> <div class="note"> -<p><strong>Note</strong>: Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p> +<p><strong>Note :</strong> Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p> </div> <p>There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a></code> property to the section. Update your <code><section></code> tag again, like so:</p> @@ -244,11 +244,11 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>The <code>aria-atomic="true"</code> attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.</p> <div class="note"> -<p><strong>Note</strong>: You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p> +<p><strong>Note :</strong> You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p> </div> <div class="note"> -<p><strong>Note</strong>: The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p> +<p><strong>Note :</strong> The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p> </div> <h3 id="Enhancing_keyboard_accessibility">Enhancing keyboard accessibility</h3> @@ -264,7 +264,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li> </ul> -<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p> +<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/fr/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p> <h3 id="Accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</h3> @@ -272,15 +272,15 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <h4 id="Form_validation_and_error_alerts">Form validation and error alerts</h4> -<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p> +<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p> -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div></pre> <ul> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li> <li>An <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> value of <code>all</code> instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.</li> </ul> @@ -304,14 +304,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics </ol> <div class="note"> -<p><strong>Note</strong>: You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p> +<p><strong>Note :</strong> You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p> </div> -<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code><label></code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a><span class="subtitle"> for more details.</span></p> +<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code><label></code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a> for more details.</p> -<p><span class="subtitle">There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</span></p> +<p>There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</p> -<p><span class="subtitle">If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</span></p> +<p>If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</p> <pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> @@ -335,7 +335,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <h4 id="Describing_non-semantic_buttons_as_buttons">Describing non-semantic buttons as buttons</h4> -<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p> +<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p> <p>But what about screenreaders? They still won't see the elements as buttons. If we test our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.</p> @@ -346,14 +346,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.</p> <div class="note"> -<p><strong>Note</strong>: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p> +<p><strong>Note :</strong> Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p> </div> <h4 id="Guiding_users_through_complex_widgets">Guiding users through complex widgets</h4> <p>There are a whole host of other <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">roles</a> that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example <code><a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. You can see a number of userful examples in the <a href="https://dequeuniversity.com/library/">Deque university code library</a>, to give you an idea of how such controls can be made accessible.</p> -<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p> +<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p> <p>This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.</p> @@ -377,7 +377,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics </div></pre> <div class="note"> -<p><strong>Note</strong>: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p> +<p><strong>Note :</strong> The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p> </div> <p>The new features are as follows:</p> @@ -394,7 +394,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the <code>aria-hidden</code> settings (only the non-hidden tab ever has <code>aria-hidden="false"</code> set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.</p> <div class="note"> -<p><strong>Note</strong>: If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code> attribute.</p> +<p><strong>Note :</strong> If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code> attribute.</p> </div> <h2 id="Summary">Summary</h2> @@ -419,7 +419,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li> <li><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">HTML : une bonne base pour l'accessibilité</a></li> <li><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li> <li><a href="/fr/docs/Apprendre/a11y/Mobile">Accessibilité mobile</a></li> <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li> diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.html b/files/fr/learn/accessibility/what_is_accessibility/index.html index a101c80ccb..dc7376524e 100644 --- a/files/fr/learn/accessibility/what_is_accessibility/index.html +++ b/files/fr/learn/accessibility/what_is_accessibility/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/a11y/What_is_accessibility <div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> -<p class="summary">Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</p> +<p>Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -58,7 +58,7 @@ original_slug: Apprendre/a11y/What_is_accessibility <p>Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — <em>vous n'êtes pas vos utilisateurs</em>. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de <strong>technologies d'assistance</strong>).</p> <div class="note"> -<p><strong>Note </strong>: L'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs352/fr/">Handicap et santé</a> de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »</p> +<p><strong>Note :</strong> L'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs352/fr/">Handicap et santé</a> de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »</p> </div> <h3 id="Les_personnes_ayant_des_troubles_de_la_vue">Les personnes ayant des troubles de la vue</h3> @@ -71,7 +71,7 @@ original_slug: Apprendre/a11y/What_is_accessibility <li>Certains sont intégrés au système d'exploitation, comme <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X et iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (sur Chrome OS), et <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> </ul> -<p>Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guide pour tester les lecteurs d'écrans sur différents navigateurs (en)</a> pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.</p> +<p>Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guide pour tester les lecteurs d'écrans sur différents navigateurs (en)</a> pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.</p> <p>{{EmbedYouTube("IK97XMibEws")}}</p> @@ -91,94 +91,94 @@ original_slug: Apprendre/a11y/What_is_accessibility <p>Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.</p> -<p>En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche <kbd>Tab</kbd> ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test d'accessibilité avec le clavier intégré entre différents navigateurs(en)</a>.</p> +<p>En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche <kbd>Tab</kbd> ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test d'accessibilité avec le clavier intégré entre différents navigateurs(en)</a>.</p> -<p class="titre-principal">De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble <a href="https://www.insee.fr/fr/statistiques/1372411?sommaire=1372421">L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans</a> de l'INSEE.</p> +<p>De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble <a href="https://www.insee.fr/fr/statistiques/1372411?sommaire=1372421">L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans</a> de l'INSEE.</p> -<h3 id="Personnes_ayant_des_déficiences_cognitives"><span class="tlid-translation translation"><span title="">Personnes ayant des déficiences cognitives</span></span></h3> +<h3 id="Personnes_ayant_des_déficiences_cognitives">Personnes ayant des déficiences cognitives</h3> -<p><span class="tlid-translation translation"><span title="">La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que</span></span> <a href="https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah">TDAH-trouble d'hyperactivité avec déficit de l'attention</a>, <a href="https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php">TSA-trouble du spectre de l’autisme</a>, <span class="tlid-translation translation"><span title="">aux personnes atteintes de</span></span> <a href="http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s">schizophrénie</a>, <span class="tlid-translation translation"><span title="">et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc.</span></span> </p> +<p>La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que <a href="https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah">TDAH-trouble d'hyperactivité avec déficit de l'attention</a>, <a href="https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php">TSA-trouble du spectre de l’autisme</a>, aux personnes atteintes de <a href="http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s">schizophrénie</a>, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. </p> -<p><span class="tlid-translation translation"><span title="">Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page</span></span>.</p> +<p>Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.</p> -<p><span class="tlid-translation translation"><span title="">Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ;</span> l<span title="">a meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :</span></span></p> +<p>Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :</p> <ul> - <li><span class="tlid-translation translation"><span title="">les pages sont cohérentes </span></span>— <span class="tlid-translation translation"><span title="">la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les outils sont bien conçus et faciles à utiliser</span></span>.</li> - <li><span class="tlid-translation translation"><span title="">Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Les workflows sont logiques, simples et nécessitent le moins d’interactions possible.</span> <span title="">Par exemple, l'inscription et la connexion à un site web sont souvent complexes.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois.</span></span></li> - <li><span class="tlid-translation translation"><span title="">le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les points importants et le contenu sont mis en évidence.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions</span></span>.</li> + <li>les pages sont cohérentes — la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.</li> + <li>les outils sont bien conçus et faciles à utiliser.</li> + <li>Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant.</li> + <li>Les workflows sont logiques, simples et nécessitent le moins d’interactions possible. Par exemple, l'inscription et la connexion à un site web sont souvent complexes.</li> + <li>les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois.</li> + <li>le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles.</li> + <li>les points importants et le contenu sont mis en évidence.</li> + <li>les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception.</span> Elle<span title="">s profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.</span></span></p> +<p>Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.</p> -<p><span class="tlid-translation translation"><span title="">En termes de statistiques, encore une fois, les chiffres sont importants.</span> Le</span> r<a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">apport 2014 sur le statut d'invalidité </a> <span class="tlid-translation translation"><span title="">(PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive</span></span> .</p> +<p>En termes de statistiques, encore une fois, les chiffres sont importants. Le r<a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">apport 2014 sur le statut d'invalidité </a> (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La page</span></span> <a href="https://apprendreaeduquer.fr/fonctions-cognitives/">cognitives</a> <span class="tlid-translation translation"><span title="">de </span></span>apprendreaeduquer<span class="tlid-translation translation"><span title=""> fournit une extension utile de ces idées et mérite certainement d'être lue.</span></span> </p> +<p><strong>Note :</strong> La page <a href="https://apprendreaeduquer.fr/fonctions-cognitives/">cognitives</a> de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. </p> </div> -<h2 id="Implémentation_de_laccessibilité_dans_votre_projet"><span class="tlid-translation translation"><span title="">Implémentation de l'accessibilité dans votre projet</span></span></h2> +<h2 id="Implémentation_de_laccessibilité_dans_votre_projet">Implémentation de l'accessibilité dans votre projet</h2> -<p><span class="tlid-translation translation"><span title="">Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet.</span> <span title="">Ce mythe peut en réalité être vrai si :</span></span></p> +<p>Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Vous essayez de "moderniser" l'accessibilité sur un site Web existant qui présente d'importants problèmes d'accessibilité.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Vous avez seulement commencé à prendre en compte l'accessibilité et à découvrir des problèmes liés aux dernières étapes d'un projet.</span></span></li> + <li>Vous essayez de "moderniser" l'accessibilité sur un site Web existant qui présente d'importants problèmes d'accessibilité.</li> + <li>Vous avez seulement commencé à prendre en compte l'accessibilité et à découvrir des problèmes liés aux dernières étapes d'un projet.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.</span></span></p> +<p>Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.</p> -<p><span class="tlid-translation translation"><span title="">Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles).</span> <span title="">Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes</span></span> <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">alternative text</a> <span class="tlid-translation translation"><span title="">ou le texte du lien incorrect </span></span>—<span class="tlid-translation translation"><span title=""> voir</span></span> <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), <span class="tlid-translation translation"><span title="">et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment.</span> <span title="">des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:</span></span></p> +<p>Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">alternative text</a> ou le texte du lien incorrect — voir <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ?</span></span></li> - <li><span class="tlid-translation translation"><span title="">Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ?</span></span></li> - <li><span class="tlid-translation translation"><span title="">Les boutons de mon UI sont-ils accessibles via le clavier et les interfaces tactiles ?</span></span></li> + <li>Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ?</li> + <li>Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ?</li> + <li>Les boutons de mon UI sont-ils accessibles via le clavier et les interfaces tactiles ?</li> </ul> -<p><span class="tlid-translation translation"><span title="">Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives.</span> <span title="">Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ?</span> <span title="">Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ?</span> <span title="">Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.</span></span></p> +<p>Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.</p> -<p><span class="tlid-translation translation"><span title="">Aussi, soyez réaliste.</span> <span title="">"100% d'accessibilité" est un idéal impossible à obtenir </span></span>— <span class="tlid-translation translation"><span title="">vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser </span></span>— <span class="tlid-translation translation"><span title="">mais vous devez en faire autant que vous le pouvez.</span> <span title="">Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données.</span> <span title="">Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer.</span></span> </p> +<p>Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. </p> -<p><span class="tlid-translation translation"><span title="">D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.</span></span></p> +<p>D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.</p> -<p><span class="tlid-translation translation"><span title="">Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible.</span> <span title="">Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.</span></span></p> +<p>Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Notre article</span></span> <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility"> Gérer les problèmes courants d'accessibilité</a> <span class="tlid-translation translation"><span title="">couvre les spécificités d'accessibilité qui doivent être testées plus en détail.</span></span></p> +<p><strong>Note :</strong> Notre article <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility"> Gérer les problèmes courants d'accessibilité</a> couvre les spécificités d'accessibilité qui doivent être testées plus en détail.</p> </div> -<p><span class="tlid-translation translation"><span title="">Résumer</span></span> :</p> +<p>Résumer :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Pensez à l'accessibilité dès le début d'un projet et testez tôt et souvent.</span> <span title="">Comme tout autre bogue, un problème d'accessibilité devient d'autant plus coûteux à résoudre qu'il est découvert tard</span></span>.</li> - <li><span class="tlid-translation translation"><span title="">N'oubliez pas que de nombreuses pratiques optimales en matière d'accessibilité profitent à tout le monde, pas uniquement aux utilisateurs handicapés.</span> <span title="">Par exemple, le balisage sémantique lean n’est pas seulement bon pour les lecteurs d’écran, il est également rapide à charger et performant, donc meilleur pour tout le monde, en particulier pour les appareils mobiles et/ou les connexions lentes.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Publier une déclaration d'accessibilité sur votre site et interagir avec les personnes ayant des problèmes</span></span>.</li> + <li>Pensez à l'accessibilité dès le début d'un projet et testez tôt et souvent. Comme tout autre bogue, un problème d'accessibilité devient d'autant plus coûteux à résoudre qu'il est découvert tard.</li> + <li>N'oubliez pas que de nombreuses pratiques optimales en matière d'accessibilité profitent à tout le monde, pas uniquement aux utilisateurs handicapés. Par exemple, le balisage sémantique lean n’est pas seulement bon pour les lecteurs d’écran, il est également rapide à charger et performant, donc meilleur pour tout le monde, en particulier pour les appareils mobiles et/ou les connexions lentes.</li> + <li>Publier une déclaration d'accessibilité sur votre site et interagir avec les personnes ayant des problèmes.</li> </ul> -<h2 id="Directives_daccessibilité_et_loi"><span class="tlid-translation translation"><span title="">Directives d'accessibilité et loi</span></span></h2> +<h2 id="Directives_daccessibilité_et_loi">Directives d'accessibilité et loi</h2> -<p><span class="tlid-translation translation"><span title="">Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue.</span> <span title="">Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.</span></span></p> +<p>Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.</p> <ul> - <li><span class="tlid-translation translation"><span title="">Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité.</span> <span title="">Celles-ci s'appellent le</span></span> <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> (WCAG), <span class="tlid-translation translation"><span title="">et ne constituent en aucun cas une lecture brève.</span> <span title="">Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes.</span> <span title="">Le meilleur endroit pour commencer à apprendre et </span></span> <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. <span class="tlid-translation translation"><span title="">Il n'est pas nécessaire d'apprendre le WCAG par cœur </span></span>— <span class="tlid-translation translation"><span title="">soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations).</span></span> </li> - <li><span class="tlid-translation translation"><span title="">Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population </span></span>— <span class="tlid-translation translation"><span title="">par exemple</span></span> <a href="http://www.section508.gov/content/learn">Section 508 of the Rehabilitation Act</a> en US, <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Federal Ordinance on Barrier-Free Information Technology</a> en Germany, la lois sur <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act</a> <span class="tlid-translation translation"><span title="">Royaume-Uni</span></span>, <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a> en Italy, le <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Disability Discrimination Act</a> en Australia, etc.</li> + <li>Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité. Celles-ci s'appellent le <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> (WCAG), et ne constituent en aucun cas une lecture brève. Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes. Le meilleur endroit pour commencer à apprendre et <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Il n'est pas nécessaire d'apprendre le WCAG par cœur — soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations). </li> + <li>Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population — par exemple <a href="http://www.section508.gov/content/learn">Section 508 of the Rehabilitation Act</a> en US, <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Federal Ordinance on Barrier-Free Information Technology</a> en Germany, la lois sur <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act</a> Royaume-Uni, <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a> en Italy, le <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Disability Discrimination Act</a> en Australia, etc.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée.</span> <span title="">pour savoir quelles sont vos lois.</span> <span title="">Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent</span></span>.</p> +<p>Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.</p> -<p><span class="tlid-translation translation"><span title="">Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus.</span> <span title="">En cas de doute, demandez conseil à un avocat qualifié.</span> <span title="">Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.</span></span></p> +<p>Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.</p> -<h2 id="API_daccessibilité"><span class="tlid-translation translation"><span title="">API d'accessibilité</span></span></h2> +<h2 id="API_daccessibilité">API d'accessibilité</h2> -<p><span class="tlid-translation translation"><span title="">Les navigateurs web utilisent des <strong>API d’accessibilité</strong> spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) </span></span>— <span class="tlid-translation translation"><span title="">les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou</span> <span title="">JavaScript.</span> <span title="">Ces informations sont structurées dans une arborescence d'informations appelée <strong>arborescence d'accessibilité</strong>.</span></span></p> +<p>Les navigateurs web utilisent des <strong>API d’accessibilité</strong> spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée <strong>arborescence d'accessibilité</strong>.</p> -<p><span class="tlid-translation translation"><span title="">Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles</span></span> :</p> +<p>Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :</p> <ul> <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> @@ -188,12 +188,10 @@ original_slug: Apprendre/a11y/What_is_accessibility <li>iOS: UIAccessibility</li> </ul> -<p><span class="tlid-translation translation"><span title="">Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la</span></span> <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA specification</a>, <span class="tlid-translation translation"><span title="">qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité.</span> <span title="">Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p> +<p>Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA specification</a>, qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> -</div> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail.</span> <span title="">Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.</span></span></p> +<p>Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.</p> <p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> diff --git a/files/fr/learn/common_questions/available_text_editors/index.html b/files/fr/learn/common_questions/available_text_editors/index.html index 156fde4e17..42107015ba 100644 --- a/files/fr/learn/common_questions/available_text_editors/index.html +++ b/files/fr/learn/common_questions/available_text_editors/index.html @@ -11,11 +11,9 @@ translation_of: Learn/Common_questions/Available_text_editors original_slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> <p>Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index 3e49f7571d..179fa1519a 100644 --- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -12,11 +12,9 @@ tags: translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web --- -<div class="summary"> <p>Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -29,7 +27,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web </tbody> </table> -<p id="Summary">Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?</p> +<p>Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?</p> <p>Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.</p> @@ -49,11 +47,11 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Allons sur notre site web : <code>http://demozilla.hebergeurexemple.net/</code>. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !</p> -<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/11759/Capture%20du%202015-10-12%2017-21-20.png" style="height: 174px; width: 364px;"></p> +<p><img alt="Oops, the ‘unicorn’ image is missing" src="Capture%20du%202015-10-12%2017-21-20.png"></p> <p>Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (<strong>Outils ➤ Développement Web ➤ Réseau</strong>) puis rechargeons la page :</p> -<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/11763/Capture%20du%202015-10-12%2018-21-23.png" style="height: 299px; width: 681px;"></p> +<p><img alt="The image has a 404 error" src="Capture%20du%202015-10-12%2018-21-23.png"></p> <p>Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.</p> @@ -62,7 +60,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :</p> <dl> - <dt><strong><span id="cke_bm_110S" class="hidden"> </span>200 : OK</strong></dt> + <dt><strong> 200 : OK</strong></dt> <dd>La ressource demandée a bien été transmise.</dd> <dt><strong>301 : Déplacée de façon permanente (<em>Moved permanently</em>)</strong></dt> <dd>La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.</dd> @@ -87,15 +85,15 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Où est donc le problème ?</p> -<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/11765/Capture%20du%202015-10-12%2018-45-07.png" style="height: 206px; width: 263px;"></p> +<p><img alt="Le list of images in our project" src="Capture%20du%202015-10-12%2018-45-07.png"></p> <p>À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML <code>licornes.png</code> plutôt que <code>licorne.png</code>. En corrigeant cette erreur avec l'attribut <code>src</code></p> -<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/11767/Capture%20du%202015-10-12%2018-50-56.png" style="height: 162px; width: 852px;"></p> +<p><img alt="Deleting the ‘s’" src="Capture%20du%202015-10-12%2018-50-56.png"></p> -<p>Puis en sauvegardant et <a href="/en-US/Learn/Upload_files_to_a_web_server">en envoyant le fichier vers le serveur</a>, on peut ensuite recharger la page dans le navigateur :</p> +<p>Puis en sauvegardant et <a href="/fr/Learn/Upload_files_to_a_web_server">en envoyant le fichier vers le serveur</a>, on peut ensuite recharger la page dans le navigateur :</p> -<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/11769/Capture%20du%202015-10-12%2018-53-50.png" style="height: 422px; width: 531px;"></p> +<p><img alt="The image loads corectly in the browser" src="Capture%20du%202015-10-12%2018-53-50.png"></p> <p>Et voilà, revenons sur les status {{Glossary("HTTP")}} :</p> @@ -114,7 +112,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Dans la capture suivante, nous avons voulu accéder à <code>http://demozilla.hebergeurexemple.net/</code> mais nous avons oublié un « m » :</p> -<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/11771/Capture%20du%202015-10-12%2018-58-19.png" style="height: 511px; width: 803px;"></p> +<p><img alt="Address unreachable" src="Capture%20du%202015-10-12%2018-58-19.png"></p> <p>L'adresse est introuvable… en effet.</p> @@ -128,7 +126,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Pour voir ces erreurs, ouvrez la console (<strong>Outils ➤ Développement web ➤ Console web</strong>) and puis rechargez la page:</p> -<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/11773/Capture%20du%202015-10-12%2019-10-52.png" style="height: 391px; width: 461px;"></p> +<p><img alt="A Javascript error is shown in the Console" src="Capture%20du%202015-10-12%2019-10-52.png"></p> <p>Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans <a href="/fr/Apprendre/JavaScript">une autre série d'articles</a>).</p> @@ -140,7 +138,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme <a href="http://www.webpagetest.org/">webpagetest.org</a> ou des modules complémentaires comme <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> qui peuvent fournir des indications intéressantes :</p> -<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p> +<p><img alt="Yslow diagnostics" src="yslow-diagnostics.png"></p> <p>Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.</p> diff --git a/files/fr/learn/common_questions/common_web_layouts/index.html b/files/fr/learn/common_questions/common_web_layouts/index.html index 2b54571c67..5fba68714b 100644 --- a/files/fr/learn/common_questions/common_web_layouts/index.html +++ b/files/fr/learn/common_questions/common_web_layouts/index.html @@ -11,11 +11,10 @@ translation_of: Learn/Common_questions/Common_web_layouts original_slug: Apprendre/Concevoir_page_web --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> + <p>Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -53,19 +52,19 @@ original_slug: Apprendre/Concevoir_page_web <p><strong>Dispostion à une colonne : </strong>particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.</p> -<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p> +<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="1-col-layout.png"></p> <p><strong>Disposition à deux colonnes :</strong> souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.</p> -<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p> +<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="2-col-layout-right.png"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="2-col-layout-left.png"></p> <p><strong>Disposition à trois colonnes :</strong> adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).</p> -<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p> +<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="3-col-layout.png"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="3-col-layout-alt.png"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="3-col-layout-alt2.png"></p> <p>Il est aussi possible de mélanger tous ces modèles classiques :</p> -<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p> +<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="1-col-layout-alt.png"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="2-col-layout-left-alt.png"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="2-col-layout-mix.png"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="2-col-layout-mix-alt.png">…</p> <p>Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.</p> @@ -83,7 +82,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://www.invisionapp.com/" rel="external">Invision</a> </strong>: un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.</p> -<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p> +<p><img alt="Example of a 1 column layout in the wild" src="screenshot-product.jpg"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="screenshot-product-overlay.jpg"></p> <p>Un style simple et direct. N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.</p> @@ -91,7 +90,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).</p> -<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;"> <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p> +<p><img alt="Example of a 2 column layout for a blog" src="screenshot-blog.jpg"> <img alt="A 2 column layout with the main content on the left column" src="screenshot-blog-overlay.jpg"></p> <p>Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire). La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être <em>directement relié</em>.</p> @@ -99,7 +98,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…</p> -<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p> +<p><img alt="Example of a false 3 columns layout" src="screenshot-education.jpg"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="screenshot-education-overlay.jpg"></p> <p>…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (<em>float</em> en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.</p> @@ -111,7 +110,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong>L'<a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opéra de Paris</a>.</strong></p> -<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p> +<p><img alt="An example of a tricky layout." src="screenshot-opera.jpg"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="screenshot-opera-overlay.jpg"></p> <p>Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts. L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).</p> diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html index 47881342ef..cecce85e86 100644 --- a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html @@ -11,11 +11,10 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> + <p>Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -32,7 +31,7 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p> +<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -45,12 +44,12 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs <p>Pour contrôler le contraste, vous pouvez télécharger et installer <a href="http://www.paciellogroup.com/resources/contrastanalyser/">l'analyseur de contraste</a> du Groupe Paciello.</p> <div class="note"> -<p><strong>Note :</strong> Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.</p> +<p><strong>Note :</strong> Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.</p> </div> <p>Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :</p> -<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p> +<p><img alt="Colour contrast on this page: excellent!" src="colour-contrast.png"></p> <p>Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..</p> @@ -147,7 +146,7 @@ span.subheading { font-size:1rem; } <p>C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'<a href="http://caniuse.com/#search=rem">Internet Explorer 9 et dans n'importe quel autre navigateur récent</a>, n'hésitez pas à l'utiliser.</p> <div class="note"> -<p><strong>Note :</strong> Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.</p> +<p><strong>Note :</strong> Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.</p> </div> <h4 id="Pourquoi_aurais-je_besoin_d'utiliser_des_unités_proportionnelles">Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?</h4> @@ -162,7 +161,7 @@ span.subheading { font-size:1rem; } </ul> <div class="note"> -<p><strong>Note :</strong> Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des <code>em</code>s, quitte à faire un peu de mathématique en chemin.</p> +<p><strong>Note :</strong> Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des <code>em</code>s, quitte à faire un peu de mathématique en chemin.</p> </div> <h3 id="Largeur_de_ligne">Largeur de ligne</h3> @@ -220,7 +219,7 @@ span.subheading { font-size:1rem; } <p>Si l'image peut être décrite succintement, vous pouvez fournir un attribut <code>alt</code> qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut <code>longdesc</code>. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.</p> <div class="note"> -<p><strong>Note :</strong> L'utilisation voire l'existence de <code>longdesc</code> ont toujours été débatues. Veuillez vous référer à la page du W3C' <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> pour une explication complète et des exemples détaillés.</p> +<p><strong>Note :</strong> L'utilisation voire l'existence de <code>longdesc</code> ont toujours été débatues. Veuillez vous référer à la page du W3C' <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> pour une explication complète et des exemples détaillés.</p> </div> <h4 id="AudioVidéo">Audio/Vidéo</h4> @@ -245,4 +244,4 @@ span.subheading { font-size:1rem; } <h2 id="Prochaines_étapes">Prochaines étapes</h2> -<p>Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec <a href="/en-US/docs/Learn/Basics_of_UX_Design">les bases de l'ergonomie ou UX (<em>User Experience</em> en anglais)</a>.</p> +<p>Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec <a href="/fr/docs/Learn/Basics_of_UX_Design">les bases de l'ergonomie ou UX (<em>User Experience</em> en anglais)</a>.</p> diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.html b/files/fr/learn/common_questions/how_does_the_internet_work/index.html index fb05ae9679..8a6850c59d 100644 --- a/files/fr/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/How_does_the_Internet_work original_slug: Apprendre/Fonctionnement_Internet --- -<div class="summary"> <p>Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -44,38 +42,38 @@ original_slug: Apprendre/Fonctionnement_Internet <p>Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un <a href="https://fr.wikipedia.org/wiki/Ethernet" rel="external">câble Ethernet</a>), soit sans fil (par exemple, via <a href="http://fr.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> ou <a href="http://fr.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Tous ces types de connexions sont possibles sur les ordinateurs modernes.</p> <div class="note"> -<p><strong>Note :</strong> À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.</p> +<p><strong>Note :</strong> À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.</p> </div> -<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> +<p><img alt="Two computers linked together" src="internet-schema-1.png"></p> <p>Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!</p> -<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> +<p><img alt="Ten computers all together" src="internet-schema-2.png"></p> <p>Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle <em>routeur</em>. Ce <em>routeur</em> n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.</p> <p>Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.</p> -<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> +<p><img alt="Ten computers with a router" src="internet-schema-3.png"></p> <h3 id="Un_réseau_de_réseaux">Un réseau de réseaux</h3> <p>Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul <em>routeur</em> ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un <em>routeur</em> n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux <em>routeurs</em> ? Oui, absolument, et en voici le résultat!</p> -<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> +<p><img alt="Two routers linked together" src="internet-schema-4.png"></p> <p>En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.</p> -<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> +<p><img alt="Routers linked to routers" src="internet-schema-5.png"></p> <p>Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé <em>modem</em>. Ce <em>modem</em> convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.</p> -<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> +<p><img alt="A router linked to a modem" src="internet-schema-6.png"></p> <p>Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des <em>routeurs</em> qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).</p> -<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> +<p><img alt="Full Internet stack" src="internet-schema-7.png"></p> <h3 id="Localiser_un_ordinateur">Localiser un ordinateur</h3> @@ -83,7 +81,7 @@ original_slug: Apprendre/Fonctionnement_Internet <p>C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé <em>nom de domaine, </em>est souvent associé aux adresses IP. Par example, <code>google.com</code> est le nom de domaine associé à l'adresse IP <code>173.194.121.32</code>. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.</p> -<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> +<p><img alt="Show how a domain name can alias an IP address" src="dns-ip.png"></p> <h3 id="L'Internet_et_le_web">L'Internet et le web</h3> diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.html b/files/fr/learn/common_questions/how_much_does_it_cost/index.html index 713508e03a..23d1f14f68 100644 --- a/files/fr/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/How_much_does_it_cost original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte --- -<div class="summary"> <p>Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -154,7 +152,7 @@ original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte <h2 id="Prochaines_étapes">Prochaines étapes</h2> -<p>Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">préparer un environnement de travail</a>.</p> +<p>Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de <a href="/fr/docs/Learn/Set_up_a_basic_working_environment">préparer un environnement de travail</a>.</p> <ul> <li>Vous pouvez lire <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">cet article sur comment choisir et installer un éditeur de texte</a>.</li> diff --git a/files/fr/learn/common_questions/index.html b/files/fr/learn/common_questions/index.html index f51f3427f8..5e0ed2d208 100644 --- a/files/fr/learn/common_questions/index.html +++ b/files/fr/learn/common_questions/index.html @@ -10,7 +10,7 @@ original_slug: Apprendre/Common_questions --- <div>{{LearnSidebar}}</div> -<p class="summary">Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur <a href="/en-US/docs/Learn/HTML">HTML</a> ou <a href="/en-US/docs/Learn/CSS">CSS</a>.) Ces articles sont conçus pour être lus de manière indépendante.</p> +<p>Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur <a href="/fr/docs/Learn/HTML">HTML</a> ou <a href="/fr/docs/Learn/CSS">CSS</a>.) Ces articles sont conçus pour être lus de manière indépendante.</p> <h2 id="Comment_le_Web_fonctionne">Comment le Web fonctionne</h2> @@ -18,27 +18,27 @@ original_slug: Apprendre/Common_questions <dl> <dt> - <h3 id="Comment_fonctionne_Internet"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">Comment fonctionne Internet?</a></h3> + <a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work">Comment fonctionne Internet?</a> </dt> <dd><strong>Internet</strong> est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.</dd> <dt> - <h3 id="Quelle_est_la_différence_entre_une_page_web_un_site_web_un_serveur_web_et_un_moteur_de_recherche"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?</a> </dt> <dd>Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.</dd> <dt> - <h3 id="Quest-ce_quune_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL?</a> </dt> <dd>Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.</dd> <dt> - <h3 id="Quest-ce_quun_nom_de_domaine"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Qu'est-ce qu'un nom de domaine?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_a_domain_name">Qu'est-ce qu'un nom de domaine?</a> </dt> <dd>Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.</dd> <dt> - <h3 id="Quest-ce_quun_serveur_Web"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur Web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur Web?</a> </dt> <dd>Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.</dd> <dt> - <h3 id="Que_sont_les_liens_hypertextes"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Que sont les liens hypertextes?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_are_hyperlinks">Que sont les liens hypertextes?</a> </dt> <dd>Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.</dd> </dl> @@ -49,43 +49,43 @@ original_slug: Apprendre/Common_questions <dl> <dt> - <h3 id="Combien_ça_coûte_de_créer_quelque_chose_sur_le_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de créer quelque chose sur le Web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de créer quelque chose sur le Web?</a> </dt> <dd>Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations. Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).</dd> <dt> - <h3 id="Quel_logiciel_est_nécessaire_pour_construire_un_site_web"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Quel logiciel est nécessaire pour construire un site web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_software_do_I_need">Quel logiciel est nécessaire pour construire un site web?</a> </dt> <dd>Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.</dd> <dt> - <h3 id="Quels_sont_les_éditeurs_disponibles"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">Quels sont les éditeurs disponibles?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Available_text_editors">Quels sont les éditeurs disponibles?</a> </dt> <dd>Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.</dd> <dt> - <h3 id="Comment_installer_un_environnement_de_base_pour_travailler"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">Comment installer un environnement de base pour travailler?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Set_up_a_basic_working_environment">Comment installer un environnement de base pour travailler?</a> </dt> <dd>Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.</dd> <dt> - <h3 id="Que_sont_les_outils_de_développement_du_navigateur"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement du navigateur?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement du navigateur?</a> </dt> <dd>Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.</dd> <dt> - <h3 id="Comment_être_sûr_que_votre_site_fonctionne_correctement"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Comment être sûr que votre site fonctionne correctement?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Comment être sûr que votre site fonctionne correctement?</a> </dt> <dd>Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.</dd> <dt> - <h3 id="Comment_transférer_des_fichiers_vers_un_serveur_web"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">Comment transférer des fichiers vers un serveur web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Upload_files_to_a_web_server">Comment transférer des fichiers vers un serveur web?</a> </dt> - <dd>Cet article montre comment mettre son site en ligne en utilisant un outil <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.</dd> + <dd>Cet article montre comment mettre son site en ligne en utilisant un outil <a href="/fr/docs/Glossary/FTP">FTP</a> — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.</dd> <dt> - <h3 id="Comment_utiliser_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">Comment utiliser GitHub Pages?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Using_GitHub_Pages">Comment utiliser GitHub Pages?</a> </dt> <dd>Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.</dd> <dt> - <h3 id="Comment_héberger_son_site_sur_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger son site sur Google App Engine?</a></h3> + <a href="/fr/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger son site sur Google App Engine?</a> </dt> <dd>Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.</dd> <dt> - <h3 id="Quels_outils_sont_disponibles_pour_corriger_et_améliorer_les_performances_du_site_web"><a href="/en-US/docs/Tools/Performance">Quels outils sont disponibles pour corriger et améliorer les performances du site web?</a></h3> + <a href="/fr/docs/Tools/Performance">Quels outils sont disponibles pour corriger et améliorer les performances du site web?</a> </dt> <dd>Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.</dd> </dl> @@ -96,23 +96,23 @@ original_slug: Apprendre/Common_questions <dl> <dt> - <h3 id="Comment_démarrer_dans_la_conception_de_mon_site_web"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">Comment démarrer dans la conception de mon site web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Thinking_before_coding">Comment démarrer dans la conception de mon site web?</a> </dt> <dd>Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.</dd> <dt> - <h3 id="Que_contiennent_les_mises_en_page_classiques"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">Que contiennent les mises en page classiques?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Common_web_layouts">Que contiennent les mises en page classiques?</a> </dt> <dd>Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.</dd> <dt> - <h3 id="Quest-ce-que_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">Qu'est-ce-que l'accessibilité?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_accessibility">Qu'est-ce-que l'accessibilité?</a> </dt> <dd>Cet article est une introduction aux concepts de base de l'accessibilité web.</dd> <dt> - <h3 id="Comment_concevoir_pour_tous_les_types_dutilisateurs"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">Comment concevoir pour tous les types d'utilisateurs?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Design_for_all_types_of_users">Comment concevoir pour tous les types d'utilisateurs?</a> </dt> <dd>Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.</dd> <dt> - <h3 id="Quelles_fonctionnalités_HTML_favorisent_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">Quelles fonctionnalités HTML favorisent l'accessibilité?</a></h3> + <a href="/fr/docs/Learn/Common_questions/HTML_features_for_accessibility">Quelles fonctionnalités HTML favorisent l'accessibilité?</a> </dt> <dd>Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.</dd> </dl> @@ -122,7 +122,7 @@ original_slug: Apprendre/Common_questions <p>Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:</p> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></li> - <li><a href="/en-US/docs/Learn/CSS/Howto">Utiliser CSS pour résoudre des problèmes courants</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></li> + <li><a href="/fr/docs/Learn/CSS/Howto">Utiliser CSS pour résoudre des problèmes courants</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a></li> </ul> diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html index c317575c8b..9bbe2a62c4 100644 --- a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche --- <p>Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche. Ces termes sont souvent une source de confusion ou utilisés incorrectement : voyons leur signification.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -74,7 +74,7 @@ original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche </ul> <div class="note"> -<p><strong>Note : </strong>Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers <a href="/fr/docs/Glossary/PDF">PDF</a> ou des images, mais le terme <strong>page web</strong> désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme <strong>document</strong>.</p> +<p><strong>Note :</strong> Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers <a href="/fr/docs/Glossary/PDF">PDF</a> ou des images, mais le terme <strong>page web</strong> désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme <strong>document</strong>.</p> </div> <p>Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :</p> diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html index ef5a5b62fd..c38eff9431 100644 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html @@ -16,15 +16,13 @@ tags: translation_of: Learn/Common_questions/set_up_a_local_testing_server original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local --- -<div class="summary"> <p>Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir <a href="/en-US/docs/Learn/How_the_Internet_works">comment Internet fonctionne</a> et <a href="/en-US/docs/Learn/What_is_a_Web_server">ce qu'est un serveur Web</a>.</td> + <td>Vous devez au préalable savoir <a href="/fr/docs/Learn/How_the_Internet_works">comment Internet fonctionne</a> et <a href="/fr/docs/Learn/What_is_a_Web_server">ce qu'est un serveur Web</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -44,7 +42,7 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local <p>Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :</p> <ul> - <li><strong>Ils sont basés sur des requêtes asynchrones</strong>. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récolter des données depuis le serveur </a>) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> pour en savoir plus).</li> + <li><strong>Ils sont basés sur des requêtes asynchrones</strong>. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récolter des données depuis le serveur </a>) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> pour en savoir plus).</li> <li><strong>Ils mettent en œuvre un langage spécifique, tournant sur le serveur</strong>. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.</li> </ul> @@ -70,12 +68,12 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local <li> <p>Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :</p> - <pre class="brush: bash notranslate">python -V</pre> + <pre class="brush: bash">python -V</pre> </li> <li> <p>Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande <code>cd</code>, placer votre répertoire de travail dans le dossier contenant l'exemple.</p> - <pre class="brush: bash notranslate">#inclure le nom du dossier pour y s'y rendre, + <pre class="brush: bash">#inclure le nom du dossier pour y s'y rendre, #par exemple cd Bureau # utiliser deux points pour remonter dans @@ -85,10 +83,10 @@ cd ..</pre> <li> <p>Entrer la commande pour démarrer le serveur dans ce dossier.</p> - <pre class="brush: bash notranslate"># Si la version de Python retournée est ultérieur à 3.X + <pre class="brush: bash"># Si la version de Python retournée est ultérieur à 3.X python3 -m http.server # Si la version de Python retournée est ultérieur à 2.X -python -m <code>SimpleHTTPServer</code></pre> +python -m SimpleHTTPServer</pre> </li> <li> <p>Par défaut, il affiche la liste des fichiers du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant l'URL <code>localhost:8000</code> dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.</p> @@ -96,7 +94,7 @@ python -m <code>SimpleHTTPServer</code></pre> </ol> <div class="note"> -<p><strong>Note </strong>: Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple <code>python -m http.server 7800</code> (Python 3.x) ou <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse <code>localhost:7800</code>.</p> +<p><strong>Note :</strong> Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple <code>python -m http.server 7800</code> (Python 3.x) ou <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse <code>localhost:7800</code>.</p> </div> <h2 id="Faire_fonctionner_localement_des_langages_serveur">Faire fonctionner localement des langages serveur</h2> @@ -104,7 +102,7 @@ python -m <code>SimpleHTTPServer</code></pre> <p>Le module <code>SimpleHTTPServer</code> de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :</p> <ul> - <li>Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask en utilisant <code>pip3 install flask</code>. À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple <code>python3 python-example.py</code>, puis consulter <code>localhost:5000</code> dans votre navigateur.</li> - <li>Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> + <li>Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant <a href="/fr/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'<a href="/fr/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask en utilisant <code>pip3 install flask</code>. À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple <code>python3 python-example.py</code>, puis consulter <code>localhost:5000</code> dans votre navigateur.</li> + <li>Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir <a href="/fr/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> <li>Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut interpréter PHP. De bonnes options pour tester PHP localement sont <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.</li> </ul> diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.html b/files/fr/learn/common_questions/thinking_before_coding/index.html index 7ebcaffe6d..7756cfd9c5 100644 --- a/files/fr/learn/common_questions/thinking_before_coding/index.html +++ b/files/fr/learn/common_questions/thinking_before_coding/index.html @@ -10,11 +10,9 @@ original_slug: Apprendre/Commencez_votre_projet_web --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> <p>Cette article présente l'étape primordiale de n'importe quel projet définir ce qu'on souhaite accomplir avec.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis </th> @@ -43,7 +41,7 @@ original_slug: Apprendre/Commencez_votre_projet_web <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Il n'y a pas la pédagogie active disponible pour l'instant. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p> +<p><em>Il n'y a pas la pédagogie active disponible pour l'instant. <a href="/fr/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -54,7 +52,7 @@ original_slug: Apprendre/Commencez_votre_projet_web Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.</p> <div class="note"> -<p><strong>Remarque </strong> Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent <a href="https://fr.wikipedia.org/wiki/Id%C3%A9ation">l'idéation</a>, <a href="https://fr.wikipedia.org/wiki/Planification">la planification</a> et <a href="https://fr.wikipedia.org/wiki/Gestion_de_projet">la gestion de projet</a>.</p> +<p><strong>Note :</strong> Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent <a href="https://fr.wikipedia.org/wiki/Id%C3%A9ation">l'idéation</a>, <a href="https://fr.wikipedia.org/wiki/Planification">la planification</a> et <a href="https://fr.wikipedia.org/wiki/Gestion_de_projet">la gestion de projet</a>.</p> </div> <h3 id="Qu'est-ce_que_je_veux_accomplir_exactement">Qu'est-ce que je veux accomplir exactement ?</h3> @@ -114,7 +112,7 @@ original_slug: Apprendre/Commencez_votre_projet_web </thead> <tbody> <tr> - <td style="vertical-align: top;">Permettre aux gens d'écouter votre musique</td> + <td>Permettre aux gens d'écouter votre musique</td> <td> <ol> <li>Enregistrer de la musique</li> @@ -124,7 +122,7 @@ original_slug: Apprendre/Commencez_votre_projet_web </td> </tr> <tr> - <td style="vertical-align: top;">Parler de votre musique</td> + <td>Parler de votre musique</td> <td> <ol> <li>Écrire quelques articles pour lancer la discussion</li> @@ -134,7 +132,7 @@ original_slug: Apprendre/Commencez_votre_projet_web </td> </tr> <tr> - <td style="vertical-align: top;">Rencontrer d'autres musiciens</td> + <td>Rencontrer d'autres musiciens</td> <td> <ol> <li>Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)</li> @@ -143,23 +141,19 @@ original_slug: Apprendre/Commencez_votre_projet_web </td> </tr> <tr> - <td style="vertical-align: top;">Vendre des goodies</td> + <td>Vendre des goodies</td> <td> <ol> <li>Créer les goodies</li> <li>Stocker les goodies</li> <li>Trouver un moyen de gérer l'expédition</li> - <li> - <div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;">Trouver un moyen de gérer le paiement</div> - </div> - </li> + <li>Trouver un moyen de gérer le paiement</li> <li>Faire un système sur votre site pour que les gens passe des commandes</li> </ol> </td> </tr> <tr> - <td style="vertical-align: top;">Enseigner la musique à travers des vidéos</td> + <td>Enseigner la musique à travers des vidéos</td> <td> <ol> <li>Enregistrer vos leçons vidéos</li> diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html index a385e6afb0..56f5dbdfa3 100644 --- a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html +++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/Upload_files_to_a_web_server original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web --- -<div class="summary"> <p>Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. </p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -25,11 +23,11 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web </tbody> </table> -<p>Maintenant que vous avez <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">construit une page web</a>, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.</p> +<p>Maintenant que vous avez <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">construit une page web</a>, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.</p> <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> +<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -38,19 +36,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car <a href="https://addons.mozilla.org/firefox/addon/fireftp/">c'est un module complémentaire</a>.</p> <div class="note"> -<p>Il existe de nombreuses autres options, voir <a href="/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client">les outils de publications : les clients FTP</a> pour plus d'informations.</p> +<p><strong>Note :</strong> Il existe de nombreuses autres options, voir <a href="/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client">les outils de publications : les clients FTP</a> pour plus d'informations.</p> </div> <p>Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :</p> <ol> - <li><strong>Menu de Firefox <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li> + <li><strong>Menu de Firefox <img alt="" src="2014-01-10-13-08-08-f52b8c.png"> ➤ <img alt="Developer" src="Screenshot%20from%202014-11-26%2014:24:56.png"> ➤ FireFTP</strong></li> <li><strong>Outils </strong>➤ <strong>Développement web</strong> ➤ <strong>FireFTP</strong></li> </ol> <p>Vous devriez voir apparaître cette fenêtre :</p> -<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p> +<p><img alt="FireFTP : the interface, not connected to a server" src="fireftp-default.png"></p> <h3 id="Se_connecter">Se connecter</h3> @@ -77,7 +75,7 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Tout d'abord, jetons un coup d'œil à <code>http://demozilla.hebergeurexemple.net/</code> — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :</p> -<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p> +<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="demozilla-empty.png"></p> <div class="note"> <p><strong>Note :</strong> Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».</p> @@ -85,13 +83,13 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Pour connecter votre client FTP au serveur distant, cliquez sur le bouton <em>« Créer un compte »</em> de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :</p> -<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p> +<p><img alt="FireFTP: creating an account" src="fireftp-createlogin.png"></p> <h3 id="Ici_et_là-bas_la_vue_locale_et_la_vue_distante">Ici et là-bas : la vue locale et la vue distante</h3> <p>Vous pouvez ensuite vous connecter sur ce nouveau compte :</p> -<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p> +<p><img alt="The FTP interface, once logged" src="fireftp-logged.png"></p> <p>Examinons cet écran :</p> @@ -105,19 +103,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous <code>Public/htdocs</code> pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :</p> -<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p> +<p><img alt="Changing to the htdocs folder on the remote server" src="remote-htdocs-empty.png"></p> <p>Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :</p> -<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p> +<p><img alt="The files show in the remote view: they have been pushed to the server" src="files-dropped-onto-the-server.png"></p> <h3 id="Est-ce_que_mes_fichiers_sont_bien_en_ligne">Est-ce que mes fichiers sont bien en ligne ?</h3> <p>Jusqu'ici tout va bien, vérifions quand même en tapant <code>http://demozilla.hebergeurexemple.net/</code> dans la barre d'URL du navigateur :</p> -<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p> +<p><img alt="Here we go: our website is live!" src="here-we-go.png"></p> -<p>Et <em lang="fr">voilà</em> ! Notre site est en ligne !</p> +<p>Et <em>voilà</em> ! Notre site est en ligne !</p> <h3 id="D'autres_méthodes_pour_transférer_des_fichiers">D'autres méthodes pour transférer des fichiers</h3> diff --git a/files/fr/learn/common_questions/using_github_pages/index.html b/files/fr/learn/common_questions/using_github_pages/index.html index a20bed20d4..0a49b5cb64 100644 --- a/files/fr/learn/common_questions/using_github_pages/index.html +++ b/files/fr/learn/common_questions/using_github_pages/index.html @@ -10,7 +10,7 @@ tags: translation_of: Learn/Common_questions/Using_Github_pages original_slug: Apprendre/Utiliser_les_pages_GitHub --- -<p class="summary"><a href="https://github.com/">GitHub</a> est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version <a href="http://git-scm.com/">Git</a><strong>. </strong>Par défaut, le système est <em>open source</em>, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées <em>gh-pages</em>) qui sont une des fonctionnalités de GitHub.</p> +<p><a href="https://github.com/">GitHub</a> est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version <a href="http://git-scm.com/">Git</a><strong>. </strong>Par défaut, le système est <em>open source</em>, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées <em>gh-pages</em>) qui sont une des fonctionnalités de GitHub.</p> <h2 id="Publier_du_contenu">Publier du contenu</h2> @@ -48,13 +48,13 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub <p>La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :</p> -<p><img alt="Interface en ligne de commande" src="https://mdn.mozillademos.org/files/12271/commande.png" style="height: 309px; width: 499px;"></p> +<p><img alt="Interface en ligne de commande" src="commande.png"></p> <div class="note"> -<p><strong>Note : </strong>Il existe également des <a href="http://git-scm.com/downloads/guis">interfaces graphiques pour Git</a> qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.</p> +<p><strong>Note :</strong> Il existe également des <a href="http://git-scm.com/downloads/guis">interfaces graphiques pour Git</a> qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.</p> </div> -<p><span id="command-line">Chaque système d'exploitation possède sa propre interface en ligne de commande :</span></p> +<p>Chaque système d'exploitation possède sa propre interface en ligne de commande :</p> <ul> <li><strong>Windows</strong> : <strong>l'invite de commande</strong>. Celle-ci peut être lancée en utilisant la touche Windows et en tapant <em>Invite de commande</em> avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera <code>\</code> pour indiquer un sous-répertoire alors que Linux et OS X utiliseront <code>/</code>).</li> @@ -70,9 +70,9 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub <li>Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option <em>New Repository</em> (qui signifie « Créer un nouveau dépôt »).</li> <li>Sur la page qui s'affiche, dans le champ « <em>Repository name</em> », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir <em>mon-premier-depot</em>.</li> <li>Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :<br> - <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li> + <img alt="" src="create-new-repo.png"></li> <li>Ensuite, cliquez sur « <em>Create repository</em> » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :<br> - <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li> + <img alt="" src="github-repo.png"></li> </ol> <h3 id="Envoyer_vos_fichiers_vers_GitHub">Envoyer vos fichiers vers GitHub</h3> @@ -80,7 +80,7 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub <ol> <li>Sur cette page, une section vous intéresse particulièrement : « <em>…or push an existing repository from the command line</em> » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à : - <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/mon-premier-depot.git</span></span></pre> + <pre>git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git</pre> </li> <li>Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action. <pre class="brush: bash">git add --all @@ -90,7 +90,7 @@ git commit -m 'ajout des fichiers au dépôt'</pre> <pre class="brush: bash">git push -u origin master</pre> </li> <li>Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une <em>branche</em> <code>gh-pages</code> sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « <em>Branch: <strong>master</strong></em> » (GitHub indique que vous êtes sur la branche <code>master</code> de votre dépôt). Dans la liste qui s'affiche, saisissez le texte <strong>gh-pages</strong> puis cliquez sur <em>Create branch: gh-pages</em> (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera <em>nom-utilisateur.github.io/nom-du-depot</em>. Dans mon exemple, l'URL est donc <em>https://chrisdavidmills.github.io/my-repository</em>. La page qui est affichée à cette URL est la page <code>index.html</code> contenue dans le dépôt.<br> - <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li> + <img alt="" src="repo-site.png"></li> <li>Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)</li> </ol> diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html index 5105d8fb6d..b8b05fb694 100644 --- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html @@ -17,9 +17,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <div>{{Previous("Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p>Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « <em>devtools</em> »).</p> -</div> <div class="note"> <p><strong>Note :</strong> Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser <a href="http://mdn.github.io/beginner-html-site-scripted/">l'exemple construit</a> dans la série d'articles <a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a> et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.</p> @@ -29,7 +27,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>Les <em>devtools</em> s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :</p> -<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 804px; margin: 0px auto; width: 1438px;"></p> +<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="DSC02620.png"></p> <p>Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :</p> @@ -38,27 +36,27 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <ul> <li><strong>Internet Explorer. </strong><em>F12 </em></li> - <li><strong>Mac OS X. </strong><em><span class="Unicode">⌘ + ⌥ + I </span></em></li> + <li><strong>Mac OS X. </strong><em>⌘ + ⌥ + I </em></li> </ul> </li> - <li><span class="Unicode"><em><strong>Via les menus. </strong></em></span> + <li><em><strong>Via les menus. </strong></em> <ul> - <li><strong>Firefox. </strong>Menu <span class="Unicode"><em><span class="Unicode">➤ </span></em><em><span class="Unicode">Développement ➤ Outils de développement </span></em><span class="Unicode">ou <em>Outils</em></span><em> ➤</em></span><em> Développement Web ➤ Outils de développement</em></li> - <li><strong>Chrome.</strong> <em>Affichage<span class="Unicode"> ➤</span> Développement ➤ Outils de développement</em></li> - <li><strong>Safari.</strong> <em>Développement<span class="Unicode"> ➤</span> Afficher l'inspecteur web.</em> Si vous ne pouvez pas voir le menu <em>Développement</em>, aller sous <em>Safari<span class="Unicode"> ➤</span> Préférences ➤ Avancé</em> et vérifiez que l'option <em>Afficher le menu de développement</em> est bien coché. </li> - <li><strong>Opera</strong>. <em><span class="Unicode">Développement ➤</span> Inspecteur web</em></li> + <li><strong>Firefox. </strong>Menu <em>➤ </em><em>Développement ➤ Outils de développement </em>ou <em>Outils</em><em> ➤</em><em> Développement Web ➤ Outils de développement</em></li> + <li><strong>Chrome.</strong> <em>Affichage ➤ Développement ➤ Outils de développement</em></li> + <li><strong>Safari.</strong> <em>Développement ➤ Afficher l'inspecteur web.</em> Si vous ne pouvez pas voir le menu <em>Développement</em>, aller sous <em>Safari ➤ Préférences ➤ Avancé</em> et vérifiez que l'option <em>Afficher le menu de développement</em> est bien coché. </li> + <li><strong>Opera</strong>. <em>Développement ➤ Inspecteur web</em></li> </ul> </li> <li><strong><em>Via un menu contextuel.</em></strong> Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez <em>Examiner l'élément</em> dans le menu qui apparait (<em>Bonus : </em>cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).</li> </ul> -<p><img alt="Menu contextuel suite au clic-droit" src="https://mdn.mozillademos.org/files/11505/devtools.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p> +<p><img alt="Menu contextuel suite au clic-droit" src="devtools.png"></p> <h2 id="L'inspecteur_explorateur_du_DOM_et_éditeur_CSS">L'inspecteur : explorateur du DOM et éditeur CSS</h2> <p>Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.</p> -<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p> +<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="DSC02620.png"></p> <p>Si vous n'arrivez pas sur l'inspecteur :</p> @@ -72,7 +70,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :</p> -<p><img alt="Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM" src="https://mdn.mozillademos.org/files/11519/menu_contextuel.png" style="display: block; height: 284px; margin: 0px auto; width: 244px;"></p> +<p><img alt="Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM" src="menu_contextuel.png"></p> <ul> <li><strong>Supprimer le nœud</strong> (parfois <em>Supprimer l'élément</em>) : supprime l'élément sélectionné du document.</li> @@ -88,7 +86,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p> +<p><img alt="" src="css-viewer-2.png"></p> <p>Ces fonctionnalités sont plutôt pratiques :</p> @@ -124,7 +122,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur <em>Ctrl + 2</em>.) Cela affichera une fenêtre qui ressemblera à :</p> -<p><img alt="Console JavaScript" src="https://mdn.mozillademos.org/files/11521/console.png" style="border: 1px solid black; display: block; height: 319px; margin: 0px auto; width: 1433px;"></p> +<p><img alt="Console JavaScript" src="console.png"></p> <p>Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :</p> diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.html b/files/fr/learn/common_questions/what_are_hyperlinks/index.html index 4c4c1b1658..584fc6b805 100644 --- a/files/fr/learn/common_questions/what_are_hyperlinks/index.html +++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.html @@ -9,15 +9,13 @@ tags: translation_of: Learn/Common_questions/What_are_hyperlinks original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web --- -<div class="summary"> <p>Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Vous devriez, au préalable, comprendre <a href="/en-US/Learn/How_the_Internet_works">comment Internet fonctionne</a> et distinguer<a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche"> une page web, un site web, un serveur web et un moteur de recherche</a>.</td> + <td>Vous devriez, au préalable, comprendre <a href="/fr/Learn/How_the_Internet_works">comment Internet fonctionne</a> et distinguer<a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche"> une page web, un site web, un serveur web et un moteur de recherche</a>.</td> </tr> <tr> <th scope="row">Objectifs :</th> @@ -40,13 +38,13 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web <p>Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.</p> -<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> +<p><img alt="Example of a basic display and effect of a link in a web page" src="link-1.png"></p> <p>Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.</p> <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Cette section a besoin d'être enrichie, <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> +<p><em>Cette section a besoin d'être enrichie, <a href="/fr/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -71,7 +69,7 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web <p>La plupart des liens lient deux pages différentes. <strong>Les ancres</strong> permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.</p> -<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p> +<p><img alt="Example of a basic display and effect of an anchor in a web page" src="link-2.png"></p> <h3 id="Les_liens_et_les_moteurs_de_recherche">Les liens et les moteurs de recherche</h3> diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.html b/files/fr/learn/common_questions/what_is_a_domain_name/index.html index 8a97478c80..16bfb9f969 100644 --- a/files/fr/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.html @@ -10,15 +10,13 @@ tags: translation_of: Learn/Common_questions/What_is_a_domain_name original_slug: Apprendre/Comprendre_noms_de_domaine --- -<div class="summary"> <p>Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Pour commencer, vous devez comprendre <a href="/fr/Apprendre/Fonctionnement_Internet">comment Internet fonctionne</a> et ce que sont les <a href="/en-US/Learn/Understanding_URLs">URL</a>.</td> + <td>Pour commencer, vous devez comprendre <a href="/fr/Apprendre/Fonctionnement_Internet">comment Internet fonctionne</a> et ce que sont les <a href="/fr/Learn/Understanding_URLs">URL</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -27,13 +25,13 @@ original_slug: Apprendre/Comprendre_noms_de_domaine </tbody> </table> -<p><span class="seoSummary">Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.</span></p> +<p>Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.</p> <p>Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple <code>173.194.121.32</code>). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple <code>2001:0db8:85a3:0042:1000:8a2e:0370:7334</code>). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.</p> <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Ce contenu a besoin d'être enrichi, <a href="/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> +<p><em>Ce contenu a besoin d'être enrichi, <a href="/fr/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> <ul> <li><a href="http://www.afnic.fr/fr/votre-nom-de-domaine/qu-est-ce-qu-un-nom-de-domaine/">Qu'est-ce qu'un nom de domaine</a> sur le site de l'AFNIC</li> @@ -46,7 +44,7 @@ original_slug: Apprendre/Comprendre_noms_de_domaine <p>Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus <strong>de droite à gauche</strong> :</p> -<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11241/structure_fr.png" style="height: 76px; width: 252px;"></p> +<p><img alt="Anatomy of the MDN domain name" src="structure_fr.png"></p> <p>Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.</p> @@ -146,7 +144,7 @@ Registrant Phone:+1.6509030800 <li>Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.</li> </ol> -<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p> +<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="2014-10-dns-request2.png"></p> <div class="note"> <p><strong>Note :</strong> Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.</p> diff --git a/files/fr/learn/common_questions/what_is_a_url/index.html b/files/fr/learn/common_questions/what_is_a_url/index.html index e3743de8e5..7f3cdf0877 100644 --- a/files/fr/learn/common_questions/what_is_a_url/index.html +++ b/files/fr/learn/common_questions/what_is_a_url/index.html @@ -10,11 +10,9 @@ tags: translation_of: Learn/Common_questions/What_is_a_URL original_slug: Apprendre/Comprendre_les_URL --- -<div class="summary"> <p>Cet article aborde les <em>Uniform Resource Locators</em> (URL) en expliquant leur rôle et leur structure.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -27,7 +25,7 @@ original_slug: Apprendre/Comprendre_les_URL </tbody> </table> -<p><span class="seoSummary">Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les <strong><dfn>URL</dfn></strong> sont une autre pierre angulaire du Web. Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.</span></p> +<p>Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les <strong><dfn>URL</dfn></strong> sont une autre pierre angulaire du Web. Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.</p> <p><strong>URL</strong> signifie <em>Uniform Resource Locator</em> (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.</p> @@ -52,17 +50,17 @@ https://developer.mozilla.org/fr/search?q=URL</pre> <pre>http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument</pre> <dl> - <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/11679/protocole_1.png"></dt> + <dt><img alt="Protocol" src="protocole_1.png"></dt> <dd><code>http://</code> correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme <code>mailto:</code> (qui permet d'ouvrir un client de messagerie électronique) ou <code>ftp:</code> qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.</dd> - <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/11681/nom_de_domaine2.png" style="height: 204px; width: 380px;"></dt> + <dt><img alt="Domaine Name" src="nom_de_domaine2.png"></dt> <dd><code>www.exemple.com</code> correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).</dd> - <dt><img alt="Port" src="https://mdn.mozillademos.org/files/11683/port_3.png"></dt> + <dt><img alt="Port" src="port_3.png"></dt> <dd><code>:80</code> correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.</dd> - <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/11685/chemin_4.png"></dt> + <dt><img alt="Path to the file" src="chemin_4.png"></dt> <dd><code>/chemin/vers/monfichier.html</code> est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».</dd> - <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/11693/parametres_5.png"></dt> + <dt><img alt="Parameters" src="parametres_5.png"></dt> <dd><code>?clé1=valeur1&clé2=valeur2</code> sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.</dd> - <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/11695/ancre_6.png"></dt> + <dt><img alt="Anchor" src="ancre_6.png"></dt> <dd><code>#QuelquePartDansLeDocument</code> correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.</dd> </dl> @@ -101,19 +99,17 @@ https://developer.mozilla.org/fr/search?q=URL</pre> <dl> <dt>URL complète</dt> - <dd> + <dd><p>Exemple :</p> <pre>https://developer.mozilla.org/fr/docs/Apprendre</pre> </dd> <dt>Protocole implicite</dt> - <dd> + <dd><p>Exemple :</p> <pre>//developer.mozilla.org/fr/docs/Apprendre</pre> - <p>Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.</p> </dd> <dt>Nom de domaine implicite</dt> - <dd> + <dd><p>Exemple :</p> <pre>/fr/docs/Apprendre</pre> - <p>Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.</p> <div class="note"> @@ -128,12 +124,12 @@ https://developer.mozilla.org/fr/search?q=URL</pre> <dl> <dt>Sous-ressources</dt> - <dd> + <dd><p>Exemple :</p> <pre>Compétences/Infrastructure/Comprendre_les_URL </pre> L'URL ne commence pas pas <code>/</code>, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : <code>https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL</code></dd> <dt>Remonter dans l'arborescence des dossiers</dt> - <dd> + <dd><p>Exemple :</p> <pre>../CSS/display</pre> <p>Dans ce cas, on utilise la convention, héritée du monde UNIX : <code>../</code> indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici <code>https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display</code>, qui peut être simplifiée en : <code>https://developer.mozilla.org/fr/docs/CSS/display</code></p> diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.html b/files/fr/learn/common_questions/what_is_a_web_server/index.html index 2dbf668646..06cd177779 100644 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.html +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/What_is_a_web_server original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web --- -<div class="summary"> <p>Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -34,7 +32,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web <p>Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (<em>matériel</em>), le serveur HTTP (<em>logiciel</em>) renvoie le document demandé, également grâce à HTTP.</p> -<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/11561/web-server.svg"></p> +<p><img alt="Basic representation of a client/server connection through HTTP" src="web-server.svg"></p> <p>Pour publier un site web, vous aurez besoin d'un serveur web <strong>statique</strong> ou <strong>dynamique</strong>.</p> @@ -98,7 +96,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web <li>Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté <a href="http://www.404notfound.fr/" rel="external">les pages d'erreurs 404</a> de leurs sites).</li> </ol> -<p><img alt="Une page d'erreur HTTP, en l'occurrence la page 404 de MDN" src="https://mdn.mozillademos.org/files/11563/Capture.PNG" style="height: 695px; width: 1623px;"></p> +<p><img alt="Une page d'erreur HTTP, en l'occurrence la page 404 de MDN" src="Capture.PNG"></p> <h3 id="Contenu_statique_et_contenu_dynamique">Contenu statique et contenu dynamique</h3> diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.html b/files/fr/learn/common_questions/what_is_accessibility/index.html index a8b667f8eb..60991cfd2b 100644 --- a/files/fr/learn/common_questions/what_is_accessibility/index.html +++ b/files/fr/learn/common_questions/what_is_accessibility/index.html @@ -10,11 +10,9 @@ tags: translation_of: Learn/Common_questions/What_is_accessibility original_slug: Apprendre/Accessibilité --- -<div class="summary"> <p>Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -49,8 +47,7 @@ original_slug: Apprendre/Accessibilité <dl> <dt>Déficience auditive</dt> - <dd>Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète.</dd> - <dd>Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.</dd> + <dd>Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète. Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.</dd> <dt>Déficience visuelle</dt> <dd>Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.</dd> <dt>Mise en pause</dt> diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.html b/files/fr/learn/common_questions/what_software_do_i_need/index.html index 8a1a9271f1..61d1cefa8f 100644 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.html +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.html @@ -9,11 +9,9 @@ tags: translation_of: Learn/Common_questions/What_software_do_I_need original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web --- -<div class="summary"> <p>Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -127,17 +125,17 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si <p>Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :</p> -<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p> +<p><img alt="Screenshot of Notepad++." src="NotepadPlusPlus.png"></p> <h3 id="Transférer_des_fichiers_vers_un_serveur_web">Transférer des fichiers vers un serveur web</h3> -<p>Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (<em>uploader</em>) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article<a class="new" href="/en-US/docs/Learn/How_much_does_it_cost"> combien ça coûte de publier quelque chose sur le Web ?</a>). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour <em>File Transfer Protocol</em> ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> et <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages">Git/Github</a>.</p> +<p>Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (<em>uploader</em>) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article<a href="/fr/docs/Learn/How_much_does_it_cost"> combien ça coûte de publier quelque chose sur le Web ?</a>). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour <em>File Transfer Protocol</em> ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> et <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages">Git/Github</a>.</p> -<div class="blockIndicator note"> -<p>FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (<em>Secure</em> FTP) ou via RSync avec SSH.</p> +<div class="note"> +<p><strong>Note :</strong> FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (<em>Secure</em> FTP) ou via RSync avec SSH.</p> </div> -<p>Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">dans un article à part</a>. Voyons tout de même une liste de clients FTP basiques :</p> +<p>Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails <a href="/fr/docs/Learn/Upload_files_to_a_web_server">dans un article à part</a>. Voyons tout de même une liste de clients FTP basiques :</p> <table class="standard-table"> <thead> @@ -184,7 +182,7 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si <h2 id="Prochaines_étapes">Prochaines étapes</h2> <ul> - <li>Certains de ces logiciels sont libres et/ou gratuits, d'autres ne le sont pas. <a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">En savoir plus sur le coût d'un site web.</a></li> + <li>Certains de ces logiciels sont libres et/ou gratuits, d'autres ne le sont pas. <a href="/fr/docs/Learn/How_much_does_it_cost">En savoir plus sur le coût d'un site web.</a></li> <li>Si vous souhaitez en apprendre plus sur les éditeurs de texte et choisir celui qui sera le plus adapté, consultez notre article sur <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">comment choisir, installer et paramétrer son éditeur de texte</a>.</li> <li>Si vous vous demandez comment publier votre site web sur le Web, jetez un coup d'œil à <a href="/fr/docs/Apprendre/Upload_files_to_a_web_server">« Comment transférer des fichiers vers un serveur web »</a>.</li> </ul> diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html index b9aaa7b5ce..da13496b05 100644 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box <div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> -<p class="summary">Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.</p> +<p>Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box </ul> <div class="note"> -<p><strong>Note</strong>: Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> @@ -76,7 +76,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box <p>Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p> +<p><img alt="" src="fancy-box.png"></p> <h2 id="Évaluation">Évaluation</h2> @@ -94,6 +94,6 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html index 8091fe664e..3d0b3c1fe5 100644 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> -<p class="summary">Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p> +<p>Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions de HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td> + <td>Notions de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -36,7 +36,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <h2 id="Ombres_des_boîtes">Ombres des boîtes</h2> -<p>Revenons au module <a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p> +<p>Revenons au module <a href="/fr/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p> <p>Vous trouverez les exemples de cet article dans le fichier <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">code source</a> également).</p> @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <p>Débutons avec un exemple simple. D'abord, un peu de HTML :</p> -<div id="example_1"> + <pre class="brush: html"><article class="simple"> <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> </article></pre> @@ -59,7 +59,7 @@ article { max-width: 500px; padding: 10px; color: white ; -<code class="language-css"><span class="property token"> text-align</span><span class="punctuation token">:</span> center</code> ; + text-align: center; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } @@ -67,11 +67,11 @@ article { .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); }</pre> -</div> + <p>donnent le résultat suivant :</p> -<p>{{ EmbedLiveSample('example_1', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}</p> <p>Notez les quatre éléments valeur de la propriété <code>box-shadow</code> :</p> @@ -88,14 +88,12 @@ article { <p>Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :</p> -<div id="example_2"> -<div class="hidden"> -<pre class="brush: html"><article class="multiple"> +<pre class="brush: html hidden"><article class="multiple"> <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> </article></pre> </div> -<pre class="brush: css">p { +<pre class="brush: css hidden">p { margin: 0; } @@ -114,11 +112,10 @@ article { 5px 5px 1px black, 6px 6px 1px black; } </pre> -</div> <p>Nous obtenons le résultat suivant :</p> -<p>{{ EmbedLiveSample('example_2', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}</p> <p>Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.</p> @@ -128,7 +125,6 @@ article { <p>D'abord un HTML différent pour cet exemple :</p> -<div id="example_3"> <pre class="brush: html"><button>Appuyez ici !</button></pre> <pre class="brush: css">button { @@ -152,20 +148,17 @@ button:active { inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); }</pre> -</div> <p>Et voici le résultat :</p> -<p>{{ EmbedLiveSample('example_3', '100%', 70) }}</p> - -<p> </p> +<p>{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}</p> <p>Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.</p> <p>Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.</p> <div class="note"> -<p><strong>Note </strong>: il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code> — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p> +<p><strong>Note :</strong> il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code> — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p> </div> <h2 id="Filtres">Filtres</h2> @@ -186,7 +179,7 @@ button:active { <pre class="brush: css">p { margin: 1rem auto; padding: 20px; - <code class="language-css"><span class="property token">text-align</span><span class="punctuation token">:</span> center</code> ; + <code class="language-css">text-align: center</code> ; width: 100px; border: 5px dashed red; } @@ -214,7 +207,7 @@ button:active { </ul> <div class="note"> -<p><strong>Note </strong>: Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p> +<p><strong>Note :</strong> Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p> </div> <p>Vous pouvez voir d'autres exemples de filtres sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">code source</a>).</p> @@ -233,7 +226,7 @@ button:active { <p>Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">code source</a>) et à la page de référence de {{cssxref("<blend-mode>")}}.</p> <div class="note"> -<p><strong>Note </strong>: Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p> +<p><strong>Note :</strong> Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p> </div> <h3 id="background-blend-mode">background-blend-mode</h3> @@ -331,7 +324,7 @@ article div:last-child { <p>Vous voyez ici que <code>mix-blend-mode: multiply;</code> a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <code><div></code> situé dessous.</p> <div class="note"> -<p><strong>Note </strong>: Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> +<p><strong>Note :</strong> Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/fr/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> </div> <h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> @@ -348,7 +341,7 @@ article div:last-child { <p>Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.</p> <div class="note"> -<p><strong>Note </strong>: Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>, allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p> +<p><strong>Note :</strong> Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>, allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p> </div> <h2 id="Apprentissage_actif_expérimenter_certains_effets">Apprentissage actif : expérimenter certains effets</h2> @@ -357,10 +350,8 @@ article div:last-child { <p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> l'exemple avec le bouton correspondant.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> </div></textarea> @@ -385,7 +376,7 @@ article div:last-child { </div> </pre> -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -411,9 +402,9 @@ htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<p>{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}</p> <h2 id="Résumé">Résumé</h2> @@ -421,8 +412,6 @@ window.addEventListener("load", drawOutput); <p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> -<p> </p> - <h2 id="Dans_ce_module">Dans ce module</h2> <ul> @@ -431,6 +420,6 @@ window.addEventListener("load", drawOutput); <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html index 33bf88edac..105df053a6 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -94,8 +94,8 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>La propriété <a href="/fr/docs/Web/CSS/background-position"><code>background-position</code></a> permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> +<div class="note"> +<p><strong>Note :</strong> La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> </div> <p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p> @@ -280,7 +280,7 @@ background-position: 10px 20px, top right;</pre> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> +<p><strong>Note :</strong> Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> </div> <h2 id="summary">Résumé</h2> diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.html b/files/fr/learn/css/building_blocks/box_model_tasks/index.html index eb968b8e31..0d4034be70 100644 --- a/files/fr/learn/css/building_blocks/box_model_tasks/index.html +++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.html @@ -10,8 +10,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.</p> -<div class="notecard note"> -<p><strong>Note</strong> : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices.</p> <p>Si vous bloquez, demandez-nous de l'aide : voir la section <a href="#assessment_or_further_help">Évaluation et aide</a> en bas de cette page.</p> </div> @@ -25,8 +25,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p> -<div class="notecard note"> -<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="the_box_model_two">Modèle de boîte : numéro 2</h2> @@ -48,8 +48,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p> -<div class="notecard note"> -<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="the_box_model_three">Modèle de boîte : numéro 3</h2> @@ -62,8 +62,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p> -<div class="notecard note"> -<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="assessment_or_further_help">Évaluation et aide</h2> diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html index c7dd0051f5..7bc80fb59e 100644 --- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -19,11 +19,11 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <p>Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> + <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -75,8 +75,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <p>Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la <a href="/fr/docs/Web/CSS/color#Specifications">section des spécifications de la propriété color</a>, par exemple.</p> +<div class="note"> +<p><strong>Note :</strong> Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la <a href="/fr/docs/Web/CSS/color#Specifications">section des spécifications de la propriété color</a>, par exemple.</p> </div> <h2 id="Comprendre_comment_ces_concepts_se_combinent">Comprendre comment ces concepts se combinent</h2> @@ -108,12 +108,12 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <dd>Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que <code>inherit</code>, sinon il est identique à <code>initial</code>.</dd> </dl> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.</p> +<div class="note"> +<p><strong>Note :</strong> Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.</p> </div> <p>Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.</p> @@ -140,7 +140,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <h2 id="Comprendre_la_cascade">Comprendre la cascade</h2> -<p><span>Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le </span><code><body></code><span>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.</span></p> +<p>Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <code><body></code>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.</p> <p>Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :</p> @@ -180,7 +180,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage </ol> <div class="note"> -<p><strong>Note </strong>: Le sélecteur universel (<code>*</code>), les combinateurs (<code>+</code>, <code>></code>, <code>~</code>, ' '), et la pseudo-class de négation (<code>:not</code>) n'affectent en rien la spécificité.</p> +<p><strong>Note :</strong> Le sélecteur universel (<code>*</code>), les combinateurs (<code>+</code>, <code>></code>, <code>~</code>, ' '), et la pseudo-class de négation (<code>:not</code>) n'affectent en rien la spécificité.</p> </div> <p>Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la <a href="/fr/docs/Web/CSS/CSS_Selectors">référence MDN des sélecteurs</a>.</p> @@ -253,7 +253,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage </ul> <div class="note"> -<p><strong>Note </strong>: Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un <em>million</em> de sélecteurs de <strong>class</strong> combinés ne prendront jamais le dessus sur <em>un</em> sélecteur d'<strong>id</strong>.</p> +<p><strong>Note :</strong> Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un <em>million</em> de sélecteurs de <strong>class</strong> combinés ne prendront jamais le dessus sur <em>un</em> sélecteur d'<strong>id</strong>.</p> <p>Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.</p> </div> @@ -275,8 +275,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <li>Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration <code>!important</code> dans la deuxième règle — écrit après <code>border: none</code>, ce mot-clé signifie que cette déclaration l'emporte sur le <code>border</code> définie dans la règle précédente, même si l'ID a une spécificité plus élevée.</li> </ol> -<div class="blockIndicator note"> -<p><strong>Note </strong>: La seule façon de dépasser cette déclaration <code>!important</code> serait d'ajouter un <code>!important</code> dans une déclaration de même<em> spécificité</em> apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.</p> +<div class="note"> +<p><strong>Note :</strong> La seule façon de dépasser cette déclaration <code>!important</code> serait d'ajouter un <code>!important</code> dans une déclaration de même<em> spécificité</em> apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.</p> </div> <p>Il est utile de connaître <code>!important</code> , ne serait-ce que pour le reconnaître dans le code des autres. <strong>Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.</strong> <code>!important</code> modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.</p> @@ -322,23 +322,23 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html index b5e9d31c2e..720f34217f 100644 --- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper <div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}</div> -<p class="summary">Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.</p> +<p>Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -46,7 +46,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper </ul> <div class="note"> -<p><strong>Note </strong>: Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> @@ -88,7 +88,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper <p>Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="letterhead.png"></p> <p> </p> @@ -108,6 +108,6 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.html b/files/fr/learn/css/building_blocks/debugging_css/index.html index d3d8121acb..e367a4cd59 100644 --- a/files/fr/learn/css/building_blocks/debugging_css/index.html +++ b/files/fr/learn/css/building_blocks/debugging_css/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + <td>Basic computer literacy, <a href="/fr/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="/fr/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> </tr> <tr> <th scope="row">Objective:</th> @@ -23,27 +23,27 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <h2 id="Comment_accéder_aux_outils_de_développement_du_navigateur">Comment accéder aux outils de développement du navigateur</h2> -<p>L'article <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement de navigateurs</a> est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.</p> +<p>L'article <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement de navigateurs</a> est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.</p> -<p>You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, and <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.</p> +<p>You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, and <a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.</p> <p>In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">an example file</a>. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.</p> <h2 id="The_DOM_versus_view_source">The DOM versus view source</h2> -<p>Something that can trip up newcomers to DevTools is the difference between what you see when you <a href="/en-US/docs/Tools/View_source">view the source</a> of a webpage, or look at the HTML file you put on the server, and what you can see in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.</p> +<p>Something that can trip up newcomers to DevTools is the difference between what you see when you <a href="/fr/docs/Tools/View_source">view the source</a> of a webpage, or look at the HTML file you put on the server, and what you can see in the <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.</p> <p>In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <code><h2></code> but closing with an <code></h3></code>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <code><h2></code> with an <code></h2></code>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.</p> -<p>View Source in comparison, is simply the HTML source code as stored on the server. The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.</p> +<p>View Source in comparison, is simply the HTML source code as stored on the server. The <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.</p> <h2 id="Inspecting_the_applied_CSS">Inspecting the applied CSS</h2> <p>Select an element on your page, either by right/ctrl-clicking on it and selecting <em>Inspect</em>, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of <code>box1</code>; this is the first element on the page with a bordered box drawn around it.</p> -<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> +<p><img alt="The example page for this tutorial with DevTools open." src="inspecting1.png"></p> -<p>If you look at the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code><body></code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p> +<p>If you look at the <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code><body></code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p> <p>Also useful is the ability to expand out shorthand properties. In our example the <code>margin</code> shorthand is used.</p> @@ -63,7 +63,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p><strong>With <code>box1</code> selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.</strong></p> -<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> +<p><img alt="DevTools Styles Panel with a color picker open." src="inspecting2-color-picker.png"></p> <h2 id="Adding_a_new_property">Adding a new property</h2> @@ -71,17 +71,17 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p><strong>You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting <code>font-size</code>, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.</strong></p> -<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> +<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="inspecting3-font-size.png"></p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> +<div class="note"> +<p><strong>Note :</strong> There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> </div> <h2 id="Understanding_the_box_model">Understanding the box model</h2> -<p>In previous lessons we have discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p> +<p>In previous lessons we have discussed <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p> -<p>The <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p> +<p>The <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p> <p>In this panel, one of the detailed properties is the <code>box-sizing</code> property, which controls what box model the element uses.</p> @@ -89,10 +89,10 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>The element with a class of <code>box2</code> is using <code>border-box</code>, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case <code>width: 400px</code>.</p> -<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> +<p><img alt="The Layout section of the DevTools" src="inspecting4-box-model.png"></p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Find out more in <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Find out more in <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p> </div> <h2 id="Solving_specificity_issues">Solving specificity issues</h2> @@ -101,26 +101,26 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>In our example file there are two words that have been wrapped in an <code><em></code> element. One is displaying as orange and the other hotpink. In the CSS we have applied:</p> -<pre class="brush: css notranslate">em { +<pre class="brush: css">em { color: hotpink; font-weight: bold; }</pre> <p>Above that in the stylesheet however is a rule with a <code>.special</code> selector:</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: orange; }</pre> -<p>As you will recall from the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p> +<p>As you will recall from the lesson on <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p> <p><strong>Inspect the <code><em></code> with the class of <code>.special</code> and DevTools will show you that orange is the color that applies, and also shows you the <code>color</code> property applied to the em crossed out. You can now see that the class is overriding the element selector.</strong></p> -<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> +<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="inspecting5-specificity.png"></p> <h2 id="Find_out_more_about_the_Firefox_DevTools">Find out more about the Firefox DevTools</h2> -<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/en-US/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/en-US/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p> +<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/fr/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/fr/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p> <h2 id="Debugging_problems_in_CSS">Debugging problems in CSS</h2> @@ -143,7 +143,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.</p> -<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> +<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="no-support.png"></p> <p>You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.</p> @@ -181,23 +181,23 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <h2 id="In_this_module">In this module</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html index 8c6008bfa0..114467a4f8 100644 --- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension <div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</div> -<p class="summary">Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.</p> +<p>Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension </ul> <div class="note"> -<p><strong>Note </strong>: À défaut, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">URL</a> pour faire pointer l'élément <code><img></code> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> À défaut, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">URL</a> pour faire pointer l'élément <code><img></code> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> </div> <h2 id="Énoncé_du_projet">Énoncé du projet</h2> @@ -87,7 +87,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension </ul> <div class="note"> -<p><strong>Note </strong>: Gardez présent à l'esprit que le 2e jeu de règles définit <code>font-size: 10px;</code> pour l'élément <code><html></code> — cela signifie que pour tous les enfants de <code><html></code>, un <code>em</code> vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un <code>font-size</code> différent placés entre eux et <code><html></code> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).</p> +<p><strong>Note :</strong> Gardez présent à l'esprit que le 2e jeu de règles définit <code>font-size: 10px;</code> pour l'élément <code><html></code> — cela signifie que pour tous les enfants de <code><html></code>, un <code>em</code> vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un <code>font-size</code> différent placés entre eux et <code><html></code> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).</p> </div> <p>Autres choses à prendre en considération :</p> @@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension <p>La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :</p> -<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="business-card.png"></p> <p> </p> @@ -126,13 +126,13 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS">Comment fonctionnent les CSS</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">Sélecteurs</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Sélecteurs simples</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinaisons et sélecteurs multiples</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Sélecteurs simples</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinaisons et sélecteurs multiples</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Unités et valeurs pour les CSS</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade et héritage</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Débogage des CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Compréhension des fondements des CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Débogage des CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Compréhension des fondements des CSS</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html index 4523b58fa4..6d01ee3f41 100644 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html @@ -10,7 +10,7 @@ original_slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions <p>Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées <strong>modes d'écriture</strong> (<i lang="en">writing modes</i> en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/css/building_blocks/index.html b/files/fr/learn/css/building_blocks/index.html index d0992257a9..996ef6e24f 100644 --- a/files/fr/learn/css/building_blocks/index.html +++ b/files/fr/learn/css/building_blocks/index.html @@ -34,40 +34,40 @@ original_slug: Apprendre/CSS/Building_blocks <p>Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.</p> <div class="note"> -<p><strong>Note : </strong>Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.</p> +<p><strong>Note :</strong> Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.</p> </div> <dl> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance (Cascade et héritage)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance (Cascade et héritage)</a></dt> <dd>Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors (sélecteurs CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors (sélecteurs CSS)</a></dt> <dd>Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> </ul> </dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model (le modèle des boîtes)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model (le modèle des boîtes)</a></dt> <dd>Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders (arrières-plans et bordures)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders (arrières-plans et bordures)</a></dt> <dd>Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions (manipuler les différentes directions du texte)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions (manipuler les différentes directions du texte)</a></dt> <dd>Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (<strong>writing modes</strong>). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content (quand ça dépasse)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content (quand ça dépasse)</a></dt> <dd>Autre concept important du CSS: le dépassement (<strong>overflow</strong>) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units (valeurs et unités)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units (valeurs et unités)</a></dt> <dd>Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS (dimensionner les éléments en CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS (dimensionner les éléments en CSS)</a></dt> <dd>Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements (images, médias et éléments de formulaires)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements (images, médias et éléments de formulaires)</a></dt> <dd>Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.</dd> <dt><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page des tableaux</a></dt> <dd>Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS (déboguer le CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS (déboguer le CSS)</a></dt> <dd>Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS (organiser votre CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS (organiser votre CSS)</a></dt> <dd>Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.</dd> </dl> diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.html b/files/fr/learn/css/building_blocks/overflowing_content/index.html index 5adba69e5e..6eb65c2dca 100644 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.html +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content <p>Dans ce cours nous allons étudier un autre concept important en CSS : les <strong>débordements</strong> (<i lang="en">overflows</i> en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -91,7 +91,7 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content <h2 id="test_your_skills!">Testez vos compétences !</h2> -<p>Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Testez vos compétences: overflow</a>.</p> +<p>Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) <a href="/fr/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Testez vos compétences: overflow</a>.</p> <h2 id="summary">Résumé</h2> diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html index 94b5601bf6..f56a321023 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -121,8 +121,8 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p> +<div class="note"> +<p><strong>Note :</strong> Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p> </div> <h2 id="Pas_suivants">Pas suivants</h2> diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.html b/files/fr/learn/css/building_blocks/selectors/combinators/index.html index 7a63a06d36..ecef10ea21 100644 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.html @@ -12,11 +12,11 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td> + <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -29,7 +29,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Le <strong>combinateur descendant</strong>— en général représenté par un seul espace (<code> </code>) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.</p> -<pre class="brush: css notranslate">body article p +<pre class="brush: css">body article p </pre> <p>Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <code><p></code>, qui est à l'intérieur d'un élément de classe <code>.box</code>.</p> @@ -40,7 +40,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Le combinateur enfant (<code>></code>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <code><p></code> qui sont des enfants directs des éléments <code><article></code>:</p> -<pre class="brush: css notranslate">article > p</pre> +<pre class="brush: css">article > p</pre> <p>Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <code><li></code> qui sont un enfant direct d'un <code><ul></code>, et leur ai donné une bordure supérieure.</p> @@ -52,7 +52,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Le sélecteur de frère adjacent (<code>+</code>) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <code><img></code> qui viennent juste après les éléments <code><p></code>:</p> -<pre class="brush: css notranslate">p + img</pre> +<pre class="brush: css">p + img</pre> <p>Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <code><h1></code>, et le stylisons.</p> @@ -64,7 +64,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (<code>~</code>). Pour sélectionner tous les éléments <code><img></code> qui viennent n'importe où après les éléments <code><p></code>, nous ferions ceci:</p> -<pre class="brush: css notranslate">p ~ img</pre> +<pre class="brush: css">p ~ img</pre> <p>Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <code><p></code> qui viennent après le <code><h1></code>, et même s'il y a aussi un <code><div></code> dans le document, le <code><p></code> qui vient après qu'il est sélectionné.</p> @@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <code><ul></code>, je pourrais utiliser ce qui suit.</p> -<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> +<pre class="brush: css">ul > li[class="a"] { }</pre> <p>Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.</p> @@ -82,7 +82,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <h2 id="Testez_vos_compétences!">Testez vos compétences!</h2> -<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p> +<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p> <h2 id="Passer_à_la_suite">Passer à la suite</h2> @@ -93,10 +93,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <h2 id="Dans_ce_module">Dans ce module</h2> <ol> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li> <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments">Pseudo-classes and pseudo-élements</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs">Combinateurs</a></li> @@ -104,12 +104,12 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs </li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">Le modèle de Boîte</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content">Débordement de contenu</a></li> <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">Valeurs et unités</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Taille des élements</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li> <li><a href="/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html index 2ba25e54d4..ece86d8018 100644 --- a/files/fr/learn/css/building_blocks/selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors <p>Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -25,7 +25,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors <p>Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet</em> de ce sélecteur.</p> -<p><img alt="Du code où h1 est surligné." src="selector.png" style="border: 1px solid #cccccc;"></p> +<p><img alt="Du code où h1 est surligné." src="selector.png"></p> <p>Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p> diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index f7d62596c1..8e89104fdd 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -14,13 +14,13 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> -<p>Voyons maintenant les sélecteurs de<span> <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</span></p> +<p>Voyons maintenant les sélecteurs de <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> + <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -35,7 +35,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p> -<pre class="notranslate">:<em>pseudo-class-name</em></pre> +<pre>:<em>pseudo-class-name</em></pre> <h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3> @@ -50,17 +50,17 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :</p> <ul> - <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/:invalid">:invalid</a></code></li> </ul> <h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3> <p>Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées <em>pseudo-classes dynamiques</em>, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :</p> -<p><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br> - <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p> +<p><code><a href="/fr/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br> + <code><a href="/fr/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> @@ -68,10 +68,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points <code>::</code>.</p> -<pre class="notranslate"><em>::pseudo-element-name</em></pre> +<pre><em>::pseudo-element-name</em></pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p> +<div class="note"> +<p><strong>Note :</strong> Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p> </div> <p>Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.</p> @@ -88,14 +88,14 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs <code>:first-child</code> et <code>::first-line</code> Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <code><p></code>, qui se trouve à l'intérieur d'un élément <code><article></code></p> -<pre class="brush: css notranslate"><code>article p:first-child::first-line { +<pre class="brush: css">article p:first-child::first-line { font-size: 120%; font-weight: bold; -}</code></pre> +}</pre> <h2 id="Générer_du_contenu_avec_before_et_after">Générer du contenu avec ::before et ::after</h2> -<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/en-US/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p> +<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/fr/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p> <p>Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément <code>::before</code> en <code>::after</code> et voir le texte inséré à la fin de l'élément au lieu du début.</p> @@ -139,7 +139,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":blank") }}</td> - <td>Matches an <a href="/en-US/docs/Web/HTML/Element/input"><code><input></code> element</a> whose input value is empty.</td> + <td>Matches an <a href="/fr/docs/Web/HTML/Element/input"><code><input></code> element</a> whose input value is empty.</td> </tr> <tr> <td>{{ Cssxref(":checked") }}</td> @@ -155,7 +155,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":dir") }}</td> - <td>Select an element based on its directionality (value of the HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> property).</td> + <td>Select an element based on its directionality (value of the HTML <code><a href="/fr/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/fr/docs/Web/CSS/direction">direction</a></code> property).</td> </tr> <tr> <td>{{ Cssxref(":disabled") }}</td> @@ -171,7 +171,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":first") }}</td> - <td>In <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td> + <td>In <a href="/fr/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td> </tr> <tr> <td>{{ Cssxref(":first-child") }}</td> @@ -203,7 +203,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":indeterminate") }}</td> - <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> + <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/fr/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> </tr> <tr> <td>{{ Cssxref(":in-range") }}</td> @@ -215,7 +215,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":lang") }}</td> - <td>Matches an element based on language (value of the HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td> + <td>Matches an element based on language (value of the HTML <a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td> </tr> <tr> <td>{{ Cssxref(":last-child") }}</td> @@ -227,7 +227,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":left") }}</td> - <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td> + <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td> </tr> <tr> <td>{{ Cssxref(":link")}}</td> @@ -307,7 +307,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":right") }}</td> - <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td> + <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td> </tr> <tr> <td>{{ Cssxref(":root") }}</td> @@ -378,23 +378,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 33f687df82..376bfcb1cd 100644 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <p>Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -39,7 +39,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <h3 id="Utiliser_le_sélecteur_universel_pour_rendre_les_sélecteurs_plus_lisibles">Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles</h3> -<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code><article></code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> : </p> +<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code><article></code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> : </p> <pre class="brush: css">article :first-child { @@ -84,7 +84,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> <div class="blockIndicator note"> -<p><strong>Note </strong>: Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p> +<p><strong>Note :</strong> Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p> </div> <h2 id="Prochain_article">Prochain article</h2> @@ -96,23 +96,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html index 47e0ee79a1..74258dbe1b 100644 --- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS <div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -85,8 +85,8 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS <p>Cette technique est utilisée pour rendre les images <em>responsive</em>, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.</p> -<div class="notecard note"> - <p><b>Note :</b> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p> +<div class="note"> + <p><strong>Note :</strong> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p> </div> <h2 id="viewport_units">Unités de la fenêtre d'affichage</h2> diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html index 0b8eb4bd14..2543732c2a 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.html +++ b/files/fr/learn/css/building_blocks/styling_tables/index.html @@ -17,13 +17,13 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables <div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> -<p class="summary">Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.</p> +<p>Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Notions de HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>.)</td> + <td>Notions de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>.)</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -79,7 +79,7 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables <p>Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>) :</p> -<p><img alt="Liste des groupes punk du Royaume Uni" src="https://mdn.mozillademos.org/files/16114/punk.png" style="display: block; height: 275px; margin: 0px auto; width: 1012px;"></p> +<p><img alt="Liste des groupes punk du Royaume Uni" src="punk.png"></p> <p>Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.</p> @@ -136,14 +136,14 @@ th, td { <li>Définir pour le tableau la valeur <code>fixed</code> pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec <code>table-layout: fixed</code>, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur <code>thead th:nth-child(n)</code> ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> <br> Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).</li> - <li>La valeur <code>collapse</code> pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : <img alt="Encadrement des éléments d'un tableau" src="https://mdn.mozillademos.org/files/16116/cadre_1.png" style="display: block; height: 68px; margin: 0px auto; width: 231px;"> Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec <code>border-collapse : collapse;</code>, les bordures se condensent en une seule, ce qui est beaucoup mieux :<img alt="Avec border-collapse: collapse; les encadrements se condensent" src="https://mdn.mozillademos.org/files/16117/cadre_2.png" style="display: block; height: 59px; margin: 0px auto; width: 223px;"></li> + <li>La valeur <code>collapse</code> pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : <img alt="Encadrement des éléments d'un tableau" src="cadre_1.png"> Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec <code>border-collapse : collapse;</code>, les bordures se condensent en une seule, ce qui est beaucoup mieux :<img alt="Avec border-collapse: collapse; les encadrements se condensent" src="cadre_2.png"></li> <li>Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.</li> <li>Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.</li> </ul> <p>À ce stade, le tableau a déjà meilleure mine :</p> -<p><img alt="Première mise en forme du tableau" src="https://mdn.mozillademos.org/files/16118/punk_A.png" style="display: block; height: 460px; margin: 0px auto; width: 1096px;"></p> +<p><img alt="Première mise en forme du tableau" src="punk_A.png"></p> <h3 id="Simple_typographie">Simple typographie</h3> @@ -194,7 +194,7 @@ tfoot th { <p>Cela fait un peu plus propre :</p> -<p><img alt="Deuxième mise en forme : modifications des polices de caractères." src="https://mdn.mozillademos.org/files/16119/punk_B.png" style="display: block; height: 531px; margin: 0px auto; width: 1055px;"></p> +<p><img alt="Deuxième mise en forme : modifications des polices de caractères." src="punk_B.png"></p> <h3 id="Graphisme_et_couleurs">Graphisme et couleurs</h3> @@ -248,7 +248,7 @@ table { <p>Et voici l'explosion de couleurs résultante :</p> -<p><img alt="Troisième mise en forme : coloriage agressif" src="https://mdn.mozillademos.org/files/16120/punk_C.png" style="display: block; height: 496px; margin: 0px auto; width: 1257px;"></p> +<p><img alt="Troisième mise en forme : coloriage agressif" src="punk_C.png"></p> <p>Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.</p> @@ -268,7 +268,7 @@ table { <p>Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur <code>bottom</code>. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>) :</p> -<p><img alt="Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin" src="https://mdn.mozillademos.org/files/16121/punk_D.png" style="display: block; height: 539px; margin: 0px auto; width: 1254px;"></p> +<p><img alt="Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin" src="punk_D.png"></p> <h2 id="Apprentissage_actif_mettez_en_page_votre_propre_tableau">Apprentissage actif : mettez en page votre propre tableau</h2> @@ -303,6 +303,6 @@ table { <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html index a673fb36d6..b099bc42fb 100644 --- a/files/fr/learn/css/building_blocks/the_box_model/index.html +++ b/files/fr/learn/css/building_blocks/the_box_model/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p>En CSS, tout élément est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -57,8 +57,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type de positionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p> </div> <p>Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> @@ -127,8 +127,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard." src="standard-box-model.png"></p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p> +<div class="note"> +<p><strong>Note :</strong> La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p> </div> <h3 id="the_alternative_css_box_model">Le modèle de boîte CSS alternatif</h3> @@ -152,8 +152,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite box-sizing: inherit; }</pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p> +<div class="note"> +<p><strong>Note :</strong> Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p> </div> <h2 id="playing_with_box_models">Manipuler les modèles de boîte</h2> @@ -164,8 +164,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p> +<div class="note"> +<p><strong>Note :</strong> vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p> </div> <h3 id="use_browser_devtools_to_view_the_box_model">Utiliser les outils de développement pour voir le modèle de boîte</h3> diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.html b/files/fr/learn/css/building_blocks/values_and_units/index.html index bf161a3abc..7542b9e2e5 100644 --- a/files/fr/learn/css/building_blocks/values_and_units/index.html +++ b/files/fr/learn/css/building_blocks/values_and_units/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units <p>Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -25,12 +25,12 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units <p>Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code> ou <code><a href="/fr/docs/Web/CSS/length"><length></a></code>. Quand vous voyez le type de valeur <code><color></code>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>.</p> -<div class="notecard note"> -<p><strong>Note</strong> : Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p> +<div class="note"> +<p><strong>Note :</strong> Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p> </div> -<div class="notecard note"> -<p><strong>Note</strong> : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, comparée au type de données <a href="/fr/docs/Web/CSS/color_value"><color></a>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p> +<div class="note"> +<p><strong>Note :</strong> Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, comparée au type de données <a href="/fr/docs/Web/CSS/color_value"><color></a>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p> </div> <p>Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction <code>rgb()</code> :</p> @@ -289,9 +289,8 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units <p><strong>Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.</strong></p> -<div class="notecard note"> -<h4>Note :</h4> -<p>Avec la spécification <i lang="en">CSS Colors Level 4</i>, <code>rgba()</code> est un alias pour <code>rgb()</code> et <code>hsla()</code> est un alias pour <code>hsl()</code> (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions <code>rgba()</code> à des fonctions <code>rgb()</code> pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.</p> +<div class="note"> +<p><strong>Note :</strong> Avec la spécification <i lang="en">CSS Colors Level 4</i>, <code>rgba()</code> est un alias pour <code>rgb()</code> et <code>hsla()</code> est un alias pour <code>hsl()</code> (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions <code>rgba()</code> à des fonctions <code>rgb()</code> pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.</p> </div> <h3 id="hsl_and_hsla_values">Valeurs HSL et HSLA</h3> diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html index a151a1da09..17a2d6e00f 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.html +++ b/files/fr/learn/css/css_layout/flexbox/index.html @@ -20,13 +20,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p> +<p>Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> + <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2> -<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> +<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> <p>Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :</p> @@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p> -<h2 id="Voici_un_exemple_simple"><span>Voici un exemple simple</span></h2> +<h2 id="Voici_un_exemple_simple">Voici un exemple simple</h2> <p>Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">voir en direct ici</a> aussi.</p> <p>Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.</p> -<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p> +<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> <h2 id="Détermination_des_éléments_à_disposer_en_boîtes_flexibles">Détermination des éléments à disposer en boîtes flexibles</h2> @@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Voici le résultat :</p> -<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p> +<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> <p>Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> +<p><strong>Note :</strong> Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> </div> -<h2 id="Aparté_sur_le_modèle_flex"><span>Aparté sur le modèle flex</span></h2> +<h2 id="Aparté_sur_le_modèle_flex">Aparté sur le modèle flex</h2> <p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p> -<p><img alt="Terminologie pour les boîtes modulables" class="default internal" src="https://mdn.mozillademos.org/files/16096/termes_flex.png" style="display: block; height: 333px; margin: 0px auto; width: 563px;"></p> +<p><img alt="Terminologie pour les boîtes modulables" src="termes_flex.png"></p> <ul> <li>L'<strong>axe principal</strong> <strong>(main axis) </strong>est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'<strong>origine principale</strong> <strong>(main start) </strong>et la <strong>fin principale (main end)</strong>.</li> @@ -101,14 +101,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> +<p><strong>Note :</strong> Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> </div> <h2 id="Enveloppement">Enveloppement</h2> <p>Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, essayez <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">directement</a> (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :</p> -<p><img alt="Débordement des éléments modulables" src="https://mdn.mozillademos.org/files/16098/Exemple_flexbox_2.png" style="display: block; height: 663px; margin: 0px auto; width: 933px;"></p> +<p><img alt="Débordement des éléments modulables" src="Exemple_flexbox_2.png"></p> <p>Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour <code>section</code> :</p> @@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Essayons ; la disposition est bien meilleure avec cet ajout :</p> -<p><img alt="Conditionnement des éléments modulables" src="https://mdn.mozillademos.org/files/16099/Exemple_flexbox_3.png" style="display: block; height: 918px; margin: 0px auto; width: 933px;">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> +<p><img alt="Conditionnement des éléments modulables" src="Exemple_flexbox_3.png">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> <p>Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en <code>row-reverse</code> — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.</p> @@ -165,7 +165,7 @@ article:nth-of-type(3) { <p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p> -<p><img alt="Modulation de la largeur" src="https://mdn.mozillademos.org/files/16100/Exemple_flexbox_4.png" style="border-style: solid; border-width: 1px; display: block; height: 484px; margin: 0px auto; width: 1001px;"></p> +<p><img alt="Modulation de la largeur" src="Exemple_flexbox_4.png"></p> <p>Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.</p> @@ -185,7 +185,7 @@ article:nth-of-type(3) { <p>Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">voir aussi en direct</a>). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.</p> -<p><img alt="Alignement" src="https://mdn.mozillademos.org/files/16101/Exemple_flexbox_5.png" style="display: block; height: 105px; margin: 0px auto; width: 960px;"></p> +<p><img alt="Alignement" src="Exemple_flexbox_5.png"></p> <p>D'abord, faites une copie locale de cet exemple.</p> @@ -256,7 +256,7 @@ article:nth-of-type(3) { <p>Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">à voir en direct également</a>).</p> -<p><img alt="Imbrications avec flexbox" src="https://mdn.mozillademos.org/files/16102/Exemple_flexbox_6.png" style="border-style: solid; border-width: 1px; display: block; height: 559px; margin: 0px auto; width: 1003px;"></p> +<p><img alt="Imbrications avec flexbox" src="Exemple_flexbox_6.png"></p> <p>Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}} :</p> @@ -316,7 +316,7 @@ article:nth-of-type(3) { <p>Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.</p> -<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> +<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> <h2 id="Résumé">Résumé</h2> @@ -328,15 +328,15 @@ article:nth-of-type(3) { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> </div> diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.html b/files/fr/learn/css/css_layout/flexbox_skills/index.html index d46a7b5f55..4e473510b9 100644 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.html +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.html @@ -10,8 +10,8 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> +<div class="note"> +<p><strong>Note :</strong> You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> <br> If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> </div> @@ -20,21 +20,21 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.</p> -<p><img alt="Flex items laid out as a row with space between them." src="https://mdn.mozillademos.org/files/16938/flex-task1.png" style="height: 135px; width: 1441px;"></p> +<p><img alt="Flex items laid out as a row with space between them." src="flex-task1.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Two">Flex Layout Two</h2> <p>Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.</p> -<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="https://mdn.mozillademos.org/files/16939/flex-task2.png" style="height: 586px; width: 1424px;"></p> +<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="flex-task2.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> @@ -46,22 +46,22 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <li>Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?</li> </ul> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Three">Flex Layout Three</h2> <p>Il y a deux éléments dans le HTML ci-dessous, une div avec une classe <code>.parent</code> qui contient une autre div avec une classe <code>.child</code>. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.</p> -<p><img alt="A box centered inside another box." src="https://mdn.mozillademos.org/files/16940/flex-task3.png" style="height: 632px; width: 840px;"></p> +<p><img alt="A box centered inside another box." src="flex-task3.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Four">Flex Layout Four</h2> @@ -69,14 +69,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.<br> </p> -<p><img alt="A set of items displayed as rows." src="https://mdn.mozillademos.org/files/16941/flex-task4.png" style="height: 445px; width: 942px;"></p> +<p><img alt="A set of items displayed as rows." src="flex-task4.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Assessment_or_further_help">Assessment or further help</h2> diff --git a/files/fr/learn/css/css_layout/floats/index.html b/files/fr/learn/css/css_layout/floats/index.html index ffcc762cea..386185ea62 100644 --- a/files/fr/learn/css/css_layout/floats/index.html +++ b/files/fr/learn/css/css_layout/floats/index.html @@ -20,9 +20,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> +<p>À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -37,9 +37,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2> -<p>La propriété <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> -<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> +<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> <p>Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.</p> @@ -51,11 +51,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément <code>body</code> en supprimant tout ce qu'il y avait avant :</p> - - <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> -<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> +<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -92,11 +90,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p> -<div id="Float_1"> -<div class="hidden"> -<h6 id="Float_Example_1">Float Example 1</h6> +<h3>Faire flotter la boîte</h3> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<p>Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant <code>.box</code> :</p> + +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -124,10 +122,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}</p> <p>Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété <code>float</code> (l'élément <code>box</code> dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (<code>left</code>) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.</p> @@ -142,13 +138,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> +<h3>Visualiser le flottement</h3> -<div id="Float_2"> -<div class="hidden"> -<h6 id="Float_Example_2">Float Example 2</h6> +<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -181,10 +175,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}</p> <p>Les lignes du paragraphe suivant la boîte flottante ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.</p> @@ -199,10 +191,6 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<div id="Float_3"> -<div class="hidden"> -<h6 id="Float_Example_3">Float Example 3</h6> - <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -235,10 +223,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats clear: left; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}</p> <p>Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété <code>clear</code> accepte les valeurs suivantes :</p> @@ -267,13 +253,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; }</pre> -<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> +<h3>Le problème</h3> -<div id="Float_4"> -<div class="hidden"> -<h6 id="Float_Example_4">Float Example 4</h6> +<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -307,10 +291,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_problème', '100%', 600) }}</p> <p>Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.</p> @@ -328,11 +310,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <code><div></code> en dessous avec la règle <code>clear: both</code>.</p> -<div id="Float_5"> -<div class="hidden"> -<h6 id="Float_Example_5">Float Example 5</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -371,10 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: block; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}</p> <h3 id="Utilisation_du_débordement">Utilisation du débordement</h3> @@ -389,11 +365,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats overflow: auto; }</pre> -<div id="Float_6"> -<div class="hidden"> -<h6 id="Float_Example_6">Float Example 6</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -427,10 +399,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}</p> <p>Cet exemple fonctionne en créant ce que l'on appelle un <strong>block formatting context</strong> (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.</p> @@ -445,11 +415,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: flow-root; }</pre> -<div id="Float_7"> -<div class="hidden"> -<h6 id="Float_Example_7">Float Example 7</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -483,28 +449,26 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}</p> <h2 id="Résumé">Résumé</h2> -<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> +<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html index 05f16693ae..3694a00968 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -6,77 +6,77 @@ original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension --- <div>{{LearnSidebar}}</div> -<p class="summary"><font>Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également.<span> </span></font><font>Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</font></p> +<p>Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><strong style="">Conditions préalables</strong>:</th> - <td><span style="">Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</span></td> + <th scope="row"><strong>Conditions préalables</strong>:</th> + <td>Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</td> </tr> <tr> - <th scope="row"><strong style="">Objectif</strong>:</th> - <td><span style="">Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</span></td> + <th scope="row"><strong>Objectif</strong>:</th> + <td>Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</td> </tr> </tbody> </table> -<h2 id="dossier_de_projet"><font><font>dossier de projet</font></font></h2> +<h2 id="dossier_de_projet">dossier de projet</h2> -<p><span style="">Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.</span></p> +<p>Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p> +<p><img alt="" src="layout-task-complete.png"></p> -<h3 id="configuration_de_base"><font><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>configuration de base</font></span></font></h3> +<h3 id="configuration_de_base">configuration de base</h3> -<p style=""><font><font>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images<span> </span></font></font><a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension" rel="noopener" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none; white-space: pre-line;"><font><font>ici</font></font></a><font><font><span> </span>.</font></font></p> +<p>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ici</a> .</p> -<p style=""><font><font>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>images</code><font><font>.<span> </span></font><font>Ouvrir le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>index.html</code><font><font>fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.</font></font></p> +<p>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé <code>images</code>. Ouvrir le <code>index.html</code>fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.</p> -<p style=""><font><font>Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.</font></font></p> +<p>Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p> +<p><img alt="" src="layout-task-start.png"></p> -<h3 id="Votre_section_detâches"><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font><font>Votre<span> </span></font></font></span><font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#Your_tasks" style="margin: 0px; padding: 0px; border: 0px; color: inherit; text-decoration: none;"><span><font>section de</font></span></a><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>tâches</font></span></font></h3> +<h3 id="Votre_section_detâches">Votre section de tâches</h3> -<p style=""><font><font>Vous devez maintenant implémenter votre mise en page.<span> </span></font><font>Les tâches que vous devez accomplir sont:</font></font></p> +<p>Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:</p> -<ol style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les<span> </span></font><font>éléments<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, en syndication)."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><article></code></a><font><font>et<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML <apartement> représente une partie d'un document dont le contenu est uniquement indirectement lié au contenu principal du document."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><aside></code></a><font><font>doivent s'afficher sous la forme d'une disposition à deux colonnes.<span> </span></font><font>La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</font></font></li> +<ol> + <li>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</li> + <li>La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.</li> + <li>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>et <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</li> + <li>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</li> </ol> -<p style=""><font><font>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</font></font></p> +<p>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</p> -<ul style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnement</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flotte</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flexbox</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>CSS Grid Layout</font></font></li> +<ul> + <li>Positionnement</li> + <li>Flotte</li> + <li>Flexbox</li> + <li>CSS Grid Layout</li> </ul> -<p style=""><font><font>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses.<span> </span></font><font>Essayez différentes approches et voyez laquelle fonctionne le mieux.<span> </span></font><font>Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>.</font></font></p> +<p>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> .</p> <h2 id="Evaluation">Evaluation</h2> -<p><font><font>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige.<span> </span></font><font>Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le<span> </span></font></font><a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener" style=""><font><font>fil de discussion relatif à cet exercice</font></font></a><font><font><span> </span>ou sur le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style=""><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>sur<span> </span></font></font><a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener" style=""><font><font>Mozilla IRC</font></font></a><font><font><span> </span>.<span> </span></font><font>Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</font></font></p> - -<h2 id="Dans_ce_module_Section" style=""><font><font>Dans ce module<span> </span></font></font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#In_this_module" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><span><font><font>Section</font></font></span></a></h2> - -<ul style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Introduction à la mise en page CSS</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Débit normal</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flexbox</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>la grille</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flotteurs</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Positionnement</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Mise en page à plusieurs colonnes</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Conception sensible</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Guide du débutant aux questions des médias</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Méthodes de mise en page héritées</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Soutenir les anciens navigateurs</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Évaluation fondamentale de la compréhension de la mise en page.</font></font></a></li> +<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener">fil de discussion relatif à cet exercice</a> ou sur le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</p> + +<h2 id="Dans_ce_module_Section">Dans ce module Section</h2> + +<ul> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Débit normal</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">la grille</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flotteurs</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mise en page à plusieurs colonnes</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception sensible</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant aux questions des médias</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page héritées</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Soutenir les anciens navigateurs</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation fondamentale de la compréhension de la mise en page.</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html index 272858a9e8..6a0d5da4ad 100644 --- a/files/fr/learn/css/css_layout/grids/index.html +++ b/files/fr/learn/css/css_layout/grids/index.html @@ -22,13 +22,13 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> +<p>« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> + <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -43,7 +43,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p> -<p><img alt="Schéma du quadrillage" src="https://mdn.mozillademos.org/files/16104/grille.png" style="display: block; height: 346px; margin: 0px auto; width: 747px;"></p> +<p><img alt="Schéma du quadrillage" src="grille.png"></p> <h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2> @@ -70,11 +70,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.</p> -<div id="Grid_1"> -<div class="hidden"> -<h6 id="Simple_Grid_Example">Simple Grid Example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -88,7 +84,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -102,10 +98,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids display: grid; grid-template-columns: 200px 200px 200px; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p> <h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3> @@ -127,11 +121,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.</p> -<div id="Grid_2"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -151,7 +141,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -160,13 +150,11 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Six</div> <div>Sept</div> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> +<p><strong>Note :</strong> L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> </div> <h3 id="Espaces_entre_pistes">Espaces entre pistes</h3> @@ -181,11 +169,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p> -<div id="Grid_3"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -222,7 +206,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> +<p><strong>Note :</strong> Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> </div> <pre class="brush: css">.container { @@ -250,11 +234,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Par défaut, les rangées de la trame implicite sont <code>auto</code> dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p> -<div id="Grid_4"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -268,7 +248,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -278,7 +258,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Sept</div> </div> </pre> -</div> <pre class="brush: css">.container { display: grid; @@ -286,9 +265,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-auto-rows: 100px; grid-gap: 20px; }</pre> -</div> -<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p> <h3 id="La_fonction_minmax">La fonction minmax()</h3> @@ -311,11 +289,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p> -<div id="Grid_5"> -<div class="hidden"> -<h6 id="As_many_columns_as_will_fit">As many columns as will fit</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -330,7 +304,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -339,7 +313,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Six</div> <div>Sept</div> </div> </pre> -</div> <pre class="brush: css">.container { display: grid; @@ -347,9 +320,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-auto-rows: minmax(100px, auto); grid-gap: 20px; }</pre> -</div> -<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p> <p>Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.</p> @@ -399,11 +371,7 @@ footer { grid-row: 3; }</pre> -<div id="Grid_6"> -<div class="hidden"> -<h6 id="Line-based_placement">Line-based placement</h6> - -<pre class="brush: css"> body { +<pre class="brush: css hidden"> body { width: 90%; max-width: 900px; margin: 2em auto; @@ -448,8 +416,8 @@ aside { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -462,13 +430,11 @@ aside { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> +<p><strong>Note :</strong> vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> </div> <h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2> @@ -505,11 +471,8 @@ footer { <p>Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !</p> -<div id="Grid_7"> -<div class="hidden"> -<h6 id="Line-based_placement_2">Line-based placement</h6> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -555,8 +518,8 @@ footer { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -569,10 +532,8 @@ footer { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p> <p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p> @@ -612,11 +573,7 @@ footer { grid-row: 3; }</pre> -<div id="Grid_8"> -<div class="hidden"> -<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -662,8 +619,8 @@ aside { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -676,14 +633,12 @@ aside { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p> -<p>Si vous utilisez <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> +<p>Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> -<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16109/trames.png" style="height: 677px; width: 1363px;"></p> +<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p> <h2 id="Résumé">Résumé</h2> @@ -692,8 +647,8 @@ aside { <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> </ul> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> @@ -703,14 +658,14 @@ aside { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/index.html b/files/fr/learn/css/css_layout/index.html index fac781b37b..b6b10499ce 100644 --- a/files/fr/learn/css/css_layout/index.html +++ b/files/fr/learn/css/css_layout/index.html @@ -22,12 +22,12 @@ original_slug: Apprendre/CSS/CSS_layout --- <div>{{LearnSidebar}}</div> -<p class="summary">À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> +<p>À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> <div class="callout"> - <h4 id="Looking_to_become_a_front-end_web_developer">Vous cherchez à devenir développeuse ou développeur web front-end ?</h4> + <p>Vous cherchez à devenir développeuse ou développeur web front-end ?</p> <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> + <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> </p> </div> @@ -42,8 +42,7 @@ original_slug: Apprendre/CSS/CSS_layout </ol> <div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> + <p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> </div> <h2 id="guides">Guides</h2> diff --git a/files/fr/learn/css/css_layout/introduction/index.html b/files/fr/learn/css/css_layout/introduction/index.html index 61936d08b4..c295efa170 100644 --- a/files/fr/learn/css/css_layout/introduction/index.html +++ b/files/fr/learn/css/css_layout/introduction/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div>{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}</div> -<p class="summary">Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> +<p>Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Les éléments disposés en empilement sont désignés comme étant des éléments <em>blocs</em>, par opposition aux éléments <em>en ligne</em> qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.</p> <div class="note"> -<p><strong>Note</strong>: « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> +<p><strong>Note :</strong> « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> </div> <p>Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.</p> @@ -82,11 +82,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :</p> <ul> - <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> <li><strong>Flotteurs</strong> — appliquer à {{cssxref("float")}} une valeur comme <code>left</code> peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.</li> <li><strong>La propriété {{cssxref("position")}}</strong> — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. <code>static</code> est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.</li> <li><strong>Mise en page de tableaux</strong> — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant <code>display: table</code> et les propriétés associées.</li> - <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> + <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="/fr/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> </ul> <h2 id="La_propriété_«_display_»">La propriété « display »</h2> @@ -99,17 +99,15 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <h2 id="Flexbox">Flexbox</h2> -<p>Flexbox est l'abréviation pour <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> +<p>Flexbox est l'abréviation pour <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> <p>Le balisage HTML ci-dessous crée un élément conteneur de la classe <code>wrapper</code>, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.</p> -<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> +<h3>Utiliser display: flex</h3> -<div id="Flex_1"> -<div class="hidden"> -<h6 id="Flexbox_Exemple_1">Flexbox Exemple 1</h6> +<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -117,7 +115,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: flex; @@ -130,19 +127,16 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box3">Trois</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> +<p>{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}</p> + +<h3>Définir la propriété flex</h3> <p>En plus des propriétés ci-dessus applicables au conteneur <code>flex</code>, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.</p> <p>À titre d'exemple, nous pouvons donner la valeur <code>1</code> à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.</p> -<div id="Flex_2"> -<div class="hidden"> -<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> - -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -150,7 +144,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: flex; @@ -167,12 +160,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box3">Trois</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> +<p>{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}</p> <div class="note"> -<p><strong>Note </strong>: Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> +<p><strong>Note :</strong> Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> </div> <h2 id="Disposition_en_trame">Disposition en trame</h2> @@ -181,11 +173,9 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à <code>display</code> — <code>display: grid</code>. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre <code>display: grid</code>, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de <code>1fr</code> chacune et deux lignes de <code>100px</code>. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.</p> -<div id="Grid_1"> -<div class="hidden"> -<h6 id="Grid_example_1">Grid example 1</h6> +<h3>Utiliser display: grid</h3> -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -193,7 +183,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -212,17 +201,14 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box6">Six</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> +<p>{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}</p> -<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> +<h3>Placer des objets sur la grille</h3> -<div id="Grid_2"> -<div class="hidden"> -<h6 id="Grid_example_2">Grid example 2</h6> +<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -230,7 +216,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -263,10 +248,10 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction </pre> </div> -<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> +<p>{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}</p> <div class="note"> -<p><strong>Note </strong>: Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> +<p><strong>Note :</strong> Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> </div> <p>La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.</p> @@ -286,11 +271,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Dans l'exemple ci‑dessous nous faisons flotter un élément <code><div></code> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.</p> -<div id="Float_1"> -<div class="hidden"> -<h6 id="Floats_example">Floats example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -308,7 +289,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> @@ -326,12 +306,11 @@ p { margin-right: 30px; } </pre> -</div> -<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}</p> <div class="note"> -<p><strong>Note </strong>: Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> +<p><strong>Note :</strong> Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> </div> <h2 id="Techniques_de_positionnement">Techniques de positionnement</h2> @@ -394,17 +373,13 @@ p { <p>Ajouter ce code donne le résultat suivant :</p> -<div id="Relative_1"> -<div class="hidden"> -<h6 id="Relative_positioning_example">Relative positioning example</h6> - -<pre class="brush: html"><h1>Positionnement relatif</h1> +<pre class="brush: html hidden"><h1>Positionnement relatif</h1> <p>Je suis un élément de niveau bloc de base.</p> <p class="positioned">Voici un élément avec un positionnement relatif.</p> <p>Je suis un élément de niveau bloc de base.</p></pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -417,7 +392,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: css">.positioned { position: relative; @@ -426,9 +400,8 @@ p { top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}</p> <h3 id="Positionnement_absolu">Positionnement absolu</h3> @@ -444,17 +417,13 @@ p { <p>Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur <code>absolute</code> et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :</p> -<div id="Absolute_1"> -<div class="hidden"> -<h6 id="Absolute_positioning_example">Absolute positioning example</h6> - -<pre class="brush: html"><h1>Positionnement absolu</h1> +<pre class="brush: html hidden"><h1>Positionnement absolu</h1> <p>Je suis un élément de niveau bloc de base.</p> <p class="positioned">Voici un élément avec un positionnement absolu.</p> <p>Je suis un élément de niveau bloc de base.</p></pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -467,7 +436,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: css">.positioned { position: absolute; @@ -476,11 +444,10 @@ p { top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}</p> -<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> +<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> <h3 id="Positionnement_fixé">Positionnement fixé</h3> @@ -497,11 +464,7 @@ p { <p>Paragraphe 3.</p> </pre> -<div id="Fixed_1"> -<div class="hidden"> -<h6 id="Fixed_positioning_example">Fixed positioning example</h6> - -<pre class="brush: html"><h1>Positionnement fixé</h1> +<pre class="brush: html hidden"><h1>Positionnement fixé</h1> <div class="positioned">Fixé</div> @@ -513,7 +476,7 @@ p { </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -525,26 +488,20 @@ p { margin: 10px; border-radius: 5px; }</pre> -</div> <pre class="brush: css">.positioned { position: fixed; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}</p> <h3 id="Positionnement_collant">Positionnement collant</h3> <p>Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété <code>position: sticky</code>, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si <code>position: fixed</code> lui était appliqué.</p> -<div id="Sticky_1"> -<div class="hidden"> -<h6 id="Sticky_positioning_example">Sticky positioning example</h6> - -<pre class="brush: html"><h1>Positionnement collant</h1> +<pre class="brush: html hidden"><h1>Positionnement collant</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -554,7 +511,7 @@ p { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -566,19 +523,17 @@ p { margin: 10px; border-radius: 5px; }</pre> -</div> <pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}</p> <div class="note"> -<p><strong>Note </strong>: pour plus de précisions à propos du positionnement, voir l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> +<p><strong>Note :</strong> pour plus de précisions à propos du positionnement, voir l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> </div> <h2 id="Les_tableaux_CSS">Les tableaux CSS</h2> @@ -670,11 +625,7 @@ form p { <p>Noux utilisons une propriété <code>column-width</code> de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.</p> -<div id="Multicol_1"> -<div class="hidden"> -<h6 id="Multicol_example">Multicol example</h6> - -<pre class="brush: html"> <div class="container"> +<pre class="brush: html hidden"> <div class="container"> <h2>Disposition en colonnes</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -685,15 +636,13 @@ form p { </div> </pre> -<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> -</div> +<pre class="brush: css hidden">body { max-width: 800px; margin: 0 auto; } </pre> <pre class="brush: css"> .container { column-width: 200px; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}</p> <h2 id="Résumé">Résumé</h2> @@ -706,12 +655,12 @@ form p { <ul> <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">La mise en page avec les CSS</a></li> <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html index f4777dd68d..e78ffa385a 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> -<p class="summary">Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> +<p>Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -93,11 +93,9 @@ div:nth-of-type(2) { <p>En mettant tout ensemble, voici le résultat :</p> -<div id="Floated_Two_Col"> -<div class="hidden"> -<h6 id="Simple_two-column_layout">Simple two-column layout</h6> +<h3>Exemple complet</h3> -<pre class="brush: html"><h1>Exemple de disposition sur 2 colonnes</h1> +<pre class="brush: html hidden"><h1>Exemple de disposition sur 2 colonnes</h1> <div> <h2>Première colonne</h2> @@ -110,7 +108,7 @@ div:nth-of-type(2) { </div> </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -126,20 +124,18 @@ div:nth-of-type(2) { float: right; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p> +<p>{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}</p> <p>Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une <strong>disposition fluide</strong>, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.</p> <div class="note"> -<p><strong>Note</strong> : Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> +<p><strong>Note :</strong> Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> </div> <h2 id="Ancienne_création_d'un_cadre_de_trames">Ancienne création d'un cadre de trames</h2> -<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> +<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> <p>Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.</p> @@ -176,7 +172,7 @@ div:nth-of-type(2) { <p>Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> +<p><img alt="" src="simple-grid-finished.png"></p> <p>À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à <code>border-box</code> sur tous les éléments du site (voir <a href="/fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte">Modification totale du modèle de boîte</a> pour plus d'explications).</p> @@ -217,7 +213,7 @@ body { <p>La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.</p> <div class="note"> -<p><strong>Note</strong> : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> +<p><strong>Note :</strong> Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> </div> <p>Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.</p> @@ -242,7 +238,7 @@ body { <p>Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.</p> <div class="note"> -<p><strong>Note </strong>: Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> </div> <p>Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :</p> @@ -323,12 +319,12 @@ body { <p>Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.</p> <div class="note"> -<p><strong>Note</strong> : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> </div> <h3 id="Faciliter_les_calculs_avec_la_fonction_calc()">Faciliter les calculs avec la fonction calc()</h3> -<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> +<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> <p>Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction <code>calc()</code> nous permet de faire ce calcul dans la valeur <code>width</code> même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :</p> @@ -351,11 +347,11 @@ body { .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> <div class="note"> -<p><strong>Note </strong>: Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> +<p><strong>Note :</strong> Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> </div> <div class="note"> -<p><strong>Note </strong>: Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> +<p><strong>Note :</strong> Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> </div> <h3 id="Systèmes_de_trames_«_sémantiques_»_vs._«_non_sémantiques_»">Systèmes de trames « sémantiques » vs. « non sémantiques »</h3> @@ -369,7 +365,7 @@ body { }</pre> <div class="note"> -<p><strong>Note </strong>: Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> +<p><strong>Note :</strong> Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> </div> <h3 id="Décalage_du_conteneur_d'une_trame">Décalage du conteneur d'une trame</h3> @@ -401,15 +397,15 @@ body { <pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> <div class="note"> -<p><strong>Note</strong> : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> +<p><strong>Note :</strong> Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> </div> <p>Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">l'exécution directement</a>). L'exemple terminé doit ressembler à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> +<p><img alt="" src="offset-grid-finished.png"></p> <div class="note"> -<p><strong>Note </strong>: Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> +<p><strong>Note :</strong> Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> </div> <h3 id="Limitations_des_trames_de_boîtes_flottantes">Limitations des trames de boîtes flottantes</h3> @@ -457,7 +453,7 @@ body { <p>Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> +<p><img alt="" src="flexbox-grid-incomplete.png"></p> <p>Pour corriger cela, nous avons encore besoin d'inclure les classes <code>span</code> pour donner une largeur qui remplave la valeur donnée par <code>flex-basis</code> pour cet élément.</p> @@ -485,7 +481,7 @@ body { <p>Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.</p> <div class="note"> -<p><strong>Note</strong> : <a href="/en-US/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> +<p><strong>Note :</strong> <a href="/fr/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> </div> <p>Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :</p> @@ -553,7 +549,7 @@ body { <p>Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.</p> <div class="note"> -<p><strong>Note </strong>: Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> +<p><strong>Note :</strong> Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> </div> <p>Si vous regardez dans le fichier <em>skeleton.css</em> vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.</p> @@ -573,14 +569,14 @@ body { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html index 552d1982df..f629d17eb3 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.html +++ b/files/fr/learn/css/css_layout/media_queries/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> + <td>HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> </tr> <tr> <th scope="row">Objective:</th> @@ -50,22 +50,22 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.</p> -<pre class="brush: css"><code>@media print { +<pre class="brush: css">@media print { body { font-size: 12pt; } -}</code></pre> +}</pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: the media type here is different from the so-called {{glossary("MIME type")}}.</p> +<div class="note"> +<p><strong>Note :</strong> the media type here is different from the so-called {{glossary("MIME type")}}.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> +<div class="note"> +<p><strong>Note :</strong> there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> +<div class="note"> +<p><strong>Note :</strong> Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> </div> <h3 id="Media_feature_rules">Media feature rules</h3> @@ -78,37 +78,37 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.</p> -<pre class="brush: css"><code>@media screen and (width: 600px) { +<pre class="brush: css">@media screen and (width: 600px) { body { color: red; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">view the source</a>.</p> <p>The <code>width</code> (and <code>height</code>) media features can be used as ranges, and therefore be prefixed with <code>min-</code> or <code>max-</code> to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use <code>max-width</code>:</p> -<pre class="brush: css"><code>@media screen and (max-width: 400px) { +<pre class="brush: css">@media screen and (max-width: 400px) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">view the source</a>.</p> <p>In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see <code>width</code> or <code>height</code> used alone.</p> -<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> +<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> <h4 id="Orientation">Orientation</h4> <p>One well-supported media feature is <code>orientation</code>, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.</p> -<pre class="brush: css"><code>@media (orientation: landscape) { +<pre class="brush: css">@media (orientation: landscape) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">view the source</a>.</p> @@ -118,11 +118,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>As part of the Level 4 specification, the <code>hover</code> media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.</p> -<pre class="brush: css"><code>@media (hover: hover) { +<pre class="brush: css">@media (hover: hover) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">view the source</a>.</p> @@ -140,11 +140,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>To combine media features you can use <code>and</code> in much the same way as we have used <code>and</code> above to combine a media type and feature. For example, we might want to test for a <code>min-width</code> and <code>orientation</code>. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">view the source</a>.</p> @@ -152,11 +152,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">view the source</a>.</p> @@ -164,11 +164,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>You can negate an entire media query by using the <code>not</code> operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.</p> -<pre class="brush: css"><code>@media not all and (orientation: landscape) { +<pre class="brush: css">@media not all and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">view the source</a>.</p> @@ -178,9 +178,9 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as <strong>breakpoints</strong>.</p> -<p>The <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> +<p>The <a href="/fr/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> -<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> +<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="rwd-mode.png"></p> <h2 id="Active_learning_mobile_first_responsive_design">Active learning: mobile first responsive design</h2> @@ -194,7 +194,7 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p> -<pre class="brush: css"><code>* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -244,11 +244,11 @@ nav a:hover { article { margin-bottom: 1em; } -</code></pre> +</pre> <p>We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.</p> -<pre class="brush: html"><code><body> +<pre class="brush: html"><body> <div class="wrapper"> <header> <nav> @@ -288,7 +288,7 @@ article { <footer><p>&copy;2019</p></footer> </div> </body> -</code></pre> +</pre> <p>This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.</p> @@ -300,7 +300,7 @@ article { <p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p> -<pre class="brush: css"><code>@media screen and (min-width: 40em) { +<pre class="brush: css">@media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; @@ -315,7 +315,7 @@ article { flex: 1; } } -</code></pre> +</pre> <p>This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.</p> @@ -353,7 +353,7 @@ article { <p>This could be achieved using the following:</p> -<pre class="brush: html"><code><ul class="grid"> +<pre class="brush: html"><ul class="grid"> <li> <h2>Card 1</h2> <p>...</p> @@ -374,9 +374,9 @@ article { <h2>Card 5</h2> <p>...</p> </li> -</ul></code></pre> +</ul></pre> -<pre class="brush: css"><code>.grid { +<pre class="brush: css">.grid { list-style: none; margin: 0; padding: 0; @@ -388,7 +388,7 @@ article { .grid li { border: 1px solid #666; padding: 10px; -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">Open the grid layout example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">view the source</a>.</p> @@ -396,7 +396,7 @@ article { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/fr/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> <h2 id="Summary">Summary</h2> @@ -411,16 +411,16 @@ article { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html index 9d28e265de..248c788e2b 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> +<p>Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -47,18 +47,13 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p> -<div id="Multicol_1"> -<div class="hidden"> -<h6 id="column-count_example">column-count example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -</div> <pre class="brush: html"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> @@ -76,13 +71,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout </div> </pre> -<pre class="brush: css">.container { - column-count: 3; -} -</pre> -</div> +<p>{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}</p> -<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p> +<h3>Définir column-width</h3> <p>Modifiez la CSS pour utiliser <code>column-width</code> ainsi :</p> @@ -93,18 +84,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.</p> -<div id="Multicol_2"> -<div class="hidden"> -<h6 id="column-width_example">column-width example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; }</pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -118,15 +105,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div></pre> -</div> - -<pre class="brush: css">.container { - column-width: 200px; -} -</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}</p> <h2 id="Style_des_colonnes">Style des colonnes</h2> @@ -154,11 +134,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Ajoutons des règles pour les divers styles et couleurs.</p> -<div id="Multicol_3"> -<div class="hidden"> -<h6 id="Styling_the_columns">Styling the columns</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -170,7 +146,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout column-rule: 4px dotted rgb(79, 185, 227); }</pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -184,10 +160,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div></pre> -</div> -</div> -<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}</p> <p>Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec <code>column-gap</code>. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.</p> @@ -197,11 +171,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé <em>multicol</em> pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.</p> -<div id="Multicol_4"> -<div class="hidden"> -<h6 id="Cards_example">Cards example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -209,7 +179,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout } </pre> </div> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div class="card"> <h2>Je suis un titre</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -279,11 +249,12 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}</p> -<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> +<h3>Utiliser break-inside</h3> + +<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> <p>Il est également préférable d'ajouter l'ancienne propriété <code>page-break-inside: avoid</code> pour une meilleure prise en charge par les divers navigateurs.</p> @@ -299,18 +270,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Actualisez la page et les boîtes devraient rester entières.</p> -<div id="Multicol_5"> -<div class="hidden"> -<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div class="card"> <h2>Je suis un titre</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -368,7 +335,6 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout </div> </pre> -</div> <pre class="brush: css">.container { column-width: 250px; @@ -383,9 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}</p> <h2 id="Résumé">Résumé</h2> @@ -394,8 +359,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> </ul> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> @@ -403,14 +368,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/normal_flow/index.html b/files/fr/learn/css/css_layout/normal_flow/index.html index 00f1cc1882..b0edfa8415 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.html +++ b/files/fr/learn/css/css_layout/normal_flow/index.html @@ -8,9 +8,9 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p> -<p class="summary">Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> +<p>Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -41,7 +41,8 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <p>Voici un exemple simple expliquant cela :</p> -<div id="Normal_Flow"> +<h3 id="Exemple">Exemple</h3> + <pre class="brush: html"><h2>Cours d'un document de base</h2> <p>Je suis un élément de niveau bloc de base. @@ -65,7 +66,7 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <span>sont placés sur une nouvelle ligne si possible (comme celle‑ci contenant du texte)</span>, sinon ils sont placés sur une nouvelle ligne, comme cette image : - <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + <img src="long.jpg"></p></pre> <pre class="brush: css">body { width: 500px; @@ -83,9 +84,8 @@ span { background: white; border: 1px solid black; }</pre> -</div> -<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Exemple', '100%', 500) }}</p> <h2 id="Résumé">Résumé</h2> @@ -96,14 +96,14 @@ span { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/positioning/index.html b/files/fr/learn/css/css_layout/positioning/index.html index c4a9c593b6..8485a78f70 100644 --- a/files/fr/learn/css/css_layout/positioning/index.html +++ b/files/fr/learn/css/css_layout/positioning/index.html @@ -22,9 +22,9 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> +<p>Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -51,25 +51,25 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <p>Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe <code>positioned</code> pour le deuxième {{htmlelement("p")}} dans le HTML:</p> -<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> +<pre class="brush: html"><p class="positioned"> ... </p></pre> <p>Puis ajoutez la règle suivante au bas de votre CSS:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: static; background: yellow; }</pre> <p>Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !</p> <div class="note"> -<p><strong>Remarque </strong>: ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> +<p><strong>Note :</strong> ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> </div> <h3 id="Positionnement_«_relative_»">Positionnement « relative »</h3> <p>Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de <code>position</code> dans le code :</p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css">position: relative;</pre> <p>Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.</p> @@ -77,25 +77,23 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle <code>.positioned</code> dans la CSS :</p> -<pre class="notranslate">top: 30px; +<pre>top: 30px; left: 30px;</pre> <div class="note"> -<p><strong>Remarque </strong>: les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> +<p><strong>Note :</strong> les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> </div> <p>Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :</p> -<div id="example_1"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement relatif</h1> +<pre class="brush: html hidden"><h1>Positionnement relatif</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } p { @@ -111,35 +109,31 @@ span { background: yellow; top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_1', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}</p> -<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela <span class="st">peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif</span>. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> +<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> <div class="note"> -<p><strong>Remarque</strong>: à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> </div> <h3 id="Positionnement_«_absolute_»">Positionnement « absolute »</h3> <p>Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de <code>position</code> dans le code :</p> -<pre class="notranslate">position: absolute;</pre> +<pre>position: absolute;</pre> <p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :</p> -<div id="example_2"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement absolu</h1> +<pre class="brush: html hidden"><h1>Positionnement absolu</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } p { @@ -155,25 +149,23 @@ span { background: yellow; top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_2', '100%', 420) }}</p> +<p>{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}</p> -<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. <span class="st">Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste.</span> C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> +<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> -<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu <span class="st">de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant.</span> Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> +<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> <div class="note"> -<p><strong>Note</strong> : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> +<p><strong>Note :</strong> vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> </div> <div class="note"> -<p><strong>Note </strong>: Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> +<p><strong>Note :</strong> Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> </div> <div class="note"> -<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> </div> <h3 id="Contextes_de_positionnement">Contextes de positionnement</h3> @@ -182,21 +174,19 @@ span { <p>Nous pouvons changer ce <strong>contexte de positionnement</strong> — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:</p> -<pre class="notranslate">position: relative;</pre> +<pre>position: relative;</pre> <p>Cela devrait donner le résultat suivant:</p> -<div id="example_3"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Contextes de positionnement</h1> +<pre class="brush: html hidden"><h1>Contextes de positionnement</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&gt;</code> !</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; position: relative; @@ -220,15 +210,13 @@ span { top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_3','100%', 420) }}</p> +<p>{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}</p> -<p><span class="st">À présent, l</span>'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> +<p>À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> <div class="note"> -<p><strong>Note </strong>: à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> </div> <h3 id="Présentation_du_z-index">Présentation du z-index</h3> @@ -237,7 +225,7 @@ span { <p>Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :</p> -<pre class="notranslate">p:nth-of-type(1) { +<pre>p:nth-of-type(1) { position: absolute; background: lime; top: 10px; @@ -252,22 +240,20 @@ span { <p>Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle <code>p:nth-of-type(1)</code> :</p> -<pre class="notranslate">z-index: 1;</pre> +<pre>z-index: 1;</pre> <p>Voici maintenant l'exemple terminé :</p> -<div id="example_4"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>z-index</h1> +<pre class="brush: html hidden"><h1>z-index</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&lt;html&gt;</code> !</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; position: relative; } @@ -291,15 +277,13 @@ p:nth-of-type(1) { right: 30px; z-index: 1; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_4', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}</p> <p>Notez que <code>z-index</code> n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.</p> <div class="note"> -<p><strong>Note</strong> : sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> +<p><strong>Note :</strong> sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> </div> <h3 id="Positionnement_«_fixed_»">Positionnement « fixed »</h3> @@ -310,7 +294,7 @@ p:nth-of-type(1) { <p>Maintenant, mettez à jour la règle <code>body</code> : supprimez la déclaration <code>position : relative ;</code> et ajoutez une hauteur fixe, ainsi :</p> -<pre class="notranslate">body { +<pre>body { width: 500px; height: 1400px; margin: 0 auto; @@ -318,7 +302,7 @@ p:nth-of-type(1) { <p>Maintenant, donnez la position <code>fixed</code> à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :</p> -<pre class="notranslate">h1 { +<pre>h1 { position: fixed; top: 0; width: 500px; @@ -331,22 +315,20 @@ p:nth-of-type(1) { <p>Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :</p> -<pre class="notranslate">p:nth-of-type(1) { +<pre>p:nth-of-type(1) { margin-top: 60px; }</pre> <p>Voici l'exemple terminé :</p> -<div id="example_5"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement fixe</h1> +<pre class="brush: html hidden"><h1>Positionnement fixe</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Je ne suis plus positionné...</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; height: 1400px; margin: 0 auto; @@ -376,24 +358,21 @@ h1 { p:nth-of-type(1) { margin-top: 60px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_5', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}</p> <div class="note"> -<p><strong>Note</strong> : à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> </div> <h3 id="«_position_sticky_»">« position: sticky »</h3> <p>Il y a une autre valeur de positionnement disponible appelée <code>position : sticky</code>. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.</p> -<div id="Sticky_1"> -<div class="hidden"> -<h6 id="Exemple_de_positionnement_collant">Exemple de positionnement collant</h6> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> +<h4>Exemple simple</h4> + +<pre class="brush: html hidden"><h1>Positionnement collant</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -403,7 +382,7 @@ p:nth-of-type(1) { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -415,20 +394,21 @@ p:nth-of-type(1) { margin: 10px; border-radius: 5px; }</pre> -</div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<p>{{ EmbedLiveSample('Exemple_simple', '100%', 200) }}</p> + +<h4>Index déroulant</h4> <p>Une utilisation courante pleine d'intérêt de <code>position: sticky</code> permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :</p> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> +<pre class="brush: html"><h1>Positionnement collant</h1> <dl> <dt>A</dt> @@ -461,7 +441,7 @@ p:nth-of-type(1) { <p>Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute <code>position : sticky</code> à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.</p> -<pre class="brush: css notranslate">dt { +<pre class="brush: css">dt { background-color: black; color: white; padding: 10px; @@ -472,9 +452,7 @@ p:nth-of-type(1) { } </pre> -<div id="Sticky_2"> -<div class="hidden"> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; height: 1400px; margin: 0 auto; @@ -491,43 +469,10 @@ dt { } </pre> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> - -<dl> -<dt>A</dt> -<dd>Abeille</dd> -<dd>Abricot</dd> -<dd>Altimètre</dd> -<dd>Avion</dd> -<dt>B</dt> -<dd>Banane</dd> -<dd>Betterave</dd> -<dd>Bœuf</dd> -<dd>Bouvreuil</dd> -<dd>Buzzard</dd> -<dt>C</dt> -<dd>Calculateur</dd> -<dd>Camera</dd> -<dd>Cane</dd> -<dd>Chameau</dd> -<dt>D</dt> -<dd>Dime</dd> -<dd>Dindon</dd> -<dd>Drapeau</dd> -<dd>Drone</dd> -<dt>E</dt> -<dd>Eau</dd> -<dd>Éléphant</dd> -<dd>Escadrille</dd> -</dl> -</pre> -</div> -</div> - -<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}</p> <div class="note"> -<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> </div> <h2 id="Résumé">Résumé</h2> @@ -540,20 +485,20 @@ dt { <ul> <li>Référence de la propriété {{cssxref("position")}}.</li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> </ul> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html index 05df9cfd85..312eea3059 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.html +++ b/files/fr/learn/css/css_layout/responsive_design/index.html @@ -17,7 +17,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de <em>responsive web design</em> (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -41,26 +41,22 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.</p> -<figure><img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="mdn-rwd-liquid.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> </div> <p>Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.</p> -<figure><img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="mdn-rwd-fixed.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> +<div class="note"> +<p><strong>Note :</strong> Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> </div> <p>Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.</p> @@ -69,7 +65,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2> -<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a> <sup>(EN)</sup>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> +<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> <p>Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.</p> @@ -93,7 +89,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur <code>.container</code> ne sera appliqué que si ces deux éléments sont vrais.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -114,12 +110,12 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser <a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">floats</a>. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.</p> -<pre class="notranslate"><code>target / context = result </code> +<pre><code>target / context = result </code> </pre> <p>Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -129,36 +125,32 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :<br> </p> -<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="mdn-rwd-mobile.png"> <p>Sur des écrans plus larges, ils se positionnent sur deux colonnes :</p> -<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A desktop view of a layout with two columns." src="mdn-rwd-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> </div> <h2 id="Techniques_modernes_de_mise_en_page">Techniques modernes de mise en page</h2> -<p>Les méthodes de mise en page modernes telles que <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> +<p>Les méthodes de mise en page modernes telles que <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> <h3 id="Multicol">Multicol</h3> <p>La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un <code>column-count</code>, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -169,7 +161,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation <code>flex: 1</code> comme décrit dans la rubrique de mise en page <a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex">Flexbox: Taille modulable des éléments flex</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -178,29 +170,29 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> </div> <h3 id="CSS_grid">CSS grid</h3> <p>Dans la mise en page en grille CSS, l'unité <code>fr</code> permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de <code>1fr</code>. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section <a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité "fr"</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> </div> <h2 id="Images_responsives">Images responsives</h2> <p>L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :</p> -<pre class="brush: css notranslate"><code>img { +<pre class="brush: css"><code>img { max-width: 100%: } </code> </pre> @@ -211,7 +203,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.</p> -<p>Vous pouvez trouver un <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> +<p>Vous pouvez trouver un <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> <h2 id="Typographie_responsive">Typographie responsive</h2> @@ -219,7 +211,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans cet exemple, nous voulons fixer notre titre de niveau 1 à <code>4rem</code>, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -238,18 +230,14 @@ h1 { <p>Sur un mobile, le titre est plus petit :</p> -<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A stacked layout with a small heading size." src="mdn-rwd-font-mobile.png"> <p>Sur le bureau cependant, nous voyons la plus grande taille de titre :</p> -<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A two column layout with a large heading." src="mdn-rwd-font-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> </div> <p>Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.</p> @@ -258,7 +246,7 @@ h1 { <p>Une approche intéressante consiste à utiliser l'unité viewport <code>vw</code> pour permettre une typographie réactive. <code>1vw</code> est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de <code>vw</code>, elle sera toujours liée à la taille de la fenêtre.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -266,21 +254,21 @@ h1 { <p>Il existe une solution, et elle consiste à utiliser <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>. Si vous ajoutez l'unité <code>vw</code> à un ensemble de valeurs utilisant une taille fixe telle que <code>em</code>s ou <code>rem</code>s, le texte sera toujours zoomable. En fait, l'unité <code>vw</code> s'ajoute à cette valeur zoomée :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> <p>Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.</p> -<div class="blockIndicator note"> -<p>Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> </div> <h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2> <p>Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <code><head></code> du document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.</p> @@ -305,8 +293,8 @@ h1 { <p>Vous devriez éviter d'utiliser <code>minimum-scale</code>, <code>maximum-scale</code>, et en particulier la définition de <code>user-scalable</code> sur <code>no</code>. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> +<div class="note"> +<p><strong>Note :</strong> Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> </div> <h2 id="Sommaire">Sommaire</h2> diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html index b7eea3d877..1aeb151ae9 100644 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> -<p class="summary">Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> +<p>Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/css/first_steps/getting_started/index.html b/files/fr/learn/css/first_steps/getting_started/index.html index 999acf147b..9bbccc2107 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.html +++ b/files/fr/learn/css/first_steps/getting_started/index.html @@ -15,9 +15,9 @@ translation_of: Learn/CSS/First_steps/Getting_started <div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> -<p class="summary">Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> +<p>Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -34,7 +34,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom <code>index.html</code>.</p> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> @@ -61,8 +61,8 @@ translation_of: Learn/CSS/First_steps/Getting_started </html> </pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.</p> +<div class="note"> +<p><strong>Note :</strong> Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.</p> </div> <h2 id="Ajouter_CSS_à_notre_document">Ajouter CSS à notre document</h2> @@ -73,11 +73,11 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Pour lier <code>styles.css</code> à <code>index.html</code> ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :</p> -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> +<pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> <p>Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut <code>rel</code> ; la valeur de l'attribut <code>href</code> donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans <code>styles.css</code>. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: red; }</pre> @@ -91,13 +91,13 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur <code>p</code>. Voilà la règle pour passer en vert tous les paragraphes :</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: green; }</pre> <p>On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :</p> -<pre class="brush: css notranslate">p, li { +<pre class="brush: css">p, li { color: green; }</pre> @@ -111,7 +111,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme. Un bon exemple est notre <code><ul></code>, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :</p> -<pre class="brush: css notranslate">li { +<pre class="brush: css">li { list-style-type: none; }</pre> @@ -127,7 +127,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Dans le document HTML, ajouter un <a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut class</a> au deuxième item de la liste :</p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Item un</li> <li <strong>class="special"</strong>>Item deux</li> <li>Item <em>trois</em></li> @@ -135,7 +135,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Dans votre CSS vous pouvez maintenant cibler la classe <code>special</code> grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: orange; font-weight: bold; }</pre> @@ -146,14 +146,14 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe :</p> -<pre class="brush: css notranslate">li.special { +<pre class="brush: css">li.special { color: orange; font-weight: bold; }</pre> <p>Cette syntaxe signifie "s'applique à tous les éléments <code>li</code> dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>". Cette règle ne s'applique alors plus à l'élément <code><span></code> ou à tout autre élément dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>mais<em> </em>qui n'est pas un <code><li>.</code> Pour que la règle s'applique aussi au <code><span></code> il faudrait l'ajouter dans la liste des sélecteurs :</p> -<pre class="brush: css notranslate">li.special, +<pre class="brush: css">li.special, span.special { color: orange; font-weight: bold; @@ -167,7 +167,7 @@ span.special { <p>Ajoutez la règle suivante à votre feuille de style :</p> -<pre class="brush: css notranslate">li em { +<pre class="brush: css">li em { color: rebeccapurple; }</pre> @@ -177,7 +177,7 @@ span.special { <p>Ajoutez cette règle à votre feuille de style :</p> -<pre class="brush: css notranslate">h1 + p { +<pre class="brush: css">h1 + p { font-size: 200%; }</pre> @@ -185,15 +185,15 @@ span.special { <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a> du cours suivant.</p> +<div class="note"> +<p><strong>Note :</strong> A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a> du cours suivant.</p> </div> <h2 id="Mise_en_forme_basée_sur_létat">Mise en forme basée sur l'état</h2> -<p>Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (<code>visited</code>), est survolé par le curseur (<code>hover</code>), a le focus clavier (<code>focus</code>), ou si l'utilisateur est en train de cliquer sur ce lien (<code>active</code>). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.</p> +<p>Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <code><a href="/fr/docs/Web/HTML/Element/a"><a></a></code> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (<code>visited</code>), est survolé par le curseur (<code>hover</code>), a le focus clavier (<code>focus</code>), ou si l'utilisateur est en train de cliquer sur ce lien (<code>active</code>). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.</p> -<pre class="brush: css notranslate">a:link { +<pre class="brush: css">a:link { color: pink; } @@ -203,7 +203,7 @@ a:visited { <p>On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :</p> -<pre class="brush: css notranslate">a:hover { +<pre class="brush: css">a:hover { text-decoration: none; }</pre> @@ -213,8 +213,8 @@ a:visited { <p>Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> : les règles pour que nos pages soient compréhensibles et utilisables par tous.</p> +<div class="note"> +<p><strong>Note :</strong> dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> : les règles pour que nos pages soient compréhensibles et utilisables par tous.</p> <p>Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.</p> @@ -225,7 +225,7 @@ a:visited { <p>On peut associer sélecteurs et combinateurs. Par exemple :</p> -<pre class="brush: css notranslate">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ +<pre class="brush: css">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ article p span { ... } /* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1> */ @@ -233,7 +233,7 @@ h1 + ul + p { ... }</pre> <p>On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :</p> -<pre class="brush: css notranslate">body h1 + p .special { +<pre class="brush: css">body h1 + p .special { color: yellow; background-color: black; padding: 5px; diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/learn/css/first_steps/how_css_is_structured/index.html index a5dca8a25a..057da54fc4 100644 --- a/files/fr/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.html @@ -9,7 +9,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured <p>Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -244,18 +244,19 @@ p { </ul> <div class="warning"> -<p><strong>Important :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p> +<p><strong>Attention :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p> </div> <div class="warning"> -<p><strong>Important :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p> +<p><strong>Attention :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p> </div> <h3 id="functions">Fonctions</h3> <p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p> -<div id="calc_example"> +<h4 id="Exemple_calc">Exemple calc</h4> + <pre class="brush: html"><div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div></pre> <pre class="brush: css">.outer { @@ -268,17 +269,17 @@ p { background-color: rebeccapurple; color: white; }</pre> -</div> <p>La page devrait s'afficher comme ceci :</p> -<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('Exemple_calc', '100%', 200)}}</p> <p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p> <p>Un autre exemple serait les différentes valeurs de la propriété <a href="/fr/docs/Web/CSS/<transform>"><code><transform></code></a>, telles que <code>rotate()</code>.</p> -<div id="transform_example"> +<h4 id="Exemple_transform">Exemple transform</h4> + <pre class="brush: html"><div class="box"></div></pre> <pre class="brush: css">.box { @@ -288,11 +289,10 @@ p { background-color: rebeccapurple; transform: rotate(0.8turn) }</pre> -</div> <p>La page devrait s'afficher comme ceci :</p> -<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('Exemple_transform', '100%', 200)}}</p> <p><strong>Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML : </strong></p> diff --git a/files/fr/learn/css/first_steps/how_css_works/index.html b/files/fr/learn/css/first_steps/how_css_works/index.html index 35f603c50d..0a578ae2a0 100644 --- a/files/fr/learn/css/first_steps/how_css_works/index.html +++ b/files/fr/learn/css/first_steps/how_css_works/index.html @@ -1,23 +1,18 @@ --- -title: 'CSS, comment ça marche ?' +title: CSS, comment ça marche ? slug: Learn/CSS/First_steps/How_CSS_works -tags: - - Apprendre - - CSS - - DOM - - Débutant translation_of: Learn/CSS/First_steps/How_CSS_works --- <p>{{LearnSidebar}}<br> {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> -<p class="summary">Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.</p> +<p>Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.)</td> + <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>.)</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -41,7 +36,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Le diagramme suivant propose une vue synthétique de ce traitement.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> +<p><img alt="" src="rendering.svg"></p> <h2 id="À_propos_du_DOM">À propos du DOM</h2> @@ -79,11 +74,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit :</p> -<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> +<p>{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}</p> -<div class="hidden"> -<pre class="brush: css">p {margin:0;}</pre> -</div> +<pre class="brush: css hidden">p {margin:0;}</pre> <h2 id="Appliquer_CSS_au_DOM">Appliquer CSS au DOM</h2> @@ -103,17 +96,17 @@ translation_of: Learn/CSS/First_steps/How_CSS_works background-color: lime; }</pre> -<p>Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur <code>span</code>, ça va être rapide à trier ! La règle est attachée à chaque nœud <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">SPAN</span></font> du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à <em>peindre</em> la représentation visuelle finale à l'écran.</p> +<p>Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur <code>span</code>, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à <em>peindre</em> la représentation visuelle finale à l'écran.</p> <p>Voilà le résultat après mise à jour :</p> -<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p> +<p>{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}</p> -<p>Dans le prochain module, dans l'article <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a>, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.</p> +<p>Dans le prochain module, dans l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a>, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.</p> <h2 id="Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas">Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ?</h2> -<p>Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait <a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS#Prise_en_charge_par_les_navigateurs">dans une leçon précédente</a>. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.</p> +<p>Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait <a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs">dans une leçon précédente</a>. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.</p> <p>La réponse : ne rien faire et passer à la suite !</p> @@ -123,7 +116,6 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise <code>colour</code> pour le mot <em>couleur.</em> Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée.</p> -<div id="Skipping_example"> <pre class="brush: html"><p> Je veux que ce texte soit grand, gras et bleu.</p></pre> <pre class="brush: css">p { @@ -131,19 +123,13 @@ translation_of: Learn/CSS/First_steps/How_CSS_works colour: blue; /* incorrect spelling of the color property */ font-size: 200%; }</pre> -</div> -<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}</p> <p>Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la <em>cascade</em> : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.</p> <p>Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter <code>calc()</code> pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de <code>width</code> est calculée par <code>calc(</code><code>)</code>. Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec <code>calc()</code> qui, par cascade, écrase la déclaration précédente.</p> -<pre class="brush: css">.box { - width: 500px; - width: calc(100% - 50px); -}</pre> - <p>Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.</p> <h2 id="Et_enfin">Et enfin</h2> diff --git a/files/fr/learn/css/first_steps/index.html b/files/fr/learn/css/first_steps/index.html index 91a9d56dbf..2b0e0238ec 100644 --- a/files/fr/learn/css/first_steps/index.html +++ b/files/fr/learn/css/first_steps/index.html @@ -11,18 +11,12 @@ translation_of: Learn/CSS/First_steps --- <div>{{LearnSidebar}}</div> -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="fr"><span title="">CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs.</span> <span title="">Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.</span></span></div> -</div> +<p>CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.</p> -<div class="callout"> <h3 id="Vous_voulez_devenir_un_développeur_web_front-end">Vous voulez devenir un développeur web front-end ?</h3> <p>Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Commencer</a></p> -</div> - <h2 id="Prérequis">Prérequis</h2> <p>Avant de commencer ce module, vous devriez avoir :</p> @@ -34,7 +28,7 @@ translation_of: Learn/CSS/First_steps </ol> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme <a href="/fr/docs/">JSBin</a> ou <a href="/fr/docs/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme <a href="/fr/docs/">JSBin</a> ou <a href="/fr/docs/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> @@ -43,7 +37,7 @@ translation_of: Learn/CSS/First_steps <dl> <dt><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que le CSS?</a></dt> - <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.</dd> + <dd><p><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.</p></dd> <dt><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></dt> <dd>Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.</dd> <dt><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment est structuré le CSS </a></dt> @@ -52,12 +46,11 @@ translation_of: Learn/CSS/First_steps <dd>Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.</dd> <dt><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Utilisez vos nouvelles compétences</a></dt> <dd>Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.</dd> - <dd></dd> </dl> <h2 id="Voir_aussi">Voir aussi</h2> <dl> <dt>Literacy<a href="/fr/docs/"> Web intermédiaire 1 : Introduction au CSS</a></dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module <em>Introduction à CSS</em>.</span> Approfondissements à propos de<span title=""> l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P</span></span></dd> + <dd>Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module <em>Introduction à CSS</em>. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P</dd> </dl> diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html index c49978ebb6..87b94d05bf 100644 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html @@ -10,9 +10,9 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge --- <p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> -<p class="summary">Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. </p> +<p>Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. </p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -29,8 +29,8 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <p>Vous pouvez travailler dans l'éditeur ci-dessous ou <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">télécharger le point de départ</a> pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section <code><head></code>. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ou <a href="https://glitch.com/" rel="noopener">Glitch</a> pour travailler sur les tâches proposées.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: ne restez pas coincé, appelez à l'aide — voir la section <a href="#evaluation">Evaluation et comment obtenir de l'aide</a> au bas de cette page.</p> +<div class="note"> +<p><strong>Note :</strong> ne restez pas coincé, appelez à l'aide — voir la section <a href="#evaluation">Evaluation et comment obtenir de l'aide</a> au bas de cette page.</p> </div> <h2 id="Travailler_avec_CSS">Travailler avec CSS</h2> @@ -60,7 +60,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <p>Vous devriez obtenir un rendu qui ressemble à cela :</p> -<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> +<p><img alt="Screenshot of how the example should look after completing the assessment." src="learn-css-basics-assessment.png"></p> <p>Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la <a href="/fr/docs/Web/CSS/Reference">référence CSS sur MDN</a> !</p> @@ -68,7 +68,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> -<h2 id="Evaluation_ou_compléments_dinformation"><a id="evaluation" name="evaluation">Evaluation ou compléments d'information</a></h2> +<h2 id="Evaluation_ou_compléments_dinformation">Evaluation ou compléments d'information</h2> <p>Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :</p> diff --git a/files/fr/learn/css/first_steps/what_is_css/index.html b/files/fr/learn/css/first_steps/what_is_css/index.html index 7389147591..bfdeb9fa33 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.html +++ b/files/fr/learn/css/first_steps/what_is_css/index.html @@ -15,9 +15,9 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> -<p class="summary"><strong>{{Glossary("CSS")}}</strong> (<em>Cascading Style Sheets</em>) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.</p> +<p><strong>{{Glossary("CSS")}}</strong> (<em>Cascading Style Sheets</em>) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -32,7 +32,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p>Dans le cours <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.</p> -<p><img alt="La mise en forme par défaut appliquée par un navigateur." src="https://mdn.mozillademos.org/files/17059/basic_styling_fr.png" style="border: 1px solid #cccccc; height: 232px; width: 953px;"></p> +<p><img alt="La mise en forme par défaut appliquée par un navigateur." src="basic_styling_fr.png"></p> <p>Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.</p> @@ -48,8 +48,8 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p><strong>"Présenter</strong> un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.</p> +<div class="note"> +<p><strong>Note :</strong> Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.</p> </div> <p>CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer <a href="/fr/docs/Web/CSS/Type_color">la couleur</a> et <a href="/fr/docs/Web/CSS/font-size">la taille</a> des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">un texte affiché sur une colonne</a> en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des <a href="/fr/docs/Web/CSS/Animations_CSS">animations</a>. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.</p> @@ -62,7 +62,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p>Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: red; font-size: 5em; }</pre> @@ -73,7 +73,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p>Une feuille de style CSS est constituée d'une succession de telles règles :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: red; font-size: 5em; } @@ -84,8 +84,8 @@ p { <p>On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Sur MDN, dans <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a>, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn <em>nom-de-propriété-ou-fonctionnalité-css</em>" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !</p> +<div class="note"> +<p><strong>Note :</strong> Sur MDN, dans <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a>, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn <em>nom-de-propriété-ou-fonctionnalité-css</em>" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !</p> </div> <h2 id="Modules_CSS">Modules CSS</h2> diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html index dd242c62a3..31db5f3ac9 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.html +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.html @@ -1,16 +1,12 @@ --- title: Créer de belles boîtes slug: Learn/CSS/Howto/create_fancy_boxes -tags: - - Apprendre - - CSS - - Débutant translation_of: Learn/CSS/Howto/create_fancy_boxes original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes --- -<p class="summary">Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> +<p>Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> -<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition en CSS</a>.</p> +<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition en CSS</a>.</p> <p>D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (<code>border-*</code>) et d'arrière-plan (<code>background-*</code>) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.</p> @@ -35,9 +31,7 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h3 id="Créer_des_cercles">Créer des cercles</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?</p> @@ -75,18 +69,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h2 id="Les_arrière-plans">Les arrière-plans</h2> -<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> +<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> <p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p> <ul> - <li>On peut définir <a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> + <li>On peut définir <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> <li>Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.</li> </ul> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Passons à la manipulation :</p> @@ -123,18 +115,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p> <div class="note"> -<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="http://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">notre article dédié</a>.</p> +<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="https://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">notre article dédié</a>.</p> </div> <h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> -<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/en-US/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> +<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> <h3 id="Un_nuage">Un nuage</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p> @@ -275,13 +265,11 @@ blockquote i { <p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p> -<h2 id="L'assemblage">L'assemblage</h2> +<h2 id="Assemblage">Assemblage</h2> <p>En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :</p> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.</p> @@ -308,8 +296,8 @@ blockquote i { transform: rotate(4deg); }</pre> -<p>{{EmbedLiveSample("L'assemblage", '100%', '100')}}</p> +<p>{{EmbedLiveSample("Assemblage", '100%', '100')}}</p> <h2 id="La_suite">La suite</h2> -<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition</a>.</p> +<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition</a>.</p> diff --git a/files/fr/learn/css/howto/generated_content/index.html b/files/fr/learn/css/howto/generated_content/index.html index cd56e36305..aa8656013b 100644 --- a/files/fr/learn/css/howto/generated_content/index.html +++ b/files/fr/learn/css/howto/generated_content/index.html @@ -7,154 +7,61 @@ tags: translation_of: Learn/CSS/Howto/Generated_content original_slug: Apprendre/CSS/Comment/Generated_content --- -<p> </p> -<p>Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.</p> -<p>Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.</p> -<h3 id="Information_:_contenu" name="Information_:_contenu">Information : contenu</h3> -<p>Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document</p> -<p>Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. - <p>Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.</p> - <p>Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Contenu_textuel" name="Contenu_textuel">Contenu textuel</h4> -<p>CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez <code>:before</code> ou <code>:after</code> au sélecteur. Dans la déclaration, spécifiez la propriété <code>content</code> en lui donnant comme valeur le contenu textuel.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle ajoute le texte <span style="font-weight: bold; color: navy;">Référence :</span> devant chaque élément de la classe <code>ref</code> : - <div style="width: 30em;"> - <pre class="eval"> -.ref:before { +<p>{{LearnSidebar}}</p> + +<p>Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.</p> + +<p>L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.</p> + +<div class="note"> +<p><strong>Note :</strong> Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.</p> +</div> + +<p>Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.</p> + +<p>Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Contenu_textuel">Contenu textuel</h3> + +<p>CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html">Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.ref::before { font-weight: bold; color: navy; - content: "Référence : "; - } -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> dans la spécification CSS. - <p>Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a>, ainsi que <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Contenu_sous_forme_d.27images" name="Contenu_sous_forme_d.27images">Contenu sous forme d'images</h4> -<p>Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété <code>content</code>.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe <code>glossaire</code>: - <div style="width: 45em;"> - <pre class="eval"> -a.glossaire:after {content: " " url("../images/glossary-icon.gif");} -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<p><br> - Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété <code>background</code>. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. - <p>Le sélecteur spécifie l'id de l'élément. La valeur <code>no-repeat</code> fait que l'image apparaîtra une seule fois :</p> - <div style="width: 50em;"> - <pre class="eval"> -#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;} -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> dans la spécification CSS.</td> - </tr> - </tbody> -</table> -<h3 id="Action_:_ajout_d.27une_image_de_fond" name="Action_:_ajout_d.27une_image_de_fond">Action : ajout d'une image de fond</h3> -<p>Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :</p> -<table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td> - </tr> - </tbody> -</table> -<p>(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)</p> -<p>Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.</p> -<div style="width: 40em;"> - <pre class="eval">background: url("ligne-bleue.png"); -</pre> -</div> -<p>La valeur <code>repeat</code> est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :</p> -<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em;"> - <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p> - </div> - <div style="font-style: normal; padding-top: 2px; height: 8em;"> - <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p> - </div> - </div> -</div> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Téléchargez cette image : - <table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"></td> - </tr> - </tbody> - </table> - <p>Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :</p> - <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em; padding-top: 8px;"> - <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div> - <div style="font-style: normal; padding-top: 12px; height: 8em;"> - <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div> - </div> - </div> - </td> - </tr> - </tbody> -</table> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.</p> -<p>La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : <strong><a href="/fr/docs/CSS/Premiers_pas/Listes" title="fr/CSS/Premiers_pas/Listes">Listes.</a></strong></p> + content: "Réference "; +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}</p> + +<p>L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q23">4.4 Représentation de la feuille de style CSS</a> dans la spécification CSS.</p> + +<p>Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q24">Référencer des caractères non représentés par l'encodage</a> et <a href="https://www.w3.org/TR/CSS21/syndata.html#q6">Caractères et casse</a> dans la spécification CSS.</p> + +<h3 id="Contenu_avec_une_image">Contenu_avec_une_image</h3> + +<p>Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.</p> + +<p>Cette règle ajoute un espace et une icône après chaque lien qui possède la classe <code>glossary</code> :</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">a.glossary::after { + content: " " url("glossary-icon.gif"); +}</pre> + +<p>{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}</p> diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html index aabbb12aa7..d14cb33a16 100644 --- a/files/fr/learn/css/howto/index.html +++ b/files/fr/learn/css/howto/index.html @@ -8,57 +8,50 @@ tags: translation_of: Learn/CSS/Howto original_slug: Apprendre/CSS/Comment --- -<p> </p> - -<p class="summary">Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> +<p>Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> <h2 id="Scénarios_fréquents">Scénarios fréquents</h2> -<div class="column-container"> -<div class="column-half"> -<h3 id="Basess">Basess</h3> +<h3 id="Basess">Bases</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> </ul> <h3 id="CSS_et_texte">CSS et texte</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> </ul> -</div> -<div class="column-half"> + <h3 id="Boîtes_et_mises_en_page">Boîtes et mises en page</h3> <ul> - <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> + <li><a href="/fr/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> + <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> + <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> </ul> -</div> -</div> <h2 id="Techniques_avancées_ou_peu_communes">Techniques avancées ou peu communes</h2> @@ -67,15 +60,15 @@ original_slug: Apprendre/CSS/Comment <h3 id="Général">Général</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> </ul> <h3 id="Effets_avancés">Effets avancés</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> </ul> <h3 id="Mise_en_page">Mise en page</h3> @@ -83,9 +76,9 @@ original_slug: Apprendre/CSS/Comment <ul> <li><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes">Utiliser les boîtes flexibles CSS (<em>flexbox</em>)</a></li> <li><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Utiliser une structure CSS avec plusieurs colonnes</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> + <li><a href="/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> +<p><a href="/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> diff --git a/files/fr/learn/css/index.html b/files/fr/learn/css/index.html index 7af85e54ec..0d3547603f 100644 --- a/files/fr/learn/css/index.html +++ b/files/fr/learn/css/index.html @@ -31,7 +31,7 @@ original_slug: Apprendre/CSS <li>du <a href="/fr/docs/Learn/JavaScript">JavaScript</a> et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web.</li> </ul> -<p id="sect1">Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.</p> +<p>Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.</p> <p>Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a> et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.</p> diff --git a/files/fr/learn/css/styling_text/fundamentals/index.html b/files/fr/learn/css/styling_text/fundamentals/index.html index c43c2fdd55..1aa02da170 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.html +++ b/files/fr/learn/css/styling_text/fundamentals/index.html @@ -16,13 +16,13 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte <div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.</p> +<p>Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> + <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -36,7 +36,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte <p>Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.</p> <div class="note"> -<p><strong>Note</strong> : si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Modèle de boîte</a> avant de poursuivre.</p> +<p><strong>Note :</strong> si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Modèle de boîte</a> avant de poursuivre.</p> </div> <p>Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :</p> @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte </ul> <div class="note"> -<p><strong>Note </strong>: Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme <a href="https://developer.mozilla.org/fr/docs/Web/CSS/::first-letter">::first-letter</a> (sélectionne la première lettre du texte d'un élément), <a href="https://developer.mozilla.org/fr/docs/Web/CSS/::first-line">::first-line</a> (sélectionne la première ligne du texte d'un élément) ou <a href="https://developer.mozilla.org/fr/docs/Web/CSS/::selection">::selection</a> (sélectionne le texte actuellement mis en surbrillance par le curseur) .</p> +<p><strong>Note :</strong> Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme <a href="/fr/docs/Web/CSS/::first-letter">::first-letter</a> (sélectionne la première lettre du texte d'un élément), <a href="/fr/docs/Web/CSS/::first-line">::first-line</a> (sélectionne la première ligne du texte d'un élément) ou <a href="/fr/docs/Web/CSS/::selection">::selection</a> (sélectionne le texte actuellement mis en surbrillance par le curseur) .</p> </div> <h2 id="Fontes">Fontes</h2> @@ -67,7 +67,7 @@ avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> <div class="note"> -<p>(NdT : Extrait et traduction <em>approximative</em> de la chanson <em>Tommy the Cat</em> du groupe <a href="https://fr.wikipedia.org/wiki/Primus_(groupe)">Primus)</a></p> +<p><strong>Note :</strong> (NdT : Extrait et traduction <em>approximative</em> de la chanson <em>Tommy the Cat</em> du groupe <a href="https://fr.wikipedia.org/wiki/Primus_(groupe)">Primus)</a></p> </div> <p>Vous pouvez trouver l'<a href="https://mdn.github.io/learning-area/css/styling-text/fundamentals/">exemple (en) fini</a> sur Github (voir aussi <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">le code source</a>).</p> @@ -76,7 +76,7 @@ occasions, comme maintenant.</p></pre> <p>La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.</p> -<p><code>color</code> accepte toutes les <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">unités de couleur des CSS</a>, par exemple :</p> +<p><code>color</code> accepte toutes les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">unités de couleur des CSS</a>, par exemple :</p> <pre class="brush: css">p { color: red; @@ -84,8 +84,7 @@ occasions, comme maintenant.</p></pre> <p>Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -96,7 +95,6 @@ brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -</div> <p>{{ EmbedLiveSample('Couleur', '100%', 220) }}</p> @@ -122,7 +120,7 @@ occasions, comme maintenant.</p></pre> <thead> <tr> <th scope="col">Nom</th> - <th scope="col" style="white-space: nowrap;">Type générique</th> + <th scope="col">Type générique</th> <th scope="col">Notes</th> </tr> </thead> @@ -138,12 +136,12 @@ occasions, comme maintenant.</p></pre> <td>Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police <em>Courier New</em> appelée <em>Courier</em>. Il est recommandé d'utiliser les deux avec <em>Courier New</em> comme alternative préférée.</td> </tr> <tr> - <td style="white-space: nowrap;">Georgia</td> + <td>Georgia</td> <td>serif</td> <td> </td> </tr> <tr> - <td style="white-space: nowrap;">Times New Roman</td> + <td>Times New Roman</td> <td>serif</td> <td>Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police <em>Times New Roman</em> appelée <em>Times</em>. Il est recommandé d'utiliser les deux avec <em>Times New Roman</em> comme alternative préférée.</td> </tr> @@ -161,11 +159,11 @@ occasions, comme maintenant.</p></pre> </table> <div class="note"> -<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Le site <a href="https://www.cssfontstack.com/">cssfontstack.com</a> met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.</span></span></p> +<p><strong>Note :</strong> Le site <a href="https://www.cssfontstack.com/">cssfontstack.com</a> met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.</p> </div> <div class="note"> -<p><strong>Note </strong>: Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : <strong>les polices web</strong>. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.</p> +<p><strong>Note :</strong> Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : <strong>les polices web</strong>. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.</p> </div> <h4 id="Polices_par_défaut">Polices par défaut</h4> @@ -186,27 +184,27 @@ occasions, comme maintenant.</p></pre> <tr> <td><code>serif</code></td> <td>Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)</td> - <td><span style="font-family: serif;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>sans-serif</code></td> <td>Les polices qui n'ont pas d'empattements</td> - <td><span style="font-family: sans-serif;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>monospace</code></td> <td>Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.</td> - <td><span style="font-family: monospace;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>cursive</code></td> <td>Les polices destinées à émuler l'écriture, avec des traits fluides et connectés.</td> - <td><span style="font-family: cursive;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>fantasy</code></td> <td>Les polices destinées à être décoratives.</td> - <td><span style="font-family: fantasy;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> </tbody> </table> @@ -219,12 +217,12 @@ occasions, comme maintenant.</p></pre> font-family: "Trebuchet MS", Verdana, sans-serif; }</pre> -<p>Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. <span>Si c'est le cas, il applique cette police aux éléments sélectionnés.</span> <span>Sinon, il passe à la police suivante et ainsi de suite.</span></p> +<p>Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.</p> <p>Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !</p> <div class="note"> -<p><strong>Note </strong>: Les noms de police comportant plus d'un mot — comme <code>Trebuchet MS</code> — doivent être entourés de guillemets, par exemple <code>"Trebuchet MS"</code>.</p> +<p><strong>Note :</strong> Les noms de police comportant plus d'un mot — comme <code>Trebuchet MS</code> — doivent être entourés de guillemets, par exemple <code>"Trebuchet MS"</code>.</p> </div> <h4 id="Un_exemple_de_font-family">Un exemple de font-family</h4> @@ -238,8 +236,7 @@ occasions, comme maintenant.</p></pre> <p>Cela donne le résultat suivant :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -250,18 +247,17 @@ brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -</div> <p>{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}</p> <h3 id="Taille_de_la_police_de_caractères">Taille de la police de caractères</h3> -<p>Dans l'article <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units">Valeurs et unités CSS</a> de notre prédédent module, nous avons vu les <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille">unités de longueur et taille</a>. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages">pourcentages</a>). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :</p> +<p>Dans l'article <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units">Valeurs et unités CSS</a> de notre prédédent module, nous avons vu les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille">unités de longueur et taille</a>. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages">pourcentages</a>). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :</p> <ul> <li><code>px</code> (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation.</li> <li><code>em</code> : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser <code>em</code> pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des <code>em</code>, la maintenance en sera facilitée.</li> - <li><code>rem</code> : il fonctionne comme <code>em</code>, excepté que un <code>rem</code> est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les <code>rem</code> ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux <code>em</code> ou aux <code>px</code>, soit utiliser une <span class="st">prothèse d'émulation</span> ({{glossary ("polyfill")}}) telle que <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> + <li><code>rem</code> : il fonctionne comme <code>em</code>, excepté que un <code>rem</code> est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les <code>rem</code> ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux <code>em</code> ou aux <code>px</code>, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> </ul> <p>La propriété <code>font-size</code> d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété <code>font‑size</code> est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 <code>em</code> définie par défaut, donc aura une taille finale de 32 px.</p> @@ -281,8 +277,7 @@ occasions, comme maintenant.</p></pre> <p>Notre nouveau résultat ressemble à :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -293,7 +288,6 @@ brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -</div> <pre class="brush: css">html { font-size: 10px; @@ -325,7 +319,7 @@ p { </li> <li>{{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), mais en réalité, vous les utiliserez rarement en dehors de <code>normal</code> et <code>bold</code> (gras): <ul> - <li><code>normal</code>, <code>bold</code> : graisse de la police, normale ou <strong style="font-weight: bold;">bold</strong>.</li> + <li><code>normal</code>, <code>bold</code> : graisse de la police, normale ou <strong>bold</strong>.</li> <li><code>lighter</code>, <code>bolder</code> : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.</li> <li><code>100–900</code> : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.</li> </ul> @@ -333,28 +327,27 @@ p { <li>{{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : <ul> <li><code>none</code> : aucune transformation.</li> - <li><code>uppercase</code> : met <span style="text-transform: uppercase;">tout le texte en majuscules</span>.</li> + <li><code>uppercase</code> : met tout le texte en majuscules.</li> <li><code>lowercase</code> : met tout le texte en minuscules.</li> - <li><code>capitalize</code> : transforme tous les mots en mettant leur <span style="text-transform: capitalize;">première lettre en majuscule</span>s.</li> + <li><code>capitalize</code> : transforme tous les mots en mettant leur première lettre en majuscules.</li> <li><code>full-width</code> : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)</li> </ul> </li> <li>{{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont : <ul> <li><code>none</code>: désactive les décorations du texte déjà présentes.</li> - <li><code>underline</code>: <u>souligne le texte</u>.</li> - <li><code>overline</code>: <span style="text-decoration: overline;">trace une ligne au-dessus du texte</span>.</li> - <li><code>line-through</code>: <s style="text-decoration: line-through;">barre le texte</s>.</li> + <li><code>underline</code>: souligne le texte.</li> + <li><code>overline</code>: trace une ligne au-dessus du texte.</li> + <li><code>line-through</code>: barre le texte.</li> </ul> - Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> + Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple <code>text-decoration: underline overline</code>. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple <code>text-decoration: line-through red wavy</code>.</li> </ul> <p>Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.</p> <p>Notre nouveau résultat ressemble à :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -367,7 +360,7 @@ avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> </div> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -397,29 +390,28 @@ p { <p>Les 4 propriétés sont les suivantes :</p> <ol> - <li>Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.</li> + <li>Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.</li> <li>Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.</li> - <li>Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS.</li> - <li>La couleur de l'ombre, qui peut prendre toute <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">unité de couleur CSS</a>. Si elle n'est pas définie, c'est la couleur noire par défaut.</li> + <li>Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS.</li> + <li>La couleur de l'ombre, qui peut prendre toute <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">unité de couleur CSS</a>. Si elle n'est pas définie, c'est la couleur noire par défaut.</li> </ol> <div class="note"> -<p><strong>Note</strong> : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple <code>-1px -1px</code>.</p> +<p><strong>Note :</strong> Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple <code>-1px -1px</code>.</p> </div> <h4 id="Ombres_multiples">Ombres multiples</h4> <p>Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :</p> -<pre class="brush: css language-css"><code class="language-css">text-shadow: -1px -1px 1px #aaa, +<pre class="brush: css">text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0,0,0,0.5), 4px 4px 5px rgba(0,0,0,0.7), - 0px 0px 7px rgba(0,0,0,0.4);</code></pre> + 0px 0px 7px rgba(0,0,0,0.4);</pre> <p>Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -431,7 +423,7 @@ Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -<pre class="brush: css line-numbers language-css"><code class="language-css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -453,35 +445,32 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; } -</code> </pre> -</div> <p>{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez voir plus d'exemples intéressants de <code>text-shadow</code> dans l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> (Clair de lune avec text-shadow).</p> +<p><strong>Note :</strong> Vous pouvez voir plus d'exemples intéressants de <code>text-shadow</code> dans l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> (Clair de lune avec text-shadow).</p> </div> -<h2 id="Mise_en_page_du_texte"><small lang="en">Mise en page du texte</small></h2> +<h2 id="Mise_en_page_du_texte">Mise en page du texte</h2> -<p><span id="result_box" lang="fr"><span>Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.</span></span></p> +<p>Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.</p> <h3 id="Alignement_du_texte">Alignement du texte</h3> -<p>La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles <span id="result_box" lang="fr"><span>fonctionnent à peu près de la même manière que dans un traitement de texte</span></span> :</p> +<p>La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :</p> <ul> <li><code>left</code>: le texte est aligné à gauche.</li> <li><code>right</code>: le texte est aligné à droite.</li> <li><code>center</code>: le texte est centré.</li> - <li><code>justify</code>: <span id="result_box" lang="fr"><span>étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte.</span> <span>Vous devez l'utiliser avec discernement </span></span> — <span lang="fr"><span> il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots.</span> <span>Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.</span></span></li> + <li><code>justify</code>: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.</li> </ul> <p>Si nous appliquons <code>text-align: center;</code> à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -516,7 +505,6 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> -</div> <p>{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}</p> @@ -528,8 +516,7 @@ p { <p>En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -541,7 +528,7 @@ Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -564,13 +551,12 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> -</div> <p>{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}</p> <h3 id="Espacement_entre_les_lettres_et_les_mots">Espacement entre les lettres et les mots</h3> -<p>Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a>.</p> +<p>Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a>.</p> <p>Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :</p> @@ -581,8 +567,7 @@ p { <p>Nous obtiendrons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -594,7 +579,7 @@ Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -623,7 +608,6 @@ p { font-family: Helvetica, Arial, sans-serif; line-height: 1.5; }</pre> -</div> <p>{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}</p> @@ -683,10 +667,7 @@ p { <p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> avec le bouton de même nom.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie du HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>Un peu de texte pour vous délecter !</p></textarea> @@ -704,7 +685,7 @@ p { </div> </pre> -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -730,9 +711,8 @@ htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }}</p> <h2 id="Résumé">Résumé</h2> @@ -742,16 +722,10 @@ window.addEventListener("load", drawOutput); <h2 id="Dans_ce_module">Dans ce module</h2> -<p> </p> - <ul> <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école communale</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> </ul> - -<p> </p> - -<p> </p> diff --git a/files/fr/learn/css/styling_text/index.html b/files/fr/learn/css/styling_text/index.html index 57d52b0b06..18838ad893 100644 --- a/files/fr/learn/css/styling_text/index.html +++ b/files/fr/learn/css/styling_text/index.html @@ -13,16 +13,14 @@ tags: - Texte translation_of: Learn/CSS/Styling_text --- -<div> </div> - -<p class="summary"><span id="result_box" lang="fr"><span>Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS.</span></span><span lang="fr"> Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. <span>Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.</span></span></p> +<p>Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.</p> <h2 id="Prérequis">Prérequis</h2> -<p>Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>, et être à l'aise avec les fondamentaux de CSS étudiés dans <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>.</p> +<p>Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>, et être à l'aise avec les fondamentaux de CSS étudiés dans <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, <span id="result_box" lang="fr"><span>vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que</span></span> <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> @@ -30,14 +28,14 @@ translation_of: Learn/CSS/Styling_text <p>Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></dt> - <dd><span id="result_box" lang="fr"><span>Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.</span></span></dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de liste</a></dt> - <dd><span id="result_box" lang="fr"><span>Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte.</span> <span>Cet article explique tout.</span></span></dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links">Style de lien</a></dt> - <dd><span id="result_box" lang="fr"><span>Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets.</span> <span>Nous examinerons tous ces sujets dans cet article.</span></span></dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></dt> - <dd><span id="result_box" lang="fr"><span>Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.</span></span></dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></dt> + <dd>Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.</dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de liste</a></dt> + <dd>Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout.</dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Styling_links">Style de lien</a></dt> + <dd>Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article.</dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></dt> + <dd>Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.</dd> </dl> <h2 id="Auto-évaluation">Auto-évaluation</h2> @@ -45,6 +43,6 @@ translation_of: Learn/CSS/Styling_text <p>Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></dt> - <dd>Dans cette auto-évaluation, nous testerons votre compréhension du style de texte <span id="result_box" lang="fr"><span>en vous amenant à créer le style du texte de la page d'accueil d'une école communale.</span></span></dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></dt> + <dd>Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale.</dd> </dl> diff --git a/files/fr/learn/css/styling_text/styling_links/index.html b/files/fr/learn/css/styling_text/styling_links/index.html index 27276fac47..7e88a2f941 100644 --- a/files/fr/learn/css/styling_text/styling_links/index.html +++ b/files/fr/learn/css/styling_text/styling_links/index.html @@ -21,9 +21,9 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Lors de la mise en forme de <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">liens</a>, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.</p> +<p>Lors de la mise en forme de <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">liens</a>, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -56,10 +56,10 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <p>L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).</p> -<pre class="brush: html notranslate"><p><a href="#">Un simple lien</a></p> +<pre class="brush: html"><p><a href="#">Un simple lien</a></p> </pre> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-size: 2rem; text-align: center; }</pre> @@ -67,7 +67,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <p>{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}</p> <div class="note"> -<p><strong>Note </strong>: tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.</p> +<p><strong>Note :</strong> tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.</p> </div> <p>Vous remarquerez quelques petites choses en explorant les styles par défaut :</p> @@ -97,7 +97,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens </ul> <div class="note"> -<p><strong>Note </strong>: vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !</p> +<p><strong>Note :</strong> vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !</p> </div> <h3 id="Mise_en_forme_de_quelques_liens">Mise en forme de quelques liens</h3> @@ -106,7 +106,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <p>Pour commencer, nous écrirons notre jeu de règles vides :</p> -<pre class="brush: css notranslate">a { +<pre class="brush: css">a { } @@ -135,7 +135,7 @@ a:active { <p>Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 300px; margin: 0 auto; font-size: 1.2rem; @@ -177,7 +177,7 @@ a:active { <p>Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :</p> -<pre class="brush: html notranslate"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla +<pre class="brush: html"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, et <a href="#">Microsoft Edge</a>.</p></pre> @@ -206,10 +206,7 @@ Firefox</a>, <a href="#">Google Chrome</a>, et <p>Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, appuyez sur le bouton <em>Afficher la solution</em> pour insérer l'exemple que nous avons montré ci-dessus.</p> -<div class="hidden"> -<h5 id="Playable_code">Playable code</h5> - -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, et @@ -249,7 +246,7 @@ a:active { </div> </pre> -<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -282,9 +279,8 @@ htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}</p> <h2 id="Inclusion_dicônes_dans_des_liens">Inclusion d'icônes dans des liens</h2> @@ -292,12 +288,12 @@ window.addEventListener("load", drawOutput); <p>Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :</p> -<pre class="brush: html notranslate"><p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>, +<pre class="brush: html"><p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>, jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p></pre> <p>Ensuite, le CSS:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 300px; margin: 0 auto; font-family: sans-serif; @@ -348,7 +344,7 @@ a[href*="http"] { <p>Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !</p> <div class="note"> -<p><strong>Note </strong>: ne vous inquiétez pas si vous n'êtes pas encore familier avec les <a href="/fr/Apprendre/CSS/styliser_boites">arrières-plans</a> et le <a href="/fr/Apps/app_layout/responsive_design_building_blocks">responsive web design</a> ; ceux-ci sont expliqués par ailleurs.</p> +<p><strong>Note :</strong> ne vous inquiétez pas si vous n'êtes pas encore familier avec les <a href="/fr/Apprendre/CSS/styliser_boites">arrières-plans</a> et le <a href="/fr/Apps/app_layout/responsive_design_building_blocks">responsive web design</a> ; ceux-ci sont expliqués par ailleurs.</p> </div> <h2 id="Mise_en_forme_de_liens_comme_des_boutons">Mise en forme de liens comme des boutons</h2> @@ -359,13 +355,13 @@ a[href*="http"] { <p>D'abord, un peu d'HTML :</p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li> </ul></pre> <p>Et maintenant, notre CSS :</p> -<pre class="brush: css notranslate">body,html { +<pre class="brush: css">body,html { margin: 0; font-family: sans-serif; } @@ -427,7 +423,7 @@ a:active { </ul> <div class="note"> -<p><strong>Note</strong> : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> +<p><strong>Note :</strong> vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -444,6 +440,6 @@ a:active { <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école communale</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> </ul> diff --git a/files/fr/learn/css/styling_text/styling_lists/index.html b/files/fr/learn/css/styling_text/styling_lists/index.html index fbbaa1fd87..e7fb1721ba 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.html +++ b/files/fr/learn/css/styling_text/styling_lists/index.html @@ -16,17 +16,17 @@ translation_of: Learn/CSS/Styling_text/Styling_lists <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> -<p class="summary"><span id="result_box" lang="fr"><span>Les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes">listes</a> se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte.</span> <span>Cet article explique tout.</span></span></p> +<p>Les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes">listes</a> se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances de base informatiques, bases HTML (étudiées dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), bases CSS (étudiées dans <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>), <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">la mise en forme du texte</a>.</td> + <td>Connaissances de base informatiques, bases HTML (étudiées dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), bases CSS (étudiées dans <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>), <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">la mise en forme du texte</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> - <td><span id="result_box" lang="fr"><span>Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.</span></span></td> + <td>Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.</td> </tr> </tbody> </table> @@ -35,7 +35,7 @@ translation_of: Learn/CSS/Styling_text/Styling_lists <p>Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible sur Github</a> (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">code source</a>).</p> -<p><span id="result_box" lang="fr"><span>Le code HTML pour nos exemples de liste ressemble à ceci :</span></span></p> +<p>Le code HTML pour nos exemples de liste ressemble à ceci :</p> <pre class="brush: html"><h2>Liste de courses (non ordonnée)</h2> @@ -77,11 +77,11 @@ paragraphe de référence, paragraphe de référence, paragraphe de référence. <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd> </dl></pre> -<p>Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">les outils de développement du navigateur</a>, vous noterez quelques valeurs de style par défaut :</p> +<p>Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">les outils de développement du navigateur</a>, vous noterez quelques valeurs de style par défaut :</p> <ul> <li>Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas et une propriété {{cssxref("padding-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li> - <li>Les éléments de la liste ({{htmlelement("li")}}) <span id="result_box" lang="fr"><span>n'ont aucun paramètre d'espacement par défaut</span></span><span lang="fr"><span>.</span></span></li> + <li>Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut.</li> <li>L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de<code>16 px</code> (<code>1 em</code>) en haut et en bas , mais pas de définition du remplissage.</li> <li>Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li> <li>Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas, identiques à ceux des différents types de listes.</li> @@ -154,7 +154,7 @@ dd { <p>Cela donne l'apparence suivante :</p> -<p><img alt="une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste." src="https://mdn.mozillademos.org/files/16069/ex_1.png" style="border-style: solid; border-width: 1px; display: block; height: 94px; margin: 0px auto; width: 406px;"></p> +<p><img alt="une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste." src="ex_1.png"></p> <p>Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.</p> @@ -169,7 +169,7 @@ dd { list-style-position: inside; }</pre> -<p><img alt="une liste ordonnée avec les puces intégrées au texte des éléments de la liste." src="https://mdn.mozillademos.org/files/16070/ex_2.png" style="border-style: solid; border-width: 1px; display: block; height: 147px; margin: 0px auto; width: 406px;"></p> +<p><img alt="une liste ordonnée avec les puces intégrées au texte des éléments de la liste." src="ex_2.png"></p> <h3 id="Utilisation_d'une_puce_image_personnalisée">Utilisation d'une puce image personnalisée</h3> @@ -179,7 +179,7 @@ dd { list-style-image: url(star.svg); }</pre> -<p>Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module <a href="https://developer.mozilla.org/fr/Apprendre/CSS/styliser_boites"> Styliser les boîtes</a>. Pour l'instant, voici un avant-goût !</p> +<p>Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module <a href="/fr/Apprendre/CSS/styliser_boites"> Styliser les boîtes</a>. Pour l'instant, voici un avant-goût !</p> <p>Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :</p> @@ -213,7 +213,7 @@ ul li { <p>Ceci nous donne le résultat suivant :</p> -<p><img alt="une liste non ordonnée avec les puces définies comme de petites images d'étoiles." src="https://mdn.mozillademos.org/files/16071/ex_3.png" style="border-style: solid; border-width: 1px; display: block; height: 115px; margin: 0px auto; width: 194px;"></p> +<p><img alt="une liste non ordonnée avec les puces définies comme de petites images d'étoiles." src="ex_3.png"></p> <h3 id="Raccourci_de_style_de_liste">Raccourci de style de liste</h3> @@ -269,7 +269,7 @@ ul li { <h3 id="Valeurs_individualisées">Valeurs individualisées</h3> -<p>L'attribut {{htmlattrxref("value","ol")}} vous permet <span id="result_box" lang="fr"><span>de numéroter les éléments de liste avec des valeurs numériques de votre choix</span></span> . L'exemple suivant :</p> +<p>L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :</p> <pre class="brush: html"><ol> <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> @@ -283,7 +283,7 @@ ul li { <p>{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}</p> <div class="note"> -<p><strong>Note</strong> : Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut <code>value</code>.</p> +<p><strong>Note :</strong> Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut <code>value</code>.</p> </div> <h2 id="Apprentissage_actif_définir_le_style_d'une_liste_imbriquée">Apprentissage actif : définir le style d'une liste imbriquée</h2> @@ -299,10 +299,7 @@ ul li { <p>Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour voir une réponse possible.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie du HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> <li>D'abord, allumez la chandelle.</li> @@ -330,7 +327,7 @@ ul li { </div> </pre> -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -365,7 +362,7 @@ window.addEventListener("load", drawOutput); </pre> </div> -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}</p> <h2 id="Voir_aussi">Voir aussi</h2> @@ -391,6 +388,6 @@ window.addEventListener("load", drawOutput); <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école communale</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> </ul> diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html index 9cc49e8056..d237b8f377 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html @@ -17,9 +17,9 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage <div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.</p> +<p>Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -42,7 +42,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage </ul> <div class="note"> -<p><strong>Note</strong> : Autrement, il reste possible d'utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">cet URL</a> pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <code><style></code> de l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> Autrement, il reste possible d'utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">cet URL</a> pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <code><style></code> de l'élément <code>head</code> du document.</p> </div> <h2 id="Énoncé_de_l'exercice">Énoncé de l'exercice</h2> @@ -103,7 +103,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage <p>La capture d'écran ci-après montre un exemple possible du design terminé :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> +<p><img alt="" src="example2.png"></p> <h2 id="Évaluation">Évaluation</h2> @@ -121,6 +121,6 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> <li>Composition d'une page d'accueil d'une école de communauté</li> </ul> diff --git a/files/fr/learn/css/styling_text/web_fonts/index.html b/files/fr/learn/css/styling_text/web_fonts/index.html index 64724b25db..f1cafd3f21 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.html +++ b/files/fr/learn/css/styling_text/web_fonts/index.html @@ -7,13 +7,13 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.</p> +<p>Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> + <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -61,7 +61,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts </ol> <div class="note"> -<p><strong>Note </strong>: La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !</p> +<p><strong>Note :</strong> La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !</p> </div> <h2 id="Apprentissage_actif_un_exemple_de_fonte_web">Apprentissage actif : un exemple de fonte web</h2> @@ -87,7 +87,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <p>Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.</p> <div class="note"> -<p><strong>Note </strong>: Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.</p> +<p><strong>Note :</strong> Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.</p> </div> <h3 id="Créer_le_code_requis">Créer le code requis</h3> @@ -127,10 +127,10 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <p>Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="web-font-example.png"></p> <div class="note"> -<p><strong>Note</strong> : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (lancez l'<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">exemple terminé directement</a>).</p> +<p><strong>Note :</strong> Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (lancez l'<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">exemple terminé directement</a>).</p> </div> <h2 id="Utiliser_un_service_de_polices_en_ligne">Utiliser un service de polices en ligne</h2> @@ -151,7 +151,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts </ol> <div class="note"> -<p><strong>Note</strong> : Vous pourrez trouver une version complétée sur <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si vous avez besoin de vérifier votre travail par rapport au nôtre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">voir en direct</a>).</p> +<p><strong>Note :</strong> Vous pourrez trouver une version complétée sur <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si vous avez besoin de vérifier votre travail par rapport au nôtre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">voir en direct</a>).</p> </div> <h2 id="font-face_plus_en_détail">@font-face plus en détail</h2> @@ -179,7 +179,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts </ul> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> (<em>Création de piles de fontes personnalisées en définissant des plages unicode</em>) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.</p> +<p><strong>Note :</strong> Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> (<em>Création de piles de fontes personnalisées en définissant des plages unicode</em>) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -199,5 +199,5 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> <li>Polices de caractères web</li> - <li><a class="new" href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école de communauté</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école de communauté</a></li> </ul> diff --git a/files/fr/learn/forms/advanced_form_styling/index.html b/files/fr/learn/forms/advanced_form_styling/index.html index b34fcc2065..040507b63e 100644 --- a/files/fr/learn/forms/advanced_form_styling/index.html +++ b/files/fr/learn/forms/advanced_form_styling/index.html @@ -1,20 +1,12 @@ --- title: Composition avancée des formulaires HTML slug: Learn/Forms/Advanced_form_styling -tags: - - Avancé - - CSS - - Exemple - - Formulaires - - Guide - - HTML - - Web translation_of: Learn/Forms/Advanced_form_styling original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Dans cet article, nous verrons comment utiliser les <a href="/fr/docs/Apprendre/CSS">CSS</a> avec les formulaires <a href="/fr/docs/Glossaire/HTML">HTML</a> pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'<a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">article précédent</a>, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.</p> +<p>Dans cet article, nous verrons comment utiliser les <a href="/fr/docs/Learn/CSS">CSS</a> avec les formulaires <a href="/fr/docs/Glossary/HTML">HTML</a> pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'<a href="/fr/docs/Learn/Forms/Styling_web_forms">article précédent</a>, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.</p> <p>Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :</p> @@ -32,7 +24,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <p>L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :</p> <ul> - <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a> était très limité et n'offrait que trois pseudo-classes : + <li><a href="https://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a> était très limité et n'offrait que trois pseudo-classes : <ul> <li>{{cssxref(":active")}}</li> @@ -40,7 +32,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <li>{{cssxref(":hover")}}</li> </ul> </li> - <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : + <li><a href="https://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : <ul> <li>{{cssxref(":enabled")}}</li> <li>{{cssxref(":disabled")}}</li> @@ -48,7 +40,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <li>{{cssxref(":indeterminate")}}</li> </ul> </li> - <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> a ajouté quelques autres pseudo-classes pour décrire l'état du widget : + <li><a href="https://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> a ajouté quelques autres pseudo-classes pour décrire l'état du widget : <ul> <li>{{cssxref(":default")}}</li> <li>{{cssxref(":valid")}}</li> @@ -61,7 +53,7 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <li>{{cssxref(":read-write")}}</li> </ul> </li> - <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external">CSS Selector Level 4</a> actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : + <li><a href="https://dev.w3.org/csswg/selectors4/" rel="external">CSS Selector Level 4</a> actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : <ul> <li>{{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}.</li> </ul> @@ -73,16 +65,16 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms <p>Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..</p> <div class="warning"> -<p><strong>Avertissement :</strong> Même si ces expérimentations sont intéressantes, <strong>elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables</strong>. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">vous faites quelque chose qui peut être mauvais pour le Web</a> en utilisant des propriétés non standard.</p> +<p><strong>Attention :</strong> Même si ces expérimentations sont intéressantes, <strong>elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables</strong>. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; <a href="https://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">vous faites quelque chose qui peut être mauvais pour le Web</a> en utilisant des propriétés non standard.</p> </div> <ul> <li><a href="/fr/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Extensions des CSS Mozilla </a> <ul> - <li>{{cssxref(":-moz-placeholder")}}</li> + <li>{{cssxref(":placeholder-shown")}}</li> <li>{{cssxref(":-moz-submit-invalid")}}</li> - <li>{{cssxref(":-moz-ui-invalid")}}</li> + <li>{{cssxref(":user-invalid")}}</li> <li>{{cssxref(":-moz-ui-valid")}}</li> </ul> </li> @@ -99,15 +91,15 @@ original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms </li> </ul> -<h3 id="Contrôle_de_l'apparence_des_éléments_de_formulaire">Contrôle de l'apparence des éléments de formulaire</h3> +<h3 id="Contrôle_du_style_des_éléments_de_formulaire">Contrôle du style des éléments de formulaire</h3> <p>Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif et widget stylistiquement composables par l'utilisateur.</p> -<p>À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}. <strong>Ces propriétés ne sont pas normées et ne doivent pas être utilisées</strong>. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : <code>none</code>. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.</p> +<p>À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}. <strong>Ces propriétés ne sont pas normées et ne doivent pas être utilisées</strong>. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : <code>none</code>. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.</p> <p>Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :</p> -<pre class="brush: css"><style> +<pre class="brush: html"><style> input[type=search] { border: 1px dotted #999; border-radius: 0; @@ -120,10 +112,10 @@ input[type=search] { <input type="search"> </form></pre> -<p>{{EmbedLiveSample("Contrôle_de_l'apparence_des_éléments_de_formulaire", 250, 40)}}</p> +<p>{{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}}</p> <div class="note"> -<p><strong>Note :</strong> Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external">Shadow DOM</a> qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.</p> +<p><strong>Note :</strong> Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que <a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external">Shadow DOM</a> qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.</p> </div> <h2 id="Exemples">Exemples</h2> @@ -160,38 +152,38 @@ input[type=checkbox] { <tbody> <tr> <td>Firefox 57 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15671/firefox-mac-checkbox.png" style="height: 118px; width: 120px;"></td> + <td><img alt="" src="firefox-mac-checkbox.png"></td> </tr> <tr> <td>Firefox 57 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15691/firefox-windows-checkbox.png" style="height: 115px; width: 113px;"></td> + <td><img alt="" src="firefox-windows-checkbox.png"></td> </tr> <tr> <td>Chrome 63 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15676/chrome-mac-checkbox.png" style="height: 117px; width: 116px;"></td> + <td><img alt="" src="chrome-mac-checkbox.png"></td> </tr> <tr> <td>Chrome 63 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15681/chrome-windows-checkbox.png" style="height: 117px; width: 120px;"></td> + <td><img alt="" src="chrome-windows-checkbox.png"></td> </tr> <tr> <td>Opera 49 (Mac OSX)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15701/opera-mac-checkbox.png" style="height: 119px; width: 118px;"></td> + <td><img alt="" src="opera-mac-checkbox.png"></td> </tr> <tr> <td>Internet Explorer 11 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15696/ie11-checkbox.png" style="height: 112px; width: 119px;"></td> + <td><img alt="" src="ie11-checkbox.png"></td> </tr> <tr> <td>Edge 16 (Windows 10)</td> - <td><img alt="" src="https://mdn.mozillademos.org/files/15686/edge-checkbox.png" style="height: 118px; width: 119px;"></td> + <td><img alt="" src="edge-checkbox.png"></td> </tr> </tbody> </table> <h4 id="Un_exemple_un_peu_plus_compliqué">Un exemple un peu plus compliqué</h4> -<p>Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :</p> +<p>Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :</p> <pre class="brush: html"><form> <fieldset> @@ -246,7 +238,7 @@ p+p { <p>Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :</p> -<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p> +<p><img alt="Check box CSS Sprite" src="checkbox-sprite.png"></p> <p>Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :</p> @@ -261,7 +253,7 @@ p+p { left: -1000em; }</pre> -<p>Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref(":before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le <code>label</code> suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref(":before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.</p> +<p>Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref("::before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le <code>label</code> suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref("::before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.</p> <pre class="brush: css">:root input[type=checkbox] + label:before { content: ""; @@ -351,52 +343,52 @@ option { <tbody> <tr> <td>Firefox 57 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15672/firefox-mac-select-1-closed.png" style="height: 55px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15673/firefox-mac-select-1-open.png" style="height: 76px; width: 119px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15674/firefox-mac-select-2-closed.png" style="height: 67px; width: 94px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15675/firefox-mac-select-2-open.png" style="height: 82px; width: 116px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-mac-select-2-open.png"></td> </tr> <tr> <td>Firefox 57 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15692/firefox-windows-select-1-closed.png" style="height: 65px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15693/firefox-windows-select-1-open.png" style="height: 129px; width: 103px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15694/firefox-windows-select-2-closed.png" style="height: 69px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15695/firefox-windows-select-2-open.png" style="height: 144px; width: 108px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="firefox-windows-select-2-open.png"></td> </tr> <tr> <td>Chrome 63 (Mac OSX)</td> - <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15677/chrome-mac-select-1-closed.png" style="height: 36px; width: 92px;"></td> - <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15678/chrome-mac-select-1-open.png" style="height: 62px; width: 108px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15680/chrome-mac-select-2-open.png" style="height: 75px; width: 110px;"></td> + <td style="vertical-align: top; text-align: center;"><img alt="" src="chrome-mac-select-1-closed.png"></td> + <td style="vertical-align: top; text-align: center;"><img alt="" src="chrome-mac-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-mac-select-2-open.png"></td> </tr> <tr> <td>Chrome 63 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15682/chrome-windows-select-1-closed.png" style="height: 50px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15683/chrome-windows-select-1-open.png" style="height: 95px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15685/chrome-windows-select-2-open.png" style="height: 104px; width: 93px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="chrome-windows-select-2-open.png"></td> </tr> <tr> <td>Opera 49 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15702/opera-mac-select-1-closed.png" style="height: 33px; width: 92px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15703/opera-mac-select-1-open.png" style="height: 67px; width: 115px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15704/opera-mac-select-2-closed.png" style="height: 49px; width: 89px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15705/opera-mac-select-2-open.png" style="height: 77px; width: 115px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-1-open.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="opera-mac-select-2-open.png"></td> </tr> <tr> <td>IE11 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15697/ie11-select-1-closed.png" style="height: 52px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15698/ie11-select-1-open.png" style="height: 84px; width: 120px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15699/ie11-select-2-closed.png" style="height: 57px; width: 93px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15700/ie11-select-2-open.png" style="height: 89px; width: 123px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="ie11-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="ie11-select-1-open.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="ie11-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="ie11-select-2-open.png"></td> </tr> <tr> <td>Edge 16 (Windows 10)</td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15687/edge-select-1-closed.png" style="height: 52px; width: 91px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15688/edge-select-1-open.png" style="height: 84px; width: 105px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15689/edge-select-2-closed.png" style="height: 51px; width: 89px;"></td> - <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15690/edge-select-2-open.png" style="height: 83px; width: 93px;"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="edge-select-1-closed.png"></td> + <td style="text-align: center; vertical-align: top;"><img alt="" src="edge-select-1-open.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="edge-select-2-closed.png"></td> + <td style="text-align: center; vertical-align: middle;"><img alt="" src="edge-select-2-open.png"></td> </tr> </tbody> </table> @@ -442,7 +434,7 @@ option { <p>Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.</p> -<p>Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge les plus importantes propriétés des CSS : <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets" rel="nofollow">Tableau de compatibilité des propriétés entre widgets de formulaire</a>.</p> +<p>Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge les plus importantes propriétés des CSS : <a href="/fr/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a>.</p> <h2 id="Voir_aussi">Voir aussi</h2> @@ -456,15 +448,15 @@ option { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Your_first_form">Mon premier formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form">Comment structurer un formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Basic_native_form_controls">Les widgets natifs pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data">Envoi des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Validation des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_build_custom_form_controls">Comment construire des widgets personnalisés pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> + <li><a href="/fr/docs/Learn/Forms/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> + <li><a href="/fr/docs/Learn/Forms/Styling_web_forms">Mise en forme des formulaires HTML</a></li> <li>Mise en forme avancée des formulaires HTML</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> </ul> diff --git a/files/fr/learn/forms/basic_native_form_controls/index.html b/files/fr/learn/forms/basic_native_form_controls/index.html index 92efc020da..517880bb99 100644 --- a/files/fr/learn/forms/basic_native_form_controls/index.html +++ b/files/fr/learn/forms/basic_native_form_controls/index.html @@ -15,13 +15,13 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.</p> +<p>Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML" rel="nofollow">connaissances de base du HTML</a>.</td> + <td>Notions concernant les ordinateurs et les <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">connaissances de base du HTML</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -30,10 +30,10 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs </tbody> </table> -<p>Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a> plus loin dans ce même module pour plus d'idées à ce propos.</p> +<p>Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a> plus loin dans ce même module pour plus d'idées à ce propos.</p> <div class="note"> -<p><strong>Note </strong>: La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les <a href="/fr/docs/Web/HTML/Element#Forms">références aux éléments de formulaires HTML</a>, et en particulier nos références détaillées aux <a href="/fr/docs/Web/HTML/Element/input">types <input></a>.</p> +<p><strong>Note :</strong> La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les <a href="/fr/docs/Web/HTML/Element#Forms">références aux éléments de formulaires HTML</a>, et en particulier nos références détaillées aux <a href="/fr/docs/Web/HTML/Element/input">types <input></a>.</p> </div> <h2 id="Attributs_communs">Attributs communs</h2> @@ -82,7 +82,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.</p> <div class="note"> -<p><strong>Note :</strong> Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">mise en forme riche</a> (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.</p> +<p><strong>Note :</strong> Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la <a href="/fr/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">mise en forme riche</a> (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.</p> </div> <p>Tous les champs textuels ont des comportement en commun :</p> @@ -95,7 +95,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs </ul> <div class="note"> -<p><strong>Note :</strong> L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.</p> +<p><strong>Note :</strong> L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.</p> </div> <h3 id="Champs_texte_sur_une_seule_ligne"> Champs texte sur une seule ligne</h3> @@ -103,16 +103,16 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à <code>text</code> (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, <code>text</code> est la valeur par défaut). <code>text</code> est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez <code>type="date"</code> et que le navigateur ne prend pas en charge les sélecteurs de date natifs).</p> <div class="note"> -<p><strong>Note :</strong> Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">directement aussi</a>).</p> </div> <p>Voici un exemple élémentaire de champ texte sur une ligne :</p> -<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> +<pre class="brush: html"><input type="text" id="comment" name="comment" value="Je suis un champ texte"></pre> <p>Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.</p> -<p><img alt="Screenshots of single line text fields on several platforms." src="https://developer.mozilla.org/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> +<p><img alt="Screenshots of single line text fields on several platforms." src="https://developer.mozilla.org/files/4273/all-single-line-text-field.png"></p> <p>HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.</p> @@ -120,25 +120,25 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Ce type de champ est défini en donnant la valeur <code>email</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="email" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> </span></code>multiple></pre> +<pre class="brush: html"> <input type="email" id="email" name="email" multiple></pre> <p>Avec ce <code>type</code> , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :</p> -<p><img alt="Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »" src="https://mdn.mozillademos.org/files/16001/fr-email.png" style="border-style: solid; border-width: 1px; display: block; height: 130px; margin: 0px auto; width: 434px;"></p> +<p><img alt="Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »" src="fr-email.png"></p> <p>Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).</p> <p>Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.</p> <div class="note"> -<p><strong>Note</strong>: Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaires</a>.</p> +<p><strong>Note :</strong> Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaires</a>.</p> </div> <h4 id="Champ_pour_mot_de_passe">Champ pour mot de passe</h4> <p>Ce type de champ est défini en donnant la valeur <code>password</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="password" id="pwd" name="pwd"></pre> +<pre class="brush: html"> <input type="password" id="pwd" name="pwd"></pre> <p>Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.</p> @@ -150,17 +150,17 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Ce type de champ se définit avec la valeur <code>search</code> de l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="search" id="search" name="search"></pre> +<pre class="brush: html"> <input type="search" id="search" name="search"></pre> <p>La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.</p> -<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> +<p><img alt="Screenshots of search fields on several platforms." src="all-search-field.png"></p> <h4 id="Champ_pour_numéro_de_téléphone">Champ pour numéro de téléphone</h4> <p>Ce type de champ se définit en donnant la valeur <code>tel</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="tel" id="tel" name="tel"></pre> +<pre class="brush: html"> <input type="tel" id="tel" name="tel"></pre> <p>À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.</p> @@ -168,25 +168,27 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Ce type de champ se définit en donnant la valeur <code>url</code> à l'attribut {{htmlattrxref("type","input")}} :</p> -<pre class="brush: html notranslate"> <input type="url" id="url" name="url"></pre> +<pre class="brush: html"> <input type="url" id="url" name="url"></pre> <p>Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.</p> -<div class="note"><strong>Note :</strong> ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.</div> +<div class="note"> + <p><strong>Note :</strong> ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.</p> +</div> <div class="note"> -<p><strong>Note :</strong> La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article <a href="/fr/docs/HTML/Formulaires/Validation_de_formulaires" title="/fr/docs/HTML/Formulaires/Validation_de_formulaire">Validation de formulaires</a>.</p> +<p><strong>Note :</strong> La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article <a href="/fr/docs/HTML/Formulaires/Validation_de_formulaires" title="/fr/docs/HTML/Formulaires/Validation_de_formulaire">Validation de formulaires</a>.</p> </div> <h3 id="Champs_texte_multilignes">Champs texte multilignes</h3> <p>Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.</p> -<pre class="brush: html notranslate"> <textarea cols="30" rows="10"></textarea></pre> +<pre class="brush: html"> <textarea cols="30" rows="10"></textarea></pre> <p>La principale différence entre un champ <code>textarea</code> et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche <code>Retour</code>).</p> -<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> +<p><img alt="Screenshots of multi-lines text fields on several platforms." src="all-multi-lines-text-field.png"></p> <div class="note"> <p><strong>Note :</strong> Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (voir aussi <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">directement</a>). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à <code>none</code> dans les CSS.</p> @@ -239,7 +241,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.</p> -<pre class="brush: html notranslate"> <select> +<pre class="brush: html"> <select> <option>Banane</option> <option>Cerise</option> <option>Citron</option> @@ -247,7 +249,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :</p> -<pre class="brush: html notranslate"> <select> +<pre class="brush: html"> <select> <optgroup label="Fruits"> <option>Banane</option> <option selected>Cerise</option> @@ -260,7 +262,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs </optgroup> </select></pre> -<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> +<p><img alt="Screenshots of single line select box on several platforms." src="all-select.png"></p> <p>Si un élément {{HTMLElement("option")}} est défini avec l'attribut <code>value</code>, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut <code>value</code> est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.</p> @@ -272,15 +274,17 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.</p> -<pre class="brush: html notranslate"> <select multiple> +<pre class="brush: html"> <select multiple> <option>Banane</option> <option>Cerise</option> <option>Citron</option> </select></pre> -<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> +<p><img alt="Screenshots of multi-lines select box on several platforms." src="all-multi-lines-select.png"></p> -<div class="note"><strong>Note :</strong> tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.</div> +<div class="note"> + <p><strong>Note :</strong> tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.</p> +</div> <h3 id="Contenus_auto-complétés">Contenus auto-complétés</h3> @@ -290,7 +294,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.</p> -<pre class="brush: html notranslate"> <label for="onFruit">Quel est votre fruit préféré ?</label> +<pre class="brush: html"> <label for="onFruit">Quel est votre fruit préféré ?</label> <input type="text" id="onFruit" list="maSuggestion" /> <datalist id="maSuggestion"> <option>Pomme</option> @@ -303,9 +307,11 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <option>Poire</option> </datalist></pre> -<div class="note"><strong>Note :</strong> Selon la <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external">norme HTML</a>, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.</div> +<div class="note"> + <p><strong>Note :</strong> Selon la <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external">norme HTML</a>, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.</p> +</div> -<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> +<div><img alt="Screenshots of datalist on several platforms." src="all-datalist.png"></div> <div> <h4 id="Prise_en_charge_de_Datalist_et_recours">Prise en charge de Datalist et recours</h4> @@ -314,22 +320,22 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :</p> -<pre class="brush:html; line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre fruit préféré ? (avec repli)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>ou choisissez un fruit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>altFruit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Mûres<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Airelles<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Citron<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Litchi<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pêche<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Poire<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush:html"><label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label> +<input type="text" id="myFruit" name="fruit" list="fruitList"> + +<datalist id="fruitList"> + <label for="suggestion">ou choisissez un fruit</label> + <select id="suggestion" name="altFruit"> + <option>Pomme</option> + <option>Banane</option> + <option>Mûres</option> + <option>Airelles</option> + <option>Citron</option> + <option>Litchi</option> + <option>Pêche</option> + <option>Poire</option> + </select> +</datalist></pre> <p>Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).</p> @@ -337,11 +343,11 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <tbody> <tr> <th scope="row">Safari 6</th> - <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="https://developer.mozilla.org/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> + <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="https://developer.mozilla.org/files/4583/datalist-safari.png"></td> </tr> <tr> <th scope="row">Firefox 18</th> - <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="https://developer.mozilla.org/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> + <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="https://developer.mozilla.org/files/4581/datalist-firefox-macos.png"></td> </tr> </tbody> </table> @@ -354,7 +360,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut <code>name</code>.</p> <div class="note"> -<p><strong>Note</strong> : Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">voir directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">voir directement aussi</a>).</p> </div> <p>Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste. Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.</p> @@ -365,22 +371,22 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <p>Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>checkbox</code>.</p> -<pre class="brush: html notranslate"> <input type="checkbox" <code class="language-html"><span class="tag token"><span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span></span></code>> +<pre class="brush: html"> <input type="checkbox" checked id="carrots" name="carrots" value="carrots"> </pre> <p>Mettre l'attribut <code>checked</code> fait que la case sera cochée au chargement de la page.</p> -<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> +<p><img alt="Screenshots of check boxes on several platforms." src="all-checkbox.png"></p> <h3 id="Bouton_radio">Bouton radio</h3> <p>Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur <code>radio</code>.</p> -<pre class="brush: html notranslate"> <input type="radio" checked<code class="language-html"><span class="tag token"><span class="attr-name token"> id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span></span></code>></pre> +<pre class="brush: html"> <input type="radio" checked id="soup" name="meal"></pre> <p>Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><fieldset> +<pre class="brush: html"><fieldset> <legend>Quel est votre mets préféré ?</legend> <ul> <li> @@ -396,9 +402,9 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <input type="radio" id="pizza" name="meal" value="pizza"> </li> </ul> -</fieldset></code></pre> +</fieldset></pre> -<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> +<p><img alt="Screenshots of radio buttons on several platforms." src="all-radio.png"></p> <h2 id="Boutons">Boutons</h2> @@ -417,7 +423,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h3 id="submit">submit</h3> -<pre class="brush: html notranslate"> <button type="submit"> +<pre class="brush: html"> <button type="submit"> Ceci est un <br><strong>bouton d'envoi</strong> </button> @@ -425,7 +431,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h3 id="reset">reset</h3> -<pre class="brush: html notranslate"> <button type="reset"> +<pre class="brush: html"> <button type="reset"> Ceci est un <br><strong>bouton de réinitialisation</strong> </button> @@ -433,7 +439,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h3 id="anonymous">anonymous</h3> -<pre class="brush: html notranslate"> <button type="button"> +<pre class="brush: html"> <button type="button"> Ceci est un <br><strong>bouton lambda</strong> </button> @@ -446,7 +452,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <li>Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).</li> </ul> -<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> +<p><img alt="Screenshots of buttons on several platforms." src="all-buttons.png"></p> <p>Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.</p> @@ -467,7 +473,7 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h4 id="Exemple">Exemple</h4> -<pre class="brush: html notranslate"> <input type="number" <code class="language-html"><span class="tag token"><span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span></span></code> min="1" max="10" step="2"></pre> +<pre class="brush: html"> <input type="number" name="age" id="age" min="1" max="10" step="2"></pre> <p>Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.</p> @@ -479,29 +485,28 @@ original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs <h4 id="Exemple_2">Exemple</h4> -<pre class="brush: html line-numbers language-html notranslate"> <code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">> -</span></span></code></pre> +<pre class="brush: html"><input type="range" name="beans" id="beans" min="0" max="500" step="10"></pre> <p>Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.</p> <p>Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span><span class="punctuation token">>Combien de haricots pouvez‑vous manger </span></span>?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beancount<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><label for="beans">Combien de haricots pouvez‑vous manger ?</label> +<input type="range" name="beans" id="beans" min="0" max="500" step="10"> +<span class="beancount"></span></pre> <p>et en JavaScript :</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> beans <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#beans'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> count <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.beancount'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">var beans = document.querySelector('#beans'); +var count = document.querySelector('.beancount'); -count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +count.textContent = beans.value; -beans<span class="punctuation token">.</span>oninput <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +beans.oninput = function() { + count.textContent = beans.value; +}</pre> -<p>Ici nous stockons dans deux variables les références du curseur et celle de <code>span</code>, puis nous réglons immédiatement le <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code> de <code>span</code> à la valeur courante <code>value</code> de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le <code>textContent</code> de <code>span</code> est mis à jour avec la nouvelle valeur de l'entrée.</p> +<p>Ici nous stockons dans deux variables les références du curseur et celle de <code>span</code>, puis nous réglons immédiatement le <code><a href="/fr/docs/Web/API/Node/textContent">textContent</a></code> de <code>span</code> à la valeur courante <code>value</code> de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le <code>textContent</code> de <code>span</code> est mis à jour avec la nouvelle valeur de l'entrée.</p> <p>L'attribut <code>range</code> pour <code>input</code> n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.</p> @@ -515,32 +520,34 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="datetime-local" name="datetime" id="datetime"></code></pre> +<pre class="brush: html"><input type="datetime-local" name="datetime" id="datetime"></pre> <h4 id="month"><code>month</code></h4> <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="month" name="month" id="month"></code></pre> +<pre class="brush: html"><input type="month" name="month" id="month"></pre> <h4 id="time"><code>time</code></h4> <p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="time" name="time" id="time"></code></pre> +<pre class="brush: html"><input type="time" name="time" id="time"></pre> <h4 id="week"><code>week</code></h4> <p>Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><input type="week" name="week" id="week"></code></pre> +<pre class="brush: html"><input type="week" name="week" id="week"></pre> <p>Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</p> -<pre class="brush: html notranslate"> <label for="maDate">Quand êtes vous disponible cet été ?</label> +<pre class="brush: html"> <label for="maDate">Quand êtes vous disponible cet été ?</label> <input type="date" min="2013-06-01" max="2013-08-31" id="maDate"></pre> -<p class="warning"><strong>Attention :</strong> Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.</p> +<div class="warning"> + <p><strong>Attention :</strong> Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.</p> +</div> <h3 id="Sélecteur_de_couleur">Sélecteur de couleur</h3> @@ -548,7 +555,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>color</code>.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><input type="color" name="color" id="color"></pre> <p>Attention : la prise en charge du widget <code>color</code> n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.</p> @@ -557,12 +564,12 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.</p> <div class="note"> -<p id="Sélection_de_fichier"><strong>Note </strong>: Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (à voir aussi<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html"> directement</a>).</p> +<p><strong>Note :</strong> Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (à voir aussi<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html"> directement</a>).</p> </div> <h3 id="Sélection_de_fichier_2">Sélection de fichier</h3> -<p>Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi et extraction des données de formulaire</a> ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.</p> +<p>Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi et extraction des données de formulaire</a> ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.</p> <p>Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>file</code>. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.</p> @@ -570,7 +577,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.</p> -<pre class="brush: html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><input type="file" name="file" id="file" accept="image/*" multiple></pre> <h3 id="Contenu_caché">Contenu caché</h3> @@ -578,7 +585,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Si vous créez un tel élément, il est obligatoire de définir ses attributs <code>name</code> et <code>value</code> :</p> -<pre class="brush: html notranslate"> <input type="hidden" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>timestamp<span class="punctuation token">"</span></span> </span></code>name="timestamp" value="1286705410"></pre> +<pre class="brush: html"> <input type="hidden" id="timestamp" name="timestamp" value="1286705410"></pre> <h3 id="Image-bouton">Image-bouton</h3> @@ -586,7 +593,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>image</code>. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.</p> -<pre class="brush: html notranslate"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> +<pre class="brush: html"> <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> <p>Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :</p> @@ -597,9 +604,9 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :</p> -<pre class="notranslate"> http://foo.com?pos.x=123&pos.y=456</pre> +<pre> http://foo.com?pos.x=123&pos.y=456</pre> -<p>C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article <span>« </span><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires"><span>Envoi des données de formulaire</span></a> ».</p> +<p>C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a> ».</p> <h3 id="Compteurs_et_barres_de_progression">Compteurs et barres de progression</h3> @@ -609,7 +616,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.</p> -<pre class="brush: html notranslate"> <progress max="100" value="75">75/100</progress></pre> +<pre class="brush: html"> <progress max="100" value="75">75/100</progress></pre> <p>Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.</p> @@ -646,7 +653,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <p>Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meter</span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">low</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>33<span class="punctuation token">"</span></span> <span class="attr-name token">high</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>66<span class="punctuation token">"</span></span> <span class="attr-name token">optimum</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>75<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>meter</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> <p>Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.</p> @@ -671,7 +678,7 @@ beans<span class="punctuation token">.</span>oninput <span class="operator token <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li>Les widgets natifs pour formulaire</li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/form_validation/index.html b/files/fr/learn/forms/form_validation/index.html index 137b1be959..b95ce27d09 100644 --- a/files/fr/learn/forms/form_validation/index.html +++ b/files/fr/learn/forms/form_validation/index.html @@ -1,26 +1,18 @@ --- title: Validation des données de formulaires slug: Learn/Forms/Form_validation -tags: - - Exemple - - Formulaires - - Guide - - HTML - - Intermédiaire - - JavaScript - - Web translation_of: Learn/Forms/Form_validation original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.</p> +<p>Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs, une bonne compréhension du <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, des <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> et de <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> + <td>Notions concernant les ordinateurs, une bonne compréhension du <a href="/fr/docs/Learn/HTML">HTML</a>, des <a href="/fr/docs/Learn/CSS">CSS</a> et de <a href="/fr/docs/Learn/JavaScript">JavaScript</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -56,7 +48,7 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire <p>Vous rencontrerez différents types de validation de formulaires sur le Web :</p> -<ul style="list-style-type: disc;"> +<ul> <li>La validation côté client est la validation qui est effectuée dans le navigateur, avant que les données n'aient été soumises au serveur. Cette méthode est plus conviviale que la validation côté serveur car elle donne une réponse instantanée. Il est possible de la subdiviser encore avec : <ul> <li>la validation JavaScript, codée en JavaScript, entièrement personnalisable.</li> @@ -76,7 +68,7 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire <h2 id="Utiliser_la_validation_intégrée_au_formulaire">Utiliser la validation intégrée au formulaire</h2> -<p>Une des caractéristiques de <a href="/fr/docs/HTML/HTML5">HTML5</a> est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">attributs de validation</a> sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.<br> +<p>Une des caractéristiques de <a href="/fr/docs/orphaned/Web/Guide/HTML/HTML5">HTML5</a> est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">attributs de validation</a> sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.<br> Quand un élément est valide :</p> <ul> @@ -91,37 +83,31 @@ original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire <li>si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.</li> </ul> -<h3 id="Contraintes_de_validation_sur_les_éléments_d'entrée_—_simple_début">Contraintes de validation sur les éléments d'entrée — simple début</h3> - - +<h3 id="Contraintes_de_validation_sur_les_éléments_input_—_simple_début">Contraintes de validation sur les éléments input — simple début</h3> <p>Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.</p> <p>Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> et un exemple « live » ci-dessous :</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><form> +<pre class="brush: html hidden"><form> <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like"> <button>Soumettre</button> </form></pre> -<pre class="brush: css">input:invalid { +<pre class="brush: css hidden">input:invalid { border: 2px dashed red; } input:valid { border: 1px solid black; }</pre> -</div> -<p>{{EmbedLiveSample("Hidden_code", "100%", 55)}}</p> +<p>{{EmbedLiveSample("Contraintes_de_validation_sur_les_éléments_input_—_simple_début", "100%", 55)}}</p> <p>Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.</p> -<h3 id="L'attribut_required">L'attribut required</h3> +<h3 id="Attribut_required">Attribut required</h3> <p>La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).</p> @@ -145,11 +131,11 @@ input:valid { <p>L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :</p> -<p>{{EmbedLiveSample("L'attribut_required", "100%", 55)}}</p> +<p>{{EmbedLiveSample("Attribut_required", "100%", 55)}}</p> <h3 id="Validation_selon_une_expression_régulière">Validation selon une expression régulière</h3> -<p>Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression régulière</a> comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.</p> +<p>Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression régulière</a> comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.</p> <p>Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :</p> @@ -184,21 +170,19 @@ input:valid { <p>Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut <code>pattern</code>, ainsi :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><form> +<pre class="brush: html"><form> <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like" required pattern="banane|cerise"> <button>Soumettre</button> -</form></code></pre> +</form></pre> -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css">input:invalid { +<pre class="brush: css">input:invalid { border: 2px dashed red; } input:valid { border: 1px solid black; -}</code></pre> -</div> +}</pre> <p>{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}</p> @@ -211,7 +195,7 @@ input:valid { </div> <div class="note"> -<p><strong>Note : </strong>L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.</p> +<p><strong>Note :</strong> L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.</p> </div> <h3 id="Limitation_de_la_taille_des_entrées">Limitation de la taille des entrées</h3> @@ -224,7 +208,7 @@ input:valid { <p>Supprimez maintenant le contenu de l'élément <code><body></code> et remplacez-le par le suivant :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><form> +<pre class="brush: html"><form> <div> <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like" required minlength="6" maxlength="6"> @@ -236,15 +220,14 @@ input:valid { <div> <button>Soumettre</button> </div> -</form></code></pre> +</form></pre> <ul> <li>Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de <em>banane</em> ou <em>cerise</em>. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.</li> <li>Nous avons également contraint le champ <code>number</code> à un <code>min</code> de 1 et un <code>max </code>de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.</li> </ul> -<div class="hidden"> -<pre class="line-numbers language-html"><code class="language-html">input:invalid { +<pre class="brush: html hidden">input:invalid { border: 2px dashed red; } @@ -254,113 +237,112 @@ input:valid { div { margin-bottom: 10px; -}</code></pre> -</div> +}</pre> <p>Voici cet exemple s'exécutant en « live » :</p> <p>{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}</p> <div class="note"> -<p><strong>Note</strong>: <code><input type="number"></code> (et d'autres types, comme <code>range</code>) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).</p> +<p><strong>Note :</strong> <code><input type="number"></code> (et d'autres types, comme <code>range</code>) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).</p> </div> <h3 id="Exemple_complet">Exemple complet</h3> <p>Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">>Qualité</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Mr<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>M.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ms<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Mme.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel est votre âge ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="comment token"><!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est +<pre class="brush: html"><form> + <p> + <fieldset> + <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend> + <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label> + <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label> + </fieldset> + </p> + <p> + <label for="n1">Quel est votre âge ?</label> + <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand - il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> - <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>\d+<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span><span class="punctuation token">>Quel est votre fruit </span></span>favori ?<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> - <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Cerise<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">> - </span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">>Citron</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">> -</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">>Fraise</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Orange<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span><span class="punctuation token">>Quelle est votre</span></span> adresse électronique ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Laissez un court message<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span> <span class="attr-name token">maxlength</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>140<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Soumettre<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">1</span>em sans-serif<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">margin</span> <span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">form </span><span class="punctuation token">{</span> - <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">5</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">p > label </span><span class="punctuation token">{</span> - <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">input[type=text], + il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. --> + <input type="number" min="12" max="120" step="1" id="n1" name="age" + pattern="\d+"> + </p> + <p> + <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label> + <input type="text" id="t1" name="fruit" list="l1" required + pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme"> + <datalist id="l1"> + <option>Banane</option> + <option>Cerise</option> + <option>Citron</option> + <option>Fraise</option> + <option>Orange</option> + <option>Pomme</option> + </datalist> + </p> + <p> + <label for="t2">Quelle est votre adresse électronique ?</label> + <input type="email" id="t2" name="email"> + </p> + <p> + <label for="t3">Laissez un court message</label> + <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> + </p> + <p> + <button>Soumettre</button> + </p> +</form></pre> + +<pre class="brush: css">body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 300px; + margin: 0; + padding: 0 5px; +} + +p > label { + display: block; +} + +input[type=text], input[type=email], input[type=number], textarea, -fieldset </span><span class="punctuation token">{</span> -<span class="comment token">/* requis pour composer de manière appropriée les éléments - de formulaire sur les navigateurs fondés sur WebKit */</span> - <span class="property token">-webkit-appearance</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> +fieldset { +/* requis pour composer de manière appropriée les éléments + de formulaire sur les navigateurs fondés sur WebKit */ + -webkit-appearance: none; - <span class="property token">width</span> <span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#333</span><span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + width : 100%; + border: 1px solid #333; + margin: 0; - <span class="property token">font-family</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">90%</span><span class="punctuation token">;</span> + font-family: inherit; + font-size: 90%; - <span class="property token">-moz-box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> -<span class="punctuation token">}</span> + -moz-box-sizing: border-box; + box-sizing: border-box; +} -<span class="selector token">input<span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span> - <span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">5</span>px <span class="number token">1</span>px red<span class="punctuation token">;</span> -<span class="punctuation token">}</span> +input:invalid { + box-shadow: 0 0 5px 1px red; +} -<span class="selector token">input<span class="pseudo-class token">:focus</span><span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span> - <span class="property token">outline</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +input:focus:invalid { + outline: none; +}</pre> <p>{{EmbedLiveSample("Exemple_complet", "100%", 450)}}</p> -<h3 id="Messages_d'erreur_personnalisés">Messages d'erreur personnalisés</h3> +<h3 id="Messages_adaptés_pour_les_erreurs">Messages adaptés pour les erreurs</h3> <p>Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.</p> @@ -382,22 +364,22 @@ fieldset </span><span class="punctuation token">{</span> <tbody> <tr> <td>Firefox 17 (Windows 7)</td> - <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td> + <td><img alt="Example of an error message with Firefox in French on an English page" src="error-firefox-win7.png"></td> </tr> <tr> <td>Chrome 22 (Windows 7)</td> - <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td> + <td><img alt="Example of an error message with Chrome in French on an English page" src="error-chrome-win7.png"></td> </tr> <tr> <td>Opera 12.10 (Mac OSX)</td> - <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td> + <td><img alt="Example of an error message with Opera in French on an English page" src="error-opera-macos.png"></td> </tr> </tbody> </table> <p>Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.</p> -<p>HMTL5 fournit une <a href="http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">API de contraintes de validation</a> pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :</p> +<p>HMTL5 fournit une <a href="https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">API de contraintes de validation</a> pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :</p> <pre class="brush: html"><form> <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label> @@ -405,7 +387,7 @@ fieldset </span><span class="punctuation token">{</span> <button>Envoyer</button> </form></pre> -<p>En JavaScript, il faut appeler la méthode <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()" title="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p> +<p>En JavaScript, il faut appeler la méthode <a href="/fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()" title="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p> <pre class="brush: js">var email = document.getElementById("mail"); @@ -417,7 +399,7 @@ email.addEventListener("keyup", function (event) { } });</pre> -<p>{{EmbedLiveSample("Messages_d'erreur_personnalisés", "100%", 50)}}</p> +<p>{{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}</p> <h2 id="Validation_de_formulaires_avec_JavaScript">Validation de formulaires avec JavaScript</h2> @@ -511,7 +493,7 @@ email.addEventListener("keyup", function (event) { <p>Pour les anciens navigateurs, il existe <a href="https://hyperform.js.org/">une prothèse d'émulation (<em>polyfill</em>) comme Hyperform</a>, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.</p> -<h4 id="Exemple_d'utilisation_de_l'API_de_validation_des_contraintes">Exemple d'utilisation de l'API de validation des contraintes</h4> +<h4 id="Exemple_utilisant_la_validation_des_contraintes">Exemple utilisant la validation des contraintes</h4> <p>Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :</p> @@ -528,7 +510,7 @@ email.addEventListener("keyup", function (event) { <p>Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.</p> -<p>L'attribut <code><a href="https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.</p> +<p>L'attribut <code><a href="/fr/docs/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.</p> <h5 id="CSS">CSS</h5> @@ -628,7 +610,7 @@ form.addEventListener("submit", function (event) { <p>Voici le résultat:</p> -<p>{{EmbedLiveSample("Exemple_d'utilisation_de_l'API_de_validation_des_contraintes", "100%", 130)}}</p> +<p>{{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}}</p> <p>L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. </p> @@ -644,18 +626,17 @@ form.addEventListener("submit", function (event) { <dt>Que dois-je faire si le formulaire n'est pas valide ?</dt> <dd>C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?</dd> <dt>Comment puis-je aider l'utilisateur à corriger ses données invalides?</dt> - <dd>Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :</dd> - <dd> + <dd><p>Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :</p> <ul> <li>SmashingMagazine : <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> <li>SmashingMagazine : <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> <li>Six Revision : <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> - <li>A List Apart : <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> + <li>A List Apart : <a href="https://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> </ul> </dd> </dl> -<h4 id="Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes">Exemple qui n'utilise pas l'API de validation des contraintes</h4> +<h4 id="Exemple_sans_utilisation_de_la_validation_des_contraintes">Exemple sans utilisation de la validation des contraintes</h4> <p>Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:</p> @@ -672,7 +653,7 @@ form.addEventListener("submit", function (event) { <button type="submit">Envoyer</button> </form></pre> -<p>Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.</p> +<p>Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.</p> <h5 id="CSS_2">CSS</h5> @@ -818,7 +799,7 @@ addEvent(form, "submit", function () { <p>Voici le résultat:</p> -<p>{{EmbedLiveSample("Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes", "100%", 130)}}</p> +<p>{{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}</p> <p>Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :</p> @@ -830,7 +811,7 @@ addEvent(form, "submit", function () { </li> <li>Greffons jQuery : <ul> - <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a><span class="hidden"> </span></li> + <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a> </li> </ul> </li> </ul> @@ -861,15 +842,15 @@ addEvent(form, "submit", function () { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Your_first_form">Mon premier formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form">Comment structurer un formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Basic_native_form_controls">Les widgets natifs pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data">Envoi des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Validation des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_build_custom_form_controls">Comment construire des widgets personnalisés pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> + <li><a href="/fr/docs/Learn/Forms/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> + <li><a href="/fr/docs/Learn/Forms/Styling_web_forms">Mise en forme des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Advanced_form_styling">Mise en forme avancée des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> </ul> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html index e488687b73..20e96ebc26 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html @@ -11,9 +11,9 @@ original_slug: >- --- <p>C'est le premier exemple de code qui explique <a href="/fr/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">comment construire un widget de formulaire personnalisé</a>.</p> -<h2 id="Basic_state" name="Basic_state">État initial</h2> +<h2 id="Basic_state">État initial</h2> -<h3 id="Basic_state_HTML" name="Basic_state_HTML">HTML</h3> +<h3 id="Basic_state_HTML">HTML</h3> <pre class="brush: html"><div class="select"> <span class="value">Cerise</span> @@ -26,7 +26,7 @@ original_slug: >- </ul> </div></pre> -<h3 id="Basic_state_CSS" name="Basic_state_CSS">CSS</h3> +<h3 id="Basic_state_CSS">CSS</h3> <pre class="brush: css">/* --------------- */ /* Styles Requis */ @@ -148,9 +148,9 @@ original_slug: >- <div>{{ EmbedLiveSample("Basic_state", 120, 130) }}</div> -<h2 id="Active_state" name="Active_state">État actif</h2> +<h2 id="Active_state">État actif</h2> -<h3 id="Active_state_HTML" name="Active_state_HTML">HTML</h3> +<h3 id="Active_state_HTML">HTML</h3> <pre class="brush:html"><div class="select active"> <span class="value">Cerise</span> @@ -163,7 +163,7 @@ original_slug: >- </ul> </div></pre> -<h3 id="Active_state_CSS" name="Active_state_CSS">CSS</h3> +<h3 id="Active_state_CSS">CSS</h3> <pre class="brush:css">/* --------------- */ /* Styles Requis */ @@ -284,9 +284,9 @@ original_slug: >- <div>{{ EmbedLiveSample("Active_state", 120, 130) }}</div> -<h2 id="Open_state" name="Open_state">État ouvert</h2> +<h2 id="Open_state">État ouvert</h2> -<h3 id="Open_state_HTML" name="Open_state_HTML">HTML</h3> +<h3 id="Open_state_HTML">HTML</h3> <pre class="brush:html"><div class="select active"> <span class="value">Cerise</span> @@ -299,7 +299,7 @@ original_slug: >- </ul> </div></pre> -<h3 id="Open_state_CSS" name="Open_state_CSS">CSS</h3> +<h3 id="Open_state_CSS">CSS</h3> <pre class="brush:css">/* --------------- */ /* Styles Requis */ diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html index b70d286010..ac248a0470 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html @@ -10,7 +10,7 @@ original_slug: >- --- <p>Ceci est le deuxième exemple expliquant comment <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire un formulaire personnalisé</a>.</p> -<h2 id="JS" name="JS">JS</h2> +<h2 id="JS">JS</h2> <h3 id="HTML_Content">HTML Content</h3> @@ -174,7 +174,7 @@ original_slug: >- <p>{{ EmbedLiveSample('JS', 120, 130) }}</p> -<h2 id="No_JS" name="No_JS">Sans JS</h2> +<h2 id="No_JS">Sans JS</h2> <h3 id="HTML_Content_2">HTML Content</h3> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html index 5140b97c20..2967d9d181 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html @@ -8,9 +8,9 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3 --- -<p>Ceci est le troisième exemple expliquant comment <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire des widgets de formulaire personnalisés</a>.</p> +<p>Ceci est le troisième exemple expliquant comment <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire des widgets de formulaire personnalisés</a>.</p> -<h2 id="Change_states" name="Change_states">Changement d'état</h2> +<h2>Changement d'état</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> @@ -245,4 +245,4 @@ window.addEventListener('load', function () { <h3 id="Résultat">Résultat</h3> -<p>{{ EmbedLiveSample('Change_states') }}</p> +<p>{{ EmbedLiveSample('Changement_détat') }}</p> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html index e1d738ee61..dc6f31576c 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html @@ -12,9 +12,9 @@ translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 original_slug: >- Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4 --- -<p>Ceci est le quatrième exemple expliquant <a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> +<p>Ceci est le quatrième exemple expliquant <a href="/fr/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> -<h2 id="Change_states" name="Change_states">Changement d'état</h2> +<h2>Changement d'état</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> @@ -295,4 +295,4 @@ window.addEventListener('load', function () { <h3 id="Résultat">Résultat</h3> -<p>{{ EmbedLiveSample('Change_states') }}</p> +<p>{{ EmbedLiveSample('Changement_détat') }}</p> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html index aad371bc78..caf65d51c3 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html @@ -10,7 +10,7 @@ original_slug: >- --- <p>Voici le dernier exemple expliquant <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p> -<h2 id="Change_states" name="Change_states">Changement d'état</h2> +<h2>Changement d'état</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> @@ -288,4 +288,4 @@ window.addEventListener('load', function () { <h3 id="Résultat">Résultat</h3> -<p>{{ EmbedLiveSample('Change_states') }}</p> +<p>{{ EmbedLiveSample('Changement_détat') }}</p> diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html index b97d14b86e..ed842a9e47 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html @@ -14,12 +14,12 @@ original_slug: >- --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Dans de nombreux cas les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets de formulaires HTML disponibles</a> ne suffisent pas. Si vous voulez composer certains widgets dans un <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">style avancé</a> tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.</p> +<p>Dans de nombreux cas les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets de formulaires HTML disponibles</a> ne suffisent pas. Si vous voulez composer certains widgets dans un <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">style avancé</a> tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.</p> <p>Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.</p> <div class="note"> -<p><strong>Note :</strong> Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.</p> +<p><strong>Note :</strong> Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.</p> </div> <h2 id="Conception_structure_et_sémantique">Conception, structure et sémantique</h2> @@ -28,58 +28,46 @@ original_slug: >- <p>Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :</p> -<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> +<p><img alt="The three states of a select box" src="custom-select.png"></p> <p>Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).</p> <p>En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :</p> -<dl> - <dt>Le widget est dans son état normal :</dt> - <dd> +<p>Le widget est dans son état normal :</p> + <ul> <li>la page se charge</li> <li>le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget</li> <li>le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier</li> </ul> - </dd> -</dl> - -<p> </p> -<dl> - <dd> <div class="note"> - <p><strong>Note :</strong> Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinaison Option+Tab</a>.</p> + <p><strong>Note :</strong> Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinaison Option+Tab</a>.</p> </div> - </dd> - <dt>Le widget est sans son état actif :</dt> - <dd> + + <p>Le widget est sans son état actif :</p> + <ul> <li>l'utilisateur clique sur lui</li> <li>l'utilisateur presse la touche Tabulation et obtient le focus</li> <li>le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.</li> </ul> - </dd> - <dt>Le widget est dans un état ouvert :</dt> - <dd> + + <p>Le widget est dans un état ouvert :</p> + <ul> <li>le widget est dans un état autre que ouvert et l'utilisateur clique dessus.</li> </ul> - </dd> -</dl> <p>Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :</p> -<dl> - <dt>La valeur change quand :</dt> - <dd> + <p>La valeur change quand :</p> + <ul> <li>l'utilisateur clique sur une option quand le widget est dans l'état ouvert</li> <li>l'utilisateur presse la touche <kbd>↑</kbd> ou <kbd>↓</kbd> quand le widget est dans l'état actif</li> </ul> - </dd> -</dl> <p>Enfin, définissons comment les options du widget doivent se comporter :</p> @@ -92,7 +80,7 @@ original_slug: >- <p>Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).</p> -<p>Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à <a href="https://fr.wikipedia.org/wiki/Test_utilisateur">faire des tests utilisateur</a>. Ce processus est appelé UX Design <span class="CLPzrc Y0NH2b">(<strong>U</strong>ser e<strong>X</strong>perience)</span>. Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :</p> +<p>Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à <a href="https://fr.wikipedia.org/wiki/Test_utilisateur">faire des tests utilisateur</a>. Ce processus est appelé UX Design (<strong>U</strong>ser e<strong>X</strong>perience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :</p> <ul> <li><a href="http://www.uxmatters.com/" rel="external">UXMatters.com</a></li> @@ -101,7 +89,7 @@ original_slug: >- </ul> <div class="note"> -<p><strong>Note : </strong>De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+<strong><kbd>↓</kbd></strong> sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement <code>click</code>.</p> +<p><strong>Note :</strong> De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+<strong><kbd>↓</kbd></strong> sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement <code>click</code>.</p> </div> <h3 id="Definition_de_la_structure_HTML_et_de_la_sémantique">Definition de la structure HTML et de la sémantique</h3> @@ -323,7 +311,7 @@ original_slug: >- <td>{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td> </tr> <tr> - <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td> + <td colspan="3" style="text-align: center;"><a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td> </tr> </tbody> </table> @@ -333,11 +321,11 @@ original_slug: >- <p>Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.</p> <div class="warning"> -<p>Avertissement : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.</p> +<p><strong>Attention :</strong> Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.</p> </div> <div class="note"> -<p>Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component</a> » apporte des réponses à cette question particulière. Le <a href="http://x-tags.org/">projet X-Tag</a> est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.</p> +<p><strong>Note :</strong> Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component</a> » apporte des réponses à cette question particulière. Le <a href="http://x-tags.org/">projet X-Tag</a> est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.</p> </div> <h3 id="Pourquoi_ne_fonctionne-t-il_pas">Pourquoi ne fonctionne-t-il pas ?</h3> @@ -433,7 +421,7 @@ original_slug: >- <td>{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}</td> </tr> <tr> - <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Testez le code source</a></td> + <td colspan="2" style="text-align: center;"><a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Testez le code source</a></td> </tr> </tbody> </table> @@ -459,7 +447,7 @@ original_slug: >- <li>{{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}</li> </ol> -<p>Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. C'est important, car les objets <code>Array</code> acceptent la fonction <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un <code>Array</code> et que <code>forEach</code> est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de <code>forEach à</code> {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :</p> +<p>Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un <code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. C'est important, car les objets <code>Array</code> acceptent la fonction <code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un <code>Array</code> et que <code>forEach</code> est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de <code>forEach à</code> {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :</p> <pre class="brush: js">NodeList.prototype.forEach = function (callback) { Array.prototype.forEach.call(this, callback); @@ -706,7 +694,7 @@ window.addEventListener('load', function () { }); });</pre> -<p>Dans le code ci-dessus, il faut noter l'utilisation de la propriété <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.</p> +<p>Dans le code ci-dessus, il faut noter l'utilisation de la propriété <code><a href="/fr/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.</p> <p>Et voilà, nous avons terminé ! Voici le résultat :</p> @@ -734,11 +722,11 @@ window.addEventListener('load', function () { <p>Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !</p> -<p>Heureusement, il existe une solution et elle s'appelle <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA signifie « Accessible Rich Internet Application » et c'est une<a href="http://www.w3.org/TR/wai-aria/" rel="external"> norme W3C </a>spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.</p> +<p>Heureusement, il existe une solution et elle s'appelle <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA signifie « Accessible Rich Internet Application » et c'est une<a href="http://www.w3.org/TR/wai-aria/" rel="external"> norme W3C </a>spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.</p> <h3 id="L'attribut_role">L'attribut <code>role</code></h3> -<p>L'attribut clé utilisé par <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est l'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. L'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role </code></a> accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle <code>option</code>).</p> +<p>L'attribut clé utilisé par <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est l'attribut <a href="/fr/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. L'attribut <a href="/fr/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role </code></a> accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de <code><a href="/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle <code>option</code>).</p> <p>Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle <code>grid</code>, et l'élément {{HTMLElement("ul")}} correspond au rôle <code>list</code>. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle <code>listbox</code> de notre widget remplacera le rôle <code>list</code> de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle <code>presentation</code>. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.</p> @@ -759,12 +747,12 @@ window.addEventListener('load', function () { </div></pre> <div class="note"> -<p><strong>Note :</strong> Inclure à la fois l'attribut <code>role</code> et l'attribut <code>class</code> n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selecteurs d'attribut CSS</a>.</p> +<p><strong>Note :</strong> Inclure à la fois l'attribut <code>role</code> et l'attribut <code>class</code> n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les <a href="/fr/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selecteurs d'attribut CSS</a>.</p> </div> <h3 id="L'attribut_aria-selected">L'attribut <code>aria-selected</code></h3> -<p>Utiliser l'attribut <code>role</code> ne suffit pas. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : <code>aria-selected</code>.</p> +<p>Utiliser l'attribut <code>role</code> ne suffit pas. <a href="/fr/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : <code>aria-selected</code>.</p> <p>L'attribut <code>aria-selected</code> s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction <code>updateValue()</code> :</p> @@ -825,7 +813,7 @@ window.addEventListener('load', function () { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html index cb36b36527..672ae945dd 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html +++ b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/ --- <p>Ceci est un exemple de formulaire de paiement basique extrait de l'article <a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a>.</p> -<h2 id="Un_formulaire_de_paiement" name="Un_formulaire_de_paiement">Un formulaire de paiement</h2> +<h2 id="Un_formulaire_de_paiement">Un formulaire de paiement</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/index.html index a8f3079705..7f098d890e 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.html @@ -17,13 +17,13 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</p> +<p>Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow">connaissances de base du HTML</a>.</td> + <td>Notions concernant les ordinateurs et les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">connaissances de base du HTML</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -40,12 +40,15 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Nous l'avons déjà rencontré dans l'article précédent.</p> -<div class="note"><strong>Note :</strong> Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.</div> +<div class="note"> + <p><strong>Note :</strong> Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé. + </p> +</div> <p>Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.</p> <div class="note"> -<p><strong>Note</strong>: HTML5 introduit l'attribut <code>form</code> dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.</p> +<p><strong>Note :</strong> HTML5 introduit l'attribut <code>form</code> dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.</p> </div> <h2 id="Les_éléments_<fieldset>_et_<legend>">Les éléments <fieldset> et <legend></h2> @@ -56,26 +59,26 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Voici un petit exemple :</p> -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">>Taille du jus de fruits</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>small<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Petite<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>medium<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Moyen<span class="tag token"><span class="tag token"><span class="punctuation token">ne</</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>large<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Grand<span class="tag token"><span class="tag token"><span class="punctuation token">e</</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush:html"><form> + <fieldset> + <legend>Taille du jus de fruits</legend> + <p> + <input type="radio" name="size" id="size_1" value="small"> + <label for="size_1">Petite</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium"> + <label for="size_2">Moyenne</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large"> + <label for="size_3">Grande</label> + </p> + </fieldset> +</form></pre> <div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">directement aussi</a>).</p> </div> <p>En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.</p> @@ -88,7 +91,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><label for="name">Nom :</label> <input type="text" id="name" name="user_name"></pre> <p>Avec un élément <code><label></code> correctement associé à <code><input></code> par l'intermédiaire respectivement des attributs <code>for</code> et <code>id</code> (l'attribut <code>for</code> de <label> référence l'attibut <code>id</code> du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».</p> @@ -96,9 +99,9 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Nom : <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><label for="name"> + Nom : <input type="text" id="name" name="user_name"> +</label></pre> <p>Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut <code>for</code> parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.</p> @@ -108,19 +111,19 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Par exemple :</p> -<pre class="brush:html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>J'aime les cerises<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_cherry<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>J'aime les bananes<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_banana<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush:html"><form> + <p> + <label for="taste_1">J'aime les cerises</label> + <input type="checkbox" id="taste_1" name="taste_cherry" value="1"> + </p> + <p> + <label for="taste_2">J'aime les bananes</label> + <input type="checkbox" id="taste_2" name="taste_banana" value="2"> + </p> +</form></pre> <div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">directement aussi</a>).</p> +<p><strong>Note :</strong> Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">directement aussi</a>).</p> </div> <h3 id="Étiquettes_multiples">Étiquettes multiples</h3> @@ -129,29 +132,29 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Considérons cet exemple :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Les champs obligatoires sont suivis de <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- Donc ceci : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- sera mieux programmé ainsi : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- mais ceci est probablement encore meilleur : --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p> + +<!-- Donc ceci : --> +<div> + <label for="username">Nom :</label> + <input type="text" name="username"> + <label for="username"><abbr title="required">*</abbr></label> +</div> + +<!-- sera mieux programmé ainsi : --> +<div> + <label for="username"> + <span>Nom :</span> + <input id="username" type="text" name="username"> + <abbr title="required">*</abbr> + </label> +</div> + +<!-- mais ceci est probablement encore meilleur : --> +<div> + <label for="username">Nom :<abbr title="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div></pre> <p>Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.</p> @@ -162,11 +165,11 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML </ul> <div class="note"> -<p><strong>Note</strong> : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.</p> +<p><strong>Note :</strong> Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.</p> </div> <div class="note"> -<p><strong>Note</strong> : Vous trouverez cet exemple sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">directement aussi</a>). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !</p> +<p><strong>Note :</strong> Vous trouverez cet exemple sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">directement aussi</a>). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !</p> </div> <h2 id="Structures_HTML_courantes_dans_les_formulaires">Structures HTML courantes dans les formulaires</h2> @@ -185,22 +188,22 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <p>Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (<a href="/fr/docs/Learn/HTML/Forms/The_native_form_widgets">Les widgets natifs pour formulaire</a>). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.</p> -<ol start="1" style="list-style-type: decimal;"> +<ol> <li>Pour commencer, faites une copie locale de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle vierge</a> et des <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS pour notre formulaire de paiement </a> dans un nouveau répertoire.</li> <li>Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : - <pre class="brush: html line-numbers language-html"><code class="language-html"><link href="payment-form.css" rel="stylesheet"></code></pre> + <pre class="brush: html"><link href="payment-form.css" rel="stylesheet"></pre> </li> <li>Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : - <pre class="brush: html line-numbers language-html"><form> + <pre class="brush: html"><form> </form></pre> </li> <li>Entre les balises <code><form></code>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : - <pre class="brush: html line-numbers language-html"><code class="language-html"><h1>Formulaire de paiement</h1> -<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p></code></pre> + <pre class="brush: html"><h1>Formulaire de paiement</h1> +<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p></pre> </li> <li>Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : - <pre class="brush: html line-numbers language-html"><code class="language-html"><section> + <pre class="brush: html"><section> <h2>Informations de contact</h2> <fieldset> <legend>Qualité</legend> @@ -240,10 +243,10 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML </label> <input type="password" id="pwd" name="password"> </p> -</section></code></pre> +</section></pre> </li> <li>Nous arrivons maintenant à la deuxième <code><section></code> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <code><p></code>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément <code><input></code> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <code><input></code> de type <code>date</code> pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : - <pre class="brush: html line-numbers language-html"><code class="language-html"> + <pre class="brush: html"> <section> <h2>Informations de paiement</h2> <p> @@ -271,10 +274,10 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML </label> <input type="text" id="date" name="expiration"> </p> -</section></code></pre> +</section></pre> </li> <li>La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type <code>submit</code>, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : - <pre class="brush: html line-numbers language-html"><code class="language-html"><p> <button type="submit">Valider le paiement</button> </p></code></pre> + <pre class="brush: html"><p> <button type="submit">Valider le paiement</button> </p></pre> </li> </ol> @@ -298,7 +301,7 @@ original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><span>Comment structurer un formulaire HTML</span></li> + <li>Comment structurer un formulaire HTML</li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html index 6b9dc84cc2..7f12753fa5 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la <a href="http://www.mozilla.org/en-US/firefox/organizations/">version ESR,</a> sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».</p> +<p>Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la <a href="http://www.mozilla.org/en-US/firefox/organizations/">version ESR,</a> sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».</p> <p>Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.</p> @@ -67,8 +67,8 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers </thead> <tbody> <tr> - <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSX" src="https://mdn.mozillademos.org/files/16009/choix_chrome.png" style="height: 32px; width: 227px;"></th> - <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Firefox" src="https://mdn.mozillademos.org/files/16010/choix_firefox.png" style="height: 36px; width: 227px;"></th> + <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSX" src="choix_chrome.png"></th> + <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Firefox" src="choix_firefox.png"></th> </tr> </tbody> </table> @@ -189,7 +189,7 @@ input.button { <p>L'équipe de Modernizr fait une maintenance opportune de grande liste de « <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="external">polyfills »</a>. Prenez celui dont vous avez besoin.</p> <div class="note"> -<p><strong>Note :</strong> Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de <a href="http://modernizr.com/docs/" rel="external"> la documentation de Modernizr</a>.</p> +<p><strong>Note :</strong> Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de <a href="http://modernizr.com/docs/" rel="external"> la documentation de Modernizr</a>.</p> </div> <h3 id="Faites_attention_aux_performances">Faites attention aux performances</h3> @@ -208,7 +208,7 @@ input.button { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/index.html b/files/fr/learn/forms/index.html index d4d758bdfc..76832228f3 100644 --- a/files/fr/learn/forms/index.html +++ b/files/fr/learn/forms/index.html @@ -13,9 +13,7 @@ original_slug: Web/Guide/HTML/Formulaires --- <p>{{learnSidebar}}</p> -<blockquote> -<p><span class="seoSummary">Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML</span>. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.</p> -</blockquote> +<p>Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.</p> <h2 id="Prérequis">Prérequis</h2> @@ -24,53 +22,53 @@ original_slug: Web/Guide/HTML/Formulaires <p>Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des <a href="/fr/Apprendre/CSS/Introduction_à_CSS">CSS</a> et du <a href="/fr/docs/Apprendre/JavaScript">JavaScript</a>.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> -<h2 id="Éléments_de_base"><a id="Basic_guides" name="Basic_guides"></a>Éléments de base</h2> +<h2 id="Éléments_de_base">Éléments de base</h2> <dl> <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></dt> <dd>Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></dt> <dd>Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</dd> </dl> <h2 id="Quels_sont_les_widgets_pour_formulaire_disponibles">Quels sont les widgets pour formulaire disponibles ?</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></dt> <dd>Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.</dd> </dl> <h2 id="Validation_et_soumission_des_données_de_formulaires">Validation et soumission des données de formulaires</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a></dt> <dd>Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Validation des données de formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Validation des données de formulaire</a></dt> <dd>Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.</dd> </dl> <h2 id="Guides_avancés">Guides avancés</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a></dt> <dd>Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></dt> <dd>Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></dt> <dd>Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.</dd> </dl> <h2 id="Guides_de_mise_en_forme_des_formulaires">Guides de mise en forme des formulaires</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></dt> <dd>Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></dt> <dd>Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a></dt> + <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a></dt> <dd>Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.</dd> </dl> diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html index 4c702ca4c0..5dea78fc0c 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -15,7 +15,7 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ --- <div>{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.</p> +<p>Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.</p> <h2 id="Comment_lire_les_tables">Comment lire les tables</h2> @@ -92,15 +92,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> @@ -109,9 +109,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> @@ -120,15 +120,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li> @@ -142,9 +142,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> <ol> <li>Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.</li> @@ -152,33 +152,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td>Voir la note à propos de Opera</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.</li> @@ -186,21 +186,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> </tbody> @@ -209,9 +209,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> @@ -219,9 +219,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li> @@ -230,9 +230,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -258,15 +258,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li> @@ -274,21 +274,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li> @@ -301,57 +301,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}.</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> </tbody> @@ -360,15 +360,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Yes</td> + <td>Yes</td> <td> <ol> <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> @@ -376,9 +376,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -406,15 +406,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li> @@ -422,21 +422,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li> @@ -449,55 +449,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}.</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -508,22 +508,22 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière‑plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td colspan="1" rowspan="3"> <p>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</p> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> </tr> </tbody> </table> @@ -544,9 +544,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> <ol> <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li> @@ -554,9 +554,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> <ol> <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li> @@ -564,21 +564,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -587,55 +587,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -646,21 +646,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -684,9 +684,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("width")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</li> @@ -694,27 +694,27 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[2]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.</li> @@ -728,9 +728,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("color")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -738,9 +738,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("font")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -748,9 +748,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -758,9 +758,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.</li> @@ -768,9 +768,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément {{HTMLElement("select")}}.</li> @@ -778,9 +778,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -789,15 +789,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -806,9 +806,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -821,9 +821,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td colspan="1" rowspan="3"> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -831,14 +831,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Partiel</td> + <td>Partiel</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> </tr> </tbody> </table> @@ -859,33 +859,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.</li> @@ -898,21 +898,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Oui</td> + <td>Oui</td> <td>Voir la note à propos de {{cssxref("line-height")}}.</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li> @@ -920,9 +920,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.</li> @@ -930,9 +930,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>Uniquement pris en charge par Firefox et IE9+.</li> @@ -940,27 +940,27 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li> @@ -973,15 +973,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Yes</td> + <td>Yes</td> <td> <ol> <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li> @@ -989,9 +989,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1017,33 +1017,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1052,57 +1052,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1111,21 +1111,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1147,33 +1147,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1182,15 +1182,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("font")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1198,9 +1198,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.</li> @@ -1208,21 +1208,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Agit plus ou moins comme une marge supplementaire en dehors du widget.</li> @@ -1230,21 +1230,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1253,9 +1253,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1263,15 +1263,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Partiel</td> <td> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1299,33 +1299,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1334,57 +1334,57 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("color")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("font")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("letter-spacing")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-align")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-decoration")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-indent")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-overflow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("text-transform")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1393,21 +1393,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Non</td> + <td>Non</td> <td> </td> </tr> </tbody> @@ -1431,15 +1431,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>No</td> + <td>Oui</td> <td> <ol> <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li> @@ -1447,21 +1447,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>No</td> + <td>Oui</td> <td> <ol> <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li> @@ -1474,55 +1474,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1533,9 +1533,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td colspan="1" rowspan="3"> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1543,14 +1543,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> </tr> </tbody> </table> @@ -1573,33 +1573,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Oui</td> + <td>Partiel</td> <td> <ol> <li>Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.</li> @@ -1612,55 +1612,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1671,9 +1671,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td colspan="1" rowspan="3"> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1681,14 +1681,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> </tr> </tbody> </table> @@ -1711,15 +1711,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("height")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td> <ol> <li>Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de <code>range</code>.</li> @@ -1727,21 +1727,21 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Non</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Partiel</td> + <td>Oui</td> <td> <ol> <li>La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.</li> @@ -1754,55 +1754,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1813,9 +1813,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("background")}}</th> + <td>No</td> + <td>No</td> <td colspan="1" rowspan="3"> <ol> <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li> @@ -1823,14 +1823,14 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>No</td> + <td>No</td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>No</td> + <td>No</td> </tr> </tbody> </table> @@ -1851,33 +1851,33 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("width")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("height")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("border")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("margin")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("padding")}}</th> + <td>Oui</td> + <td>Oui</td> <td> </td> </tr> </tbody> @@ -1886,55 +1886,55 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Texte et polices</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top;">N.A.</td> <td style="text-align: center; vertical-align: top;">N.A.</td> <td> </td> @@ -1945,15 +1945,15 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td> + <th scope="row">{{cssxref("background")}}</th> + <td>Oui</td> + <td>Oui</td> <td colspan="1"> </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("border-radius")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td colspan="1"> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1961,9 +1961,9 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ </td> </tr> <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td> + <th scope="row">{{cssxref("box-shadow")}}</th> + <td>Partiel</td> + <td>Partiel</td> <td colspan="1"> <ol> <li>IE9 ne prend pas en charge cette propriété.</li> @@ -1979,7 +1979,7 @@ original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_ <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html index 9585d26c64..c2736e9d5b 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html @@ -17,9 +17,9 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f --- <div>{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</div> -<p class="summary">Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</p> +<p>Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -42,9 +42,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f <p>Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p> </div> <h2 id="on_the_client_side_defining_how_to_send_the_data">Côté client : définition de la méthode d'envoi des données</h2> @@ -71,9 +70,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f <pre class="brush: html"><form action="#"></pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a>, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p> +<div class="note"> + <p><strong>Note :</strong> Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a>, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p> </div> <h3 id="the_method_attribute">L'attribut method</h3> @@ -118,9 +116,8 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f <pre>GET /?say=Hi&to=Mom HTTP/1.1 Host: foo.com</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> </div> <h4 id="the_post_method">La méthode POST</h4> @@ -154,9 +151,8 @@ say=Hi&to=Mom</pre> <p>L'en-tête <code>Content-Length </code>indique la taille du corps, et l'en-tête <code>Content-Type</code> indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> </div> <h3 id="viewing_http_requests">Voir les requêtes HTTP</h3> @@ -202,10 +198,9 @@ say=Hi&to=Mom</pre> <p><img alt="L'exécution du code PHP déclenche l'affichage de Hi Mom" src="php-result.png"></p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="https://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> - <p></p>Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu <em>MAMP</em> > <em>Préférences</em> > <em>PHP</em>, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="https://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> + <p>Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu <em>MAMP</em> > <em>Préférences</em> > <em>PHP</em>, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).</p> </div> <h3 id="example_python">Exemple: Python</h3> @@ -233,9 +228,8 @@ if __name__ == "__main__": <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction <code>hello()</code> vue plus haut qui s'exécute quand l'URL <code>/hello</code> est chargée dans le navigateur.</li> </ul> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p> +<div class="note"> + <p><strong>Note :</strong> À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p> </div> <h3 id="other_languages_and_frameworks">Autres langages et canevas de structures</h3> @@ -253,9 +247,8 @@ if __name__ == "__main__": <p>Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours <em>facile</em>. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p> +<div class="note"> + <p><strong>Note :</strong> Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p> </div> <h2 id="a_special_case_sending_files">Cas particulier : envoyer des fichiers</h2> @@ -286,9 +279,8 @@ if __name__ == "__main__": </div> </form></pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.</p> +<div class="note"> + <p><strong>Note :</strong> Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.</p> </div> <h2 id="security_issues">Problèmes courants de sécurité</h2> @@ -331,7 +323,7 @@ if __name__ == "__main__": <ul> <li><a href="/fr/docs/Learn/Forms/Your_first_form">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Learn/Forms/Basic_native_form_controls">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Learn/Forms/HTML5_input_types">Les types de saisie HTML5</a></li> <li><a href="/fr/docs/Learn/Forms/Other_form_controls">Autres contrôles de formulaires</a></li> diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.html b/files/fr/learn/forms/sending_forms_through_javascript/index.html index 73a9f6e15b..571ede2a5b 100644 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.html +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript --- <div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div> -<p class="summary">Comme dans le <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">précédent article</a>, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.</p> +<p>Comme dans le <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">précédent article</a>, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.</p> <h2 id="Un_formulaire_n'est_pas_toujours_un_<form>">Un formulaire n'est pas toujours un <form></h2> @@ -22,7 +22,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript <h3 id="Comment_est-ce_différent">Comment est-ce différent ?</h3> -<p><a href="/en-US/docs/AJAX">AJAX</a> utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.</p> +<p><a href="/fr/docs/AJAX">AJAX</a> utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.</p> <div class="note"> <p><strong>Note :</strong> Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, <a href="http://en.wikipedia.org/wiki/JSONP" rel="external">JSONP</a> combiné à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval"><code>eval()</code></a>. Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Glossaire/JSON">JSON</a>, mais ce sont vraiment des navigateurs anciens ! <strong>Évitez ces techniques.</strong></p> @@ -206,7 +206,7 @@ original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript <p>La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.</p> <div class="warning"> -<p><strong>Avertissement :</strong> <strong>Évitez d'employer cette technique.</strong> Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une <a href="https://fr.wikipedia.org/wiki/Cross-site_scripting" rel="external">attaque par injection de script</a>. Si vous utilisez HTTPS, il reste possible de perturber la <a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">politique de la même origine</a>, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.</p> +<p><strong>Attention :</strong> <strong>Évitez d'employer cette technique.</strong> Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une <a href="https://fr.wikipedia.org/wiki/Cross-site_scripting" rel="external">attaque par injection de script</a>. Si vous utilisez HTTPS, il reste possible de perturber la <a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">politique de la même origine</a>, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.</p> </div> <p>Voici un exemple :</p> @@ -260,7 +260,7 @@ function sendData(data) { <p> </p> -<h2 id="Gestion_des_données_binaires"><span>Gestion des données binaires</span></h2> +<h2 id="Gestion_des_données_binaires">Gestion des données binaires</h2> <p>Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <code><input type="file"></code>, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.</p> @@ -428,7 +428,7 @@ window.addEventListener('load', function () { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/styling_web_forms/index.html b/files/fr/learn/forms/styling_web_forms/index.html index ea8b60a29b..95ddead893 100644 --- a/files/fr/learn/forms/styling_web_forms/index.html +++ b/files/fr/learn/forms/styling_web_forms/index.html @@ -81,7 +81,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML -webkit-appearance: none; }</pre> -<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p> +<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="search-chrome-macos.png"></p> <p>Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété <code>-webkit-appearance</code> tandis que le second a recours à la propriété <code>-webkit-appearance:none</code>. La différence est notable.</p> @@ -96,7 +96,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <p>La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.</p> -<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p> +<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="font-firefox-macos.png"></p> <p>Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.</p> @@ -115,7 +115,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML box-sizing: border-box; }</pre> -<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p> +<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="size-chrome-win7.png"></p> <p>Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS <code>border-box</code>. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.</p> @@ -156,7 +156,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <p>Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :</p> -<p><img alt="C'est ce que nous voulons réaliser avec le HTML et les CSS." src="https://mdn.mozillademos.org/files/16012/fr-carte.png" style="border-style: solid; border-width: 1px; height: 315px; width: 465px;"></p> +<p><img alt="C'est ce que nous voulons réaliser avec le HTML et les CSS." src="fr-carte.png"></p> <h3 id="HTML_2">HTML</h3> @@ -203,7 +203,7 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <li>Allez sur le <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de fontsquirrel.</li> <li>En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.</li> <li>Décompressez le fichier zip fourni.</li> - <li>Dans le contenu décompressé vous trouverez deux fichiers <code>.woff</code> et deux fichiers <code>.woff2</code>. Copiez ces quatre fichiers dans un répertoire nommé <code>fonts</code>, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> pour des informations plus détaillées.</li> + <li>Dans le contenu décompressé vous trouverez deux fichiers <code>.woff</code> et deux fichiers <code>.woff2</code>. Copiez ces quatre fichiers dans un répertoire nommé <code>fonts</code>, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les <a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> pour des informations plus détaillées.</li> </ol> <h3 id="Le_CSS">Le CSS</h3> @@ -216,18 +216,18 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML <pre class="brush: css">@font-face{ font-family : "handwriting"; -<code class="language-css"><span class="property token"> src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/journal-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>, - <span class="token url">url('fonts/journal-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span> - <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code> +<code class="language-css"> src: url('fonts/journal-webfont.woff2') format('woff2'), + url('fonts/journal-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal;</code> } @font-face{ font-family : "typewriter"; -<code class="language-css"> <span class="property token">src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/veteran_typewriter-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>, - <span class="token url">url('fonts/veteran_typewriter-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span> - <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code> +<code class="language-css"> src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), + url('fonts/veteran_typewriter-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal;</code> } body { @@ -327,7 +327,7 @@ form { overflow: auto; }</pre> -<p>L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a> !</p> +<p>L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les <a href="/fr/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a> !</p> <pre class="brush: css">button { position : absolute; @@ -379,7 +379,7 @@ button:focus { <ul> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> diff --git a/files/fr/learn/forms/your_first_form/example/index.html b/files/fr/learn/forms/your_first_form/example/index.html index 70455c78a8..d5268524e3 100644 --- a/files/fr/learn/forms/your_first_form/example/index.html +++ b/files/fr/learn/forms/your_first_form/example/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple --- <p>Ceci est l'exemple pour l'article <a href="/fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mon premier formulaire HTML</a>.</p> -<h2 id="Un_formulaire_simple" name="Un_formulaire_simple">Un formulaire simple</h2> +<h2 id="Un_formulaire_simple">Un formulaire simple</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> diff --git a/files/fr/learn/forms/your_first_form/index.html b/files/fr/learn/forms/your_first_form/index.html index ca8631cf21..4ee759f619 100644 --- a/files/fr/learn/forms/your_first_form/index.html +++ b/files/fr/learn/forms/your_first_form/index.html @@ -15,9 +15,9 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML --- <p>{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}</p> -<p class="summary">Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.</p> +<p>Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -49,7 +49,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.</p> -<p><img alt="Le croquis du formulaire que l'on veut créer" src="https://mdn.mozillademos.org/files/15999/0006.png" style="border-style: solid; border-width: 1px; height: 375px; width: 400px;"></p> +<p><img alt="Le croquis du formulaire que l'on veut créer" src="0006.png"></p> <p>Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.</p> @@ -63,7 +63,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :</p> -<pre class="brush:html; notranslate"><form action="/<code class="language-html">my-handling-form-page</code>" method="post"> +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> </form></pre> @@ -86,7 +86,7 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.</p> -<pre class="brush:html; notranslate"><form action="/ma-page-de-traitement" method="post"> +<pre class="brush:html;"><form action="/ma-page-de-traitement" method="post"> <div> <label for="name">Nom :</label> <input type="text" id="name" name="user_name"> @@ -112,17 +112,17 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML <p>Last but not least, remarquez la syntaxe de <code><input></code> vs <code><textarea></textarea></code>. C'est une des bizarreries du HTML. La balise <code><input></code> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut <code>value</code> de la manière suivante :</p> -<pre class="brush:html; notranslate"><input type="text" value="par défaut cet élément sera renseigné avec ce texte"></pre> +<pre class="brush:html;"><input type="text" value="par défaut cet élément sera renseigné avec ce texte"></pre> <p>A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :</p> -<pre class="brush:html; notranslate"><textarea>par défaut cet élément sera renseigné avec ce texte</textarea></pre> +<pre class="brush:html;"><textarea>par défaut cet élément sera renseigné avec ce texte</textarea></pre> <h3 id="Lélément_HTMLElementbutton">L'élément {{HTMLElement("button")}}</h3> <p>Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante <code></form> :</code></p> -<pre class="brush:html; notranslate"> <div class="button"> +<pre class="brush:html;"> <div class="button"> <button type="submit">Envoyer le message</button> </div> </pre> @@ -136,30 +136,30 @@ original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML </ul> <div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <code><input type="submit"></code>. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.</p> +<p><strong>Note :</strong> Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <code><input type="submit"></code>. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.</p> </div> <h2 id="Mise_en_page_élémentaire_du_formulaire">Mise en page élémentaire du formulaire</h2> <p>Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.</p> -<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p> +<p><img alt="" src="form-no-style.png"></p> <div class="note"> -<p><strong>Note :</strong> Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> </a>ou<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> également directement</a>).</p> +<p><strong>Note :</strong> Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> </a>ou<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> également directement</a>).</p> </div> <p>Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.</p> <p>Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :</p> -<pre class="brush: html notranslate"><style> +<pre class="brush: html"><style> </style></pre> <p>Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :</p> -<pre class="brush:css; notranslate">form { +<pre class="brush:css; ">form { /* Uniquement centrer le formulaire sur la page */ margin: 0 auto; width: 400px; @@ -219,10 +219,10 @@ button { <p>Désormais notre formulaire a une bien meilleure allure.</p> -<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> +<p><img alt="" src="form-style.png"></p> <div class="note"> -<p><strong>Note</strong> : Il est sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (à voir aussi <a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">directement</a>).</p> +<p><strong>Note :</strong> Il est sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (à voir aussi <a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">directement</a>).</p> </div> <h2 id="Envoyer_les_données_au_serveur_Web">Envoyer les données au serveur Web</h2> @@ -235,7 +235,7 @@ button { <p>Pour nommer vos données vous devez utiliser l'attribut <code>name</code> pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :</p> -<pre class="brush:html; notranslate">form action="/my-handling-form-page" method="post"> +<pre class="brush:html; ">form action="/my-handling-form-page" method="post"> <div> <label for="name">Nom :</label> <input type="text" id="name" name="user_name" /> diff --git a/files/fr/learn/front-end_web_developer/index.html b/files/fr/learn/front-end_web_developer/index.html index 87618a86ca..1656374720 100644 --- a/files/fr/learn/front-end_web_developer/index.html +++ b/files/fr/learn/front-end_web_developer/index.html @@ -29,13 +29,13 @@ original_slug: Apprendre/Front-end_web_developer <p>Vous n'avez pas besoin de connaissances préalables pour commencer ce cours. Tout ce dont vous avez besoin, c'est d'un ordinateur capable de faire fonctionner des navigateurs web modernes, d'une connexion internet et d'une volonté d'apprendre.</p> -<p>Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module <a href="/en-US/docs/Learn/Getting_started_with_the_web">Commencer avec le web</a>.</p> +<p>Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le web</a>.</p> <h2 id="Obtenir_de_laide">Obtenir de l'aide</h2> <p>Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.</p> -<p>Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article <a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre <a href="https://discourse.mozilla.org/c/mdn/learn/">forum de discussion</a>.</p> +<p>Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article <a href="/fr/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre <a href="https://discourse.mozilla.org/c/mdn/learn/">forum de discussion</a>.</p> <p>Allons-y. Bonne chance !</p> @@ -56,9 +56,9 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Guides_fondamentaux">Guides fondamentaux</h4> <ul> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation des logiciels de base</a> — configuration des outils de base (15 min de lecture)</li> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Contexte du web et des standards du web</a> (45 min de lecture)</li> - <li><a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> (45 min de lecture)</li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation des logiciels de base</a> — configuration des outils de base (15 min de lecture)</li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">Contexte du web et des standards du web</a> (45 min de lecture)</li> + <li><a href="/fr/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> (45 min de lecture)</li> </ul> <h3 id="Sémantique_et_structure_avec_HTML">Sémantique et structure avec HTML</h3> @@ -76,9 +76,9 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Guides_fondamentaux_2">Guides fondamentaux</h4> <ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> (15–20 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimédia et intégration</a> (15–20 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/HTML/Tables">Tableaux HTML</a> (5–10 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> (15–20 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Multimédia et intégration</a> (15–20 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/HTML/Tables">Tableaux HTML</a> (5–10 heures de lecture/exercices)</li> </ul> <h3 id="Design_et_mise_en_page_avec_le_CSS">Design et mise en page avec le CSS</h3> @@ -87,7 +87,7 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Prérequis_4">Prérequis</h4> -<p>Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">l'introduction au HTML</a> d'abord.</p> +<p>Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">l'introduction au HTML</a> d'abord.</p> <h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_3">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> @@ -96,16 +96,16 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Guides_fondamentaux_3">Guides fondamentaux</h4> <ul> - <li><a href="/en-US/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> (10–15 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks">Les élements de base du CSS</a> (35–45 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/CSS/Styling_text">Mise en forme du texte</a> (15–20 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout">Mise en page CSS</a> (30–40 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> (10–15 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks">Les élements de base du CSS</a> (35–45 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/CSS/Styling_text">Mise en forme du texte</a> (15–20 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout">Mise en page CSS</a> (30–40 heures de lecture/exercices)</li> </ul> <h4 id="Ressources_complémentaires">Ressources complémentaires</h4> <ul> - <li><a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li> + <li><a href="/fr/docs/Web/CSS/Layout_cookbook">CSS layout cookbook</a></li> </ul> <h3 id="Interactivité_avec_JavaScript">Interactivité avec JavaScript</h3> @@ -114,7 +114,7 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Prérequis_5">Prérequis</h4> -<p>ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> d'abord.</p> +<p>ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'<a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a> d'abord.</p> <h4 id="Comment_saurai-je_que_je_suis_prêt_à_passer_à_autre_chose_4">Comment saurai-je que je suis prêt à passer à autre chose ?</h4> @@ -123,11 +123,11 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Guides_fondamentaux_4">Guides fondamentaux</h4> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas avec JavaScript</a> (30–40 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">Les éléments de base de JavaScript</a> (25–35 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">API web côté client</a> (30–40 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a> (25–35 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">JavaScript asynchrone</a> (25–35 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas avec JavaScript</a> (30–40 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/JavaScript/Building_blocks">Les éléments de base de JavaScript</a> (25–35 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs">API web côté client</a> (30–40 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a> (25–35 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/JavaScript/Asynchronous">JavaScript asynchrone</a> (25–35 heures de lecture/exercices)</li> </ul> <h3 id="Formulaires_web_-_Travailler_avec_les_données_des_utilisateurs">Formulaires web - Travailler avec les données des utilisateurs</h3> @@ -145,7 +145,7 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Guides_fondamentaux_5">Guides fondamentaux</h4> <ul> - <li><a href="/en-US/docs/Learn/Forms">Fomulaires web</a> (40–50 heures)</li> + <li><a href="/fr/docs/Learn/Forms">Fomulaires web</a> (40–50 heures)</li> </ul> <h3 id="Faire_profiter_le_Web_à_tout_le_monde">Faire profiter le Web à tout le monde</h3> @@ -163,8 +163,8 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Guides_fondamentaux_6">Guides fondamentaux</h4> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests multi-navigateurs</a> (25–30 heures de lecture/exercices)</li> - <li><a href="/en-US/docs/Learn/Accessibility">Accessibilité</a> (20–25 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests multi-navigateurs</a> (25–30 heures de lecture/exercices)</li> + <li><a href="/fr/docs/Learn/Accessibility">Accessibilité</a> (20–25 heures de lecture/exercices)</li> </ul> <h3 id="Outils_modernes">Outils modernes</h3> @@ -182,9 +182,9 @@ original_slug: Apprendre/Front-end_web_developer <h4 id="Guides_fondamentaux_7">Guides fondamentaux</h4> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git et GitHub</a> (5 heures de lecture)</li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Comprendre les outils de développement web côté client</a> (20–25 heures de lecture)</li> + <li><a href="/fr/docs/Learn/Tools_and_testing/GitHub">Git et GitHub</a> (5 heures de lecture)</li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Comprendre les outils de développement web côté client</a> (20–25 heures de lecture)</li> <li> - <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendre les frameworks JavaScript côté client</a> (30-60 heures de lecture/exercices)</p> + <p><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendre les frameworks JavaScript côté client</a> (30-60 heures de lecture/exercices)</p> </li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.html b/files/fr/learn/getting_started_with_the_web/css_basics/index.html index 894d563d3a..e4ea41e708 100644 --- a/files/fr/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.html @@ -14,9 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p>Les CSS (<em>Cascading Style Sheets</em> en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. <em>Les bases des CSS</em> présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?</p> -</div> <h2 id="Donc_que_sont_les_CSS_réellement">Donc, que sont les CSS, réellement ?</h2> @@ -38,13 +36,13 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS <li>Sauvegardez <code>index.html</code> puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :</li> </ol> -<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !</p> +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="website-screenshot-styled.png">Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !</p> <h3 id="Anatomie_d'une_règle_CSS">Anatomie d'une règle CSS</h3> <p>Regardons un peu plus en détails ce que nous avons écrit en CSS :</p> -<p><img alt="Diagramme expliquant les différents éléments d'une déclaration CSS" src="https://mdn.mozillademos.org/files/11525/CSS.svg" style="display: block; height: 293px; margin: 0px auto; width: 353px;"></p> +<p><img alt="Diagramme expliquant les différents éléments d'une déclaration CSS" src="CSS.svg"></p> <p>Cette structure s'appelle <strong>un ensemble de règles </strong>(ou seulement « une règle »). Les différentes parties se nomment :</p> @@ -136,7 +134,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS <p>Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier <code>style.css</code> pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.</p> <ol> - <li>Pour commencer, revenez quelques étapes en arrière et récupérez le <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">résultat de Google Fonts</a> enregistré quelque part. Ensuite, ajoutez l'élément <code><link ... ></code> quelque part au sein de <code>head</code> dans le fichier <code>index.html</code> (c'est-à-dire quelque part entre les balises <code><head></code> et <code></head></code>). Ça devrait ressembler à : + <li>Pour commencer, revenez quelques étapes en arrière et récupérez le <a href="/fr/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">résultat de Google Fonts</a> enregistré quelque part. Ensuite, ajoutez l'élément <code><link ... ></code> quelque part au sein de <code>head</code> dans le fichier <code>index.html</code> (c'est-à-dire quelque part entre les balises <code><head></code> et <code></head></code>). Ça devrait ressembler à : <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> </li> @@ -148,7 +146,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS }</pre> <div class="note"> - <p><strong>Note</strong>: Tout ce qui est entre <code>/*</code> et <code>*/</code> dans un document CSS est un <strong>commentaire</strong> <strong>de CSS. </strong> Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.</p> + <p><strong>Note :</strong> Tout ce qui est entre <code>/*</code> et <code>*/</code> dans un document CSS est un <strong>commentaire</strong> <strong>de CSS. </strong> Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.</p> </div> </li> <li>Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (<em>body</em>) du document soit plus lisible : @@ -167,13 +165,13 @@ p, li { <p>Vous pouvez ajuster ces valeurs en <code>px</code> comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :</p> -<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="website-screenshot-font-small.png"></p> <h2 id="Boîtes_boîtes_encore_et_toujours_des_boîtes">Boîtes, boîtes, encore et toujours des boîtes</h2> <p>Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.</p> -<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> +<p><img alt="a big stack of boxes or crates sat on top of one another" src="boxes.jpg"></p> <p>C'est pour cette raison que l'architecture de CSS est principalement basée sur un <em>modèle de boîtes</em>.<em> </em>Chacun de ces blocs prend un certain espace sur la page, de cette façon :</p> @@ -183,7 +181,7 @@ p, li { <li><code>margin</code>, l'espace extérieur, autour de l'élément (en français cela correspond à la marge)</li> </ul> -<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="box-model.png"></p> <p>Dans cette section, nous utilisons aussi :</p> @@ -259,14 +257,14 @@ p, li { <p>Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser <code>margin: 0 auto</code>, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément <code>body</code> est un <strong>élément de bloc</strong>, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments <strong><em>inline</em></strong> (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise <code>display: block;</code> pour que l'image se comporte comme un élément de bloc.</p> <div class="note"> -<p><strong>Note </strong>: C'est tout à fait normal si vous ne comprenez pas complètement <code>display: block;</code> et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour <code>display</code> sont expliquées sur <a href="/fr/docs/Web/CSS/display">la page de référence de la propriété <code>display</code></a>.</p> +<p><strong>Note :</strong> C'est tout à fait normal si vous ne comprenez pas complètement <code>display: block;</code> et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour <code>display</code> sont expliquées sur <a href="/fr/docs/Web/CSS/display">la page de référence de la propriété <code>display</code></a>.</p> </div> <h2 id="Conclusion">Conclusion</h2> <p>Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir <a href="http://mdn.github.io/beginner-html-site-styled/">notre version finale ici</a>) :</p> -<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="website-screenshot-final.png"></p> <p>Si vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">le code final de cet exemple disponible sur GitHub</a>.</p> @@ -277,12 +275,12 @@ p, li { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> - <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> - <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> - <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> - <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html index 50cc611033..b405b8f078 100644 --- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -15,9 +15,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> -<p>Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">téléverser ces fichiers sur un serveur</a>. <em>Gérer les fichiers</em> aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.</p> -</div> +<p>Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors <a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">téléverser ces fichiers sur un serveur</a>. <em>Gérer les fichiers</em> aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.</p> <h2 id="Où_placer_votre_site_web_sur_votre_ordinateur">Où placer votre site web sur votre ordinateur ?</h2> @@ -51,12 +49,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers </ol> <div class="note"> -<p><strong>Note</strong> : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : <strong>Masquer les extensions pour les types de fichiers connus</strong>. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant <strong>Options des dossiers...</strong>, en enlevant la coche de <strong>Masquer les extensions pour les types de fichier connus</strong> puis en cliquant sur <strong>OK</strong>. Pour des informations propres à votre version de Windows, recherchez sur le Web !</p> +<p><strong>Note :</strong> Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : <strong>Masquer les extensions pour les types de fichiers connus</strong>. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant <strong>Options des dossiers...</strong>, en enlevant la coche de <strong>Masquer les extensions pour les types de fichier connus</strong> puis en cliquant sur <strong>OK</strong>. Pour des informations propres à votre version de Windows, recherchez sur le Web !</p> </div> <h2 id="Les_chemins_de_fichiers">Les chemins de fichiers</h2> -<p>Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans <code>index.html</code> pour que la page affiche l'image choisie dans l'article « <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site web ?</a> ».</p> +<p>Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans <code>index.html</code> pour que la page affiche l'image choisie dans l'article « <a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site web ?</a> ».</p> <ol> <li>Copiez l'image précédemment choisie dans votre dossier <code>images</code>.</li> @@ -77,7 +75,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers <li>Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !</li> </ol> -<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="website-screenshot.png"></p> <p>Quelques règles générales à propos des chemins de fichier :</p> @@ -91,24 +89,24 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers <p>Pour le moment, c'est tout ce qu'il y a à savoir.</p> <div class="note"> -<p><strong>Note </strong>: Le système de fichiers Windows utilise des barres obliques inversées (<em>backslash</em> : « \ ») et non des barres obliques (<em>slash</em> : « / »), par exemple <code>C:\windows</code>. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques (« / ») dans votre code..</p> +<p><strong>Note :</strong> Le système de fichiers Windows utilise des barres obliques inversées (<em>backslash</em> : « \ ») et non des barres obliques (<em>slash</em> : « / »), par exemple <code>C:\windows</code>. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques (« / ») dans votre code..</p> </div> <h2 id="Autre_chose">Autre chose ?</h2> <p>C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :</p> -<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;">{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}</p> +<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="file-structure.png">{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}</p> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> - <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> - <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> - <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> - <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html index 2355b250ef..0a0cf668b6 100644 --- a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -18,9 +18,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web <div>{{LearnSidebar}}<br> {{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p>Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.</p> -</div> <p>Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.</p> @@ -28,7 +26,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web <p>Les ordinateurs qui se connectent au Web sont appelés des <strong>clients </strong>et des <strong>serveurs</strong>. Voici un diagramme simplifié qui illustre comment ils interagissent :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> +<p><img alt="" src="Client-server.jpg"></p> <ul> <li>Les clients correspondent aux appareils des utilisateurs connectés sur Internet (par exemple, votre ordinateur connecté par Wi-Fi ou votre téléphone connecté sur le réseau mobile) et aux logiciels d'accès au web (par exemple, les navigateurs comme Firefox ou Chrome).</li> @@ -41,7 +39,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web <p>Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté, un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> +<p><img alt="" src="road.jpg"></p> <p>En plus du client et du serveur, nous devons aussi mentionner :</p> @@ -77,7 +75,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web <p>Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir <code>63.245.215.20</code> dans la barre d'adresse d'un nouvel onglet de votre navigateur.</p> -<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> +<p><img alt="A domain name is just another form of an IP address" src="dns-ip.png"></p> <h2 id="Explications_sur_les_paquets">Explications sur les paquets</h2> @@ -86,10 +84,10 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Fonctionnement_Internet">Comment Internet fonctionne</a></li> - <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a> (en) <em>(<span class="short_text" id="result_box" lang="fr"><span>HTTP - un protocole de niveau application</span></span>)</em></li> - <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a> (en) <em>(<span class="short_text" id="result_box" lang="fr"><span>HTTP: Allons-y !</span></span>)</em></li> - <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a> (en) <em>(<span class="short_text" id="result_box" lang="fr"><span>HTTP: Codes de réponse</span></span>)</em></li> + <li><a href="/fr/Apprendre/Fonctionnement_Internet">Comment Internet fonctionne</a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a> (en) <em>(HTTP - un protocole de niveau application)</em></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a> (en) <em>(HTTP: Allons-y !)</em></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a> (en) <em>(HTTP: Codes de réponse)</em></li> </ul> <h2 id="Crédit">Crédit</h2> @@ -101,12 +99,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installation des outils de base</a></li> - <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel sera l'aspect de votre site web ?</a></li> - <li id="Dealing_with_files"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Les bases de CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a></li> - <li id="Publishing_your_website"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site web</a></li> - <li id="How_the_web_works"><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installation des outils de base</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel sera l'aspect de votre site web ?</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">Gérer les fichiers</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Les bases du HTML</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Les bases de CSS</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Les bases de JavaScript</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Le fonctionnement du Web</a></li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.html b/files/fr/learn/getting_started_with_the_web/html_basics/index.html index e47385d2b4..b0a4bab53f 100644 --- a/files/fr/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.html @@ -14,9 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p><strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.</p> -</div> <h2 id="Qu'est-ce_que_HTML_réellement">Qu'est-ce que HTML, réellement ?</h2> @@ -32,7 +30,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML <p>Regardons de plus près cet élément paragraphe :</p> -<p><img alt="Diagramme décrivant la structure d'un élément HTML" src="https://mdn.mozillademos.org/files/14739/chat-grincheuxl.png" style="display: block; height: 213px; margin: 0px auto; width: 422px;"></p> +<p><img alt="Diagramme décrivant la structure d'un élément HTML" src="chat-grincheuxl.png"></p> <p>Les composants principaux de notre élément sont :</p> @@ -45,7 +43,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML <p>Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :</p> -<p><img alt="Diagramme explicitant un attribut" src="https://mdn.mozillademos.org/files/14741/attribut-chat-grincheux.png" style="display: block; height: 103px; margin: 0px auto; width: 515px;"></p> +<p><img alt="Diagramme explicitant un attribut" src="attribut-chat-grincheux.png"></p> <p>Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut <code>class</code> permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.</p> @@ -118,14 +116,14 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML <li>quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut <code>src</code> et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :</li> </ol> -<p><img alt="Mon image de test" src="https://mdn.mozillademos.org/files/9349/" style="display: block; height: 39px; margin: 1px auto; width: 207px;"></p> +<p><img alt="Mon image de test" src=""></p> <p>Le point important qu'il faut retenir est que l'attribut est utilisé pour <strong>décrire</strong> l'image. Le texte contenu dans cet attribut doit fournir suffisamment d'informations pour que le lecteur puisse savoir ce que l'image représente. Par exemple, le texte que j'utilise « Mon image de test » n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo Firefox, qui représente un renard de feu entourant la Terre ».</p> <p>Essayez d'améliorer le texte alternatif pour l'image maintenant.</p> <div class="note"> -<p><strong>Note</strong> : Pour plus d'informations sur l'accessibilité, vous trouverez la section <a href="/fr/docs/Accessibilité">Accessibilité de MDN</a>.</p> +<p><strong>Note :</strong> Pour plus d'informations sur l'accessibilité, vous trouverez la section <a href="/fr/docs/Accessibilité">Accessibilité de MDN</a>.</p> </div> <h2 id="Baliser_le_texte">Baliser le texte</h2> @@ -200,7 +198,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML <p>Attention à ne pas oublier la partie avec <code>https://</code> ou <code>http://</code> qui représente le <em>protocole</em> utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.</p> <div class="note"> -<p><code>href</code> peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> en anglais, ce qui signifie « référence hypertexte » en français.</p> +<p><strong>Note :</strong> <code>href</code> peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> en anglais, ce qui signifie « référence hypertexte » en français.</p> </div> <p>Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.</p> @@ -209,7 +207,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML <p>Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également <a href="http://mdn.github.io/beginner-html-site/">la voir ici</a>) :<br> <br> - <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="finished-test-page-small.png"></p> <p>Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">l'exemple fini disponible sur GitHub</a>.</p> @@ -220,12 +218,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> - <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> - <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> - <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> - <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/index.html b/files/fr/learn/getting_started_with_the_web/index.html index 1347a8defd..9d4b584ac2 100644 --- a/files/fr/learn/getting_started_with_the_web/index.html +++ b/files/fr/learn/getting_started_with_the_web/index.html @@ -16,9 +16,7 @@ original_slug: Apprendre/Commencer_avec_le_web --- <div>{{LearnSidebar}}</div> -<div class="summary"> <p><em>Commencer avec le Web</em> est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.</p> -</div> <h2 id="L'histoire_de_votre_premier_site_web">L'histoire de votre premier site web</h2> diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html index 7feb0b6e74..63af1ab636 100644 --- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -15,19 +15,17 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base <div>{{LearnSidebar}}<br> {{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p>Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation.</p> -</div> <h2 id="Quels_outils_utilisent_les_professionnels">Quels outils utilisent les professionnels ?</h2> <ul> <li><strong>Un ordinateur</strong>. Ça peut sembler évident, mais certains d'entre vous lisent cet article depuis leur téléphone ou un terminal de bibliothèque. Pour du développement web sérieux, il est préférable d'investir dans un ordinateur de bureau tournant sous Linux, Mac ou Windows.</li> - <li><strong>Un éditeur de texte</strong>, pour y écrire du code. Cela peut être un éditeur gratuit (ex : <a href="https://code.visualstudio.com/">Visual Studio Code, </a><a href="https://atom.io/">Atom,</a> <a href="https://www.sublimetext.com/">Sublime Text</a> ou <a href="https://notepad-plus-plus.org/">Notepad++</a>) ou un éditeur hybride (<a href="http://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). <span id="result_box" lang="fr"><span>Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.</span></span></li> - <li><strong>Un navigateur web</strong>, pour y tester le code. Les navigateurs les plus utilisés sont <a href="https://www.mozilla.org/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">Internet Explorer et </a> <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> . <span id="result_box" lang="fr"><span>Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).</span></span></li> + <li><strong>Un éditeur de texte</strong>, pour y écrire du code. Cela peut être un éditeur gratuit (ex : <a href="https://code.visualstudio.com/">Visual Studio Code, </a><a href="https://atom.io/">Atom,</a> <a href="https://www.sublimetext.com/">Sublime Text</a> ou <a href="https://notepad-plus-plus.org/">Notepad++</a>) ou un éditeur hybride (<a href="http://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.</li> + <li><strong>Un navigateur web</strong>, pour y tester le code. Les navigateurs les plus utilisés sont <a href="https://www.mozilla.org/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">Internet Explorer et </a> <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).</li> <li><strong>Un éditeur graphique</strong>, comme <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://krita.org/">Krita</a> ou <a href="http://www.adobe.com/uk/products/photoshop.html">Photoshop</a> pour réaliser les images de vos pages web.</li> <li><strong>Un système de contrôle de versions</strong>, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, <a href="http://git-scm.com/">Git</a> est l'outil lde contrôle de version le plus connu et le service d'hébergement de code <a href="https://github.com">GitHub</a>, fondé sur Git, est également très populaire<strong>.</strong></li> - <li><strong>Un programme FTP</strong>, <span id="result_box" lang="fr"><span>utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs</span></span> (<a href="http://git-scm.com/">Git</a> <span class="short_text" id="result_box" lang="fr"><span>remplace de plus en plus le FTP à cette fin)</span></span>. Il existe une grande quantité de programmes de ce genre comme <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> et <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Un programme FTP</strong>, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs (<a href="http://git-scm.com/">Git</a> remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> et <a href="https://filezilla-project.org/">FileZilla</a>.</li> <li><strong>Un système d'automatisation</strong>, comme <a href="http://gruntjs.com/">Grunt</a> ou <a href="http://gulpjs.com/">Gulp</a>, pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests.</li> <li>Des modèles, bibliothèques, frameworks, etc. pour accélérer le développement de fonctionnalités courantes.</li> <li>Et encore plus d'outils !</li> @@ -41,7 +39,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base <p>Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose <a href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29">Notepad</a> et<a href="https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29"> </a>macOS, <a href="https://fr.wikipedia.org/wiki/TextEdit">TextEdit</a>. Pour les distributions Linux cela varie. Ubuntu propose <a href="https://fr.wikipedia.org/wiki/Gedit">gedit</a> par défaut.</p> -<p>Pour le développement web, <span id="result_box" lang="fr"><span>vous trouverez surement mieux que Notepad ou TextEdit</span></span>. Nous vous recommandons de commencer avec <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <span id="result_box" lang="fr"><span>qui est un éditeur libre offrant des aperçus en direct et des conseils de code. </span></span></p> +<p>Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec <a href="https://code.visualstudio.com/">Visual Studio Code</a>, qui est un éditeur libre offrant des aperçus en direct et des conseils de code. </p> <h3 id="Installer_un_navigateur_moderne">Installer un navigateur moderne</h3> @@ -49,7 +47,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base <ul> <li>Linux : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> - <li>Windows : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> <span id="result_box" lang="fr"><span>(Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur).</span></span></li> + <li>Windows : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> (Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur).</li> <li>Mac : <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari est proposé sur iOS et macOS par défaut).</li> </ul> @@ -66,12 +64,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> - <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> - <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> - <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> - <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html index 7041300eec..0b9cbe5215 100644 --- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html @@ -13,9 +13,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p>JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.</p> -</div> <h2 id="Qu'est_le_JavaScript_réellement">Qu'est le JavaScript, réellement ?</h2> @@ -31,7 +29,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript <li>des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications.</li> </ul> -<p>Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre <a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript">centre d'apprentissage JavaScript</a>, et le reste du MDN.</p> +<p>Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre <a href="/fr/docs/Apprendre/JavaScript">centre d'apprentissage JavaScript</a>, et le reste du MDN.</p> <p>Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !</p> @@ -42,7 +40,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript <p>Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (<a href="https://fr.wikipedia.org/wiki/Hello_world">la norme en matière d'exemples de programmation de base</a>).</p> <div class="warning"> -<p><strong>Important </strong>: Si vous rejoignez cette série d'articles en cours de route, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">téléchargez cet exemple de code</a> et utilisez‑le comme point de départ.</p> +<p><strong>Attention :</strong> Si vous rejoignez cette série d'articles en cours de route, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">téléchargez cet exemple de code</a> et utilisez‑le comme point de départ.</p> </div> <ol> @@ -55,11 +53,11 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript <pre class="brush: js">let myHeading = document.querySelector('h1'); myHeading.textContent = 'Bonjour, monde !';</pre> </li> - <li>Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez <code>index.html</code> dans votre navigateur. Vous devriez obtenir quelque chose comme :<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> + <li>Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez <code>index.html</code> dans votre navigateur. Vous devriez obtenir quelque chose comme :<img alt="" src="hello-world.png"></li> </ol> <div class="note"> -<p><strong>Note</strong> : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.</p> +<p><strong>Note :</strong> La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.</p> </div> <h3 id="Que_s'est-il_passé">Que s'est-il passé ?</h3> @@ -69,7 +67,7 @@ myHeading.textContent = 'Bonjour, monde !';</pre> <p>Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable <code>myHeading</code> (elle représente le contenu du titre).</p> <div class="note"> -<p><strong>Note :</strong> Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.</p> +<p><strong>Note :</strong> Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.</p> </div> <h2 id="Les_bases_du_JavaScript_en_accéléré">Les bases du JavaScript en accéléré</h2> @@ -77,7 +75,7 @@ myHeading.textContent = 'Bonjour, monde !';</pre> <p>Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !</p> <div class="warning"> -<p><strong>Important </strong>: Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire <a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">Découvrir les outils de développement présents dans le navigateur</a>.</p> +<p><strong>Attention :</strong> Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire <a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">Découvrir les outils de développement présents dans le navigateur</a>.</p> </div> <h3 id="Variables">Variables</h3> @@ -87,15 +85,15 @@ myHeading.textContent = 'Bonjour, monde !';</pre> <pre class="brush: js">let myVariable;</pre> <div class="note"> -<p><strong>Note</strong> : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Guide des points‑virgule en JavaScript</a> pour plus de détails.</p> +<p><strong>Note :</strong> Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Guide des points‑virgule en JavaScript</a> pour plus de détails.</p> </div> <div class="note"> -<p><strong>Note </strong>: Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">cet article</a> sur les règles de nommage des variables). Si vous avez un doute, vous pouvez <a href="https://mothereff.in/js-variables">vérifier le nom de votre variable</a> pour voir s'il est valide.</p> +<p><strong>Note :</strong> Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">cet article</a> sur les règles de nommage des variables). Si vous avez un doute, vous pouvez <a href="https://mothereff.in/js-variables">vérifier le nom de votre variable</a> pour voir s'il est valide.</p> </div> <div class="note"> -<p><strong>Note</strong> : JavaScript est sensible à la casse — <code>myVariable</code> est une variable différente de <code>myvariable</code>. Si vous avez des problèmes dans votre code, vérifiez la casse !</p> +<p><strong>Note :</strong> JavaScript est sensible à la casse — <code>myVariable</code> est une variable différente de <code>myvariable</code>. Si vous avez des problèmes dans votre code, vérifiez la casse !</p> </div> <p>Une fois une variable déclarée, vous pouvez lui donner une valeur :</p> @@ -169,7 +167,7 @@ Tout ce qui est écrit ici est entre commentaires. <p>Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :</p> -<pre class="brush: js" style="font-size: 14px;">// Voici un commentaire</pre> +<pre class="brush: js">// Voici un commentaire</pre> <h3 id="Opérateurs">Opérateurs</h3> @@ -237,7 +235,7 @@ Tout ce qui est écrit ici est entre commentaires. <p>Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs">Expressions et opérateurs</a> pour la liste complète.</p> <div class="note"> -<p><strong>Note</strong> : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez <code>"35" + "25"</code> dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez <code>35 + 25</code>, vous obtiendrez le bon résultat.</p> +<p><strong>Note :</strong> Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez <code>"35" + "25"</code> dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez <code>35 + 25</code>, vous obtiendrez le bon résultat.</p> </div> <h3 id="Structures_conditionnelles">Structures conditionnelles</h3> @@ -251,7 +249,7 @@ if (iceCream === 'chocolat') { alert("Ooooh, mais j'aurais préféré au chocolat."); }</pre> -<p>L'expression contenue dans <code>if ( ... )</code> correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">iceCream</span></font> avec la chaîne de caractères <code>chocolat</code> pour voir si elles sont égales. Si cette comparaison renvoie <code>true</code>, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et c'est le code du second bloc, celui présent après <code>else</code>, qui est exécuté.</p> +<p>L'expression contenue dans <code>if ( ... )</code> correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères <code>chocolat</code> pour voir si elles sont égales. Si cette comparaison renvoie <code>true</code>, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et c'est le code du second bloc, celui présent après <code>else</code>, qui est exécuté.</p> <h3 id="Fonctions">Fonctions</h3> @@ -286,7 +284,7 @@ multiply(20, 20); multiply(0.5, 3);</pre> <div class="note"> -<p><strong>Note</strong> : L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/return"><code>return</code></a> indique au navigateur qu'il faut renvoyer la variable <code>result</code> en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables">cet article</a>).</p> +<p><strong>Note :</strong> L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/return"><code>return</code></a> indique au navigateur qu'il faut renvoyer la variable <code>result</code> en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables">cet article</a>).</p> </div> <h3 id="Événements">Événements</h3> @@ -391,7 +389,7 @@ let myHeading = document.querySelector('h1');</pre> <p>Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi <a href="https://mdn.github.io/beginner-html-site-scripted/">voir la version que nous avons obtenue ici</a>) :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="website-screen-scripted.png"></p> <p>Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">ceux disponibles sur GitHub qui correspondent à notre modèle finalisé</a>.</p> @@ -402,12 +400,12 @@ let myHeading = document.querySelector('h1');</pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> - <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> - <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> - <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> - <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html index aa1dffd2e5..49b297e686 100644 --- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -18,7 +18,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web <div>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}</div> -<p class="summary"><span class="seoSummary">Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.</span></p> +<p>Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.</p> <h2 id="What_are_the_options">Quelles sont les options ?</h2> @@ -37,7 +37,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web <p>En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de transfert de fichiers (FTP)")}} (voir <a href="/fr/docs/Learn/Common_questions/How_much_does_it_cost#software">Combien ça coûte : les logiciels</a> pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :</p> -<p><img alt="" src="ftp.jpg" style="display: block;margin: 0px auto;"></p> +<p><img alt="" src="ftp.jpg"></p> <h4 id="Tips_for_finding_hosting_and_domains">Suggestions pour trouver hébergement et domaines</h4> @@ -72,7 +72,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web <li><a href="https://codepen.io/">CodePen</a></li> </ul> -<p><img alt="" src="jsbin-screen.png" style="display: block;margin: 0px auto;"></p> +<p><img alt="" src="jsbin-screen.png"></p> <h2 id="Publishing_via_GitHub">Publier via GitHub</h2> @@ -82,7 +82,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web <li>Pour commencer, <a href="https://github.com/join">inscrivez-vous sur GitHub</a> et vérifiez votre adresse e-mail.</li> <li>Ensuite, <a href="https://github.com/new">créez un dépôt</a> dans lequel vous placerez vos fichiers.</li> <li>Sur cette page, dans le champ <em>Repository name</em>, entrez <em>username</em>.github.io : <em>username</em> est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera <em>bobsmith.github.io</em>.<br> - Également, cochez <em>Initialize this repository with a README</em>, puis cliquez sur <em>Create repository</em>.<img alt="" src="github-create-repo.png" style="display: block;margin: 0px auto;"></li> + Également, cochez <em>Initialize this repository with a README</em>, puis cliquez sur <em>Create repository</em>.<img alt="" src="github-create-repo.png"></li> <li>Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur <em>Commit changes</em>. <div class="notecard note"> <p><strong>Note :</strong> Assurez-vous que votre dossier comporte bien un fichier <em>index.html.</em></p> @@ -112,12 +112,12 @@ original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web <h2 id="In_this_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation des outils de base</a></li> - <li id="What_will_your_website_look_like"><a href="/fr/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Quel sera l'aspect de votre site web ?</a></li> - <li id="Dealing_with_files"><a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Les bases du HTML</a></li> - <li id="CSS_basics"><a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">Les bases de CSS</a></li> - <li id="JavaScript_basics"><a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Les bases de JavaScript</a></li> - <li id="Publishing_your_website"><a href="/fr/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publier votre site web</a></li> - <li id="How_the_web_works"><a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Le fonctionnement du Web</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installation des outils de base</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Quel sera l'aspect de votre site web ?</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gérer les fichiers</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Les bases du HTML</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/CSS_basics">Les bases de CSS</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Les bases de JavaScript</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publier votre site web</a></li> + <li><a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Le fonctionnement du Web</a></li> </ul> diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html index e37f991a39..c06de51317 100644 --- a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -74,7 +74,7 @@ original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards <p>Hypertext Transfer Protocol, ou <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme</p> -<pre class="notranslate">"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"? +<pre>"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"? "Bien sûr Navigateur Web - Les voilà" diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html index 3312388810..06c8f03c49 100644 --- a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -14,9 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p><em>Quel sera l'aspect de votre site web ?</em> parle de planifier et concevoir (<em>design</em>), travaux à faire <em>avant</em> d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».</p> -</div> <h2 id="Commençons_par_le_commencement_planification">Commençons par le commencement : planification</h2> @@ -25,23 +23,23 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site <p>Pour commencer, posez-vous ces questions :</p> <ol> - <li><strong>De quoi va parler mon site web ? <span class="rangySelectionBoundary" id="selectionBoundary_1425749353675_3651330400869959" style="display: none; line-height: 0;"></span></strong>Aimez-vous les chiens, New York ou Pacman ?<span class="rangySelectionBoundary" id="selectionBoundary_1425749353674_43453967859601583" style="display: none; line-height: 0;"></span></li> + <li><strong>De quoi va parler mon site web ? </strong>Aimez-vous les chiens, New York ou Pacman ?</li> <li><strong>Quelles informations vais-je présenter sur le sujet ? </strong>Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.</li> <li><strong>Quelle sera l'apparence de mon site web, </strong>en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?</li> </ol> <div class="note"> -<p><strong>Note</strong> : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans <a href="https://www.mozilla.org/fr/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> +<p><strong>Note :</strong> Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans <a href="https://www.mozilla.org/fr/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> </div> <h2 id="Esquisse_de_votre_concept">Esquisse de votre concept</h2> <p>Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> +<p><img alt="" src="website-drawing-scan.png"></p> <div class="note"> -<p><strong>Note</strong> : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.</p> +<p><strong>Note :</strong> Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.</p> <p>Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.</p> </div> @@ -56,13 +54,13 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site <h3 id="Couleur_du_thème">Couleur du thème</h3> -<p>Pour choisir une couleur, utilisez une <a href="http://www.code-couleur.com/index.html">palette de couleurs</a> e<span class="rangySelectionBoundary" id="selectionBoundary_1425762098497_6429490650551564" style="display: none; line-height: 0;"></span>t trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme <code>#660066</code>. Ceci est appelé un <em>code hexadécimal</em> et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.</p> +<p>Pour choisir une couleur, utilisez une <a href="http://www.code-couleur.com/index.html">palette de couleurs</a> et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme <code>#660066</code>. Ceci est appelé un <em>code hexadécimal</em> et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> +<p><img alt="" src="Screenshot%20from%202014-11-03%2017:40:49.png"></p> <h3 id="Images">Images</h3> -<p>Pour choisir une image, allez sur <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> e<span class="rangySelectionBoundary" id="selectionBoundary_1425762299623_916803299754344" style="display: none; line-height: 0;"></span>t cherchez une image qui convient.</p> +<p>Pour choisir une image, allez sur <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> et cherchez une image qui convient.</p> <ol> <li>Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.</li> @@ -70,14 +68,14 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site <li>Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez <em>Enregistrer l'image sous…</em> et choisissez un endroit sûr pour enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.</li> </ol> -<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> +<p><img alt="" src="Screenshot%20from%202014-11-04%2015:09:21.png"></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> +<p><img alt="" src="Screenshot%20from%202014-11-04%2015:20:48.png"></p> <div class="note"> -<p><strong>Note</strong> : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur <strong>Outils de recherche</strong>, puis 2)<strong> Droits d'usage</strong> :</p> +<p><strong>Note :</strong> La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur <strong>Outils de recherche</strong>, puis 2)<strong> Droits d'usage</strong> :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +<p><img alt="" src="Screenshot%20from%202014-11-04%2014:27:45.png"></p> </div> <h3 id="Police_de_caractères">Police de caractères</h3> @@ -91,21 +89,21 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site <li>Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.</li> </ol> -<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> +<p><img alt="" src="font1.png"></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> +<p><img alt="" src="font2.png"></p> <p>{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}</p> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li id="Installing_basic_software"><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> - <li id="What_will_your_website_look_like"><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> - <li id="Dealing_with_files"><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> - <li id="HTML_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> - <li id="CSS_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> - <li id="JavaScript_basics"><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> - <li id="Publishing_your_website"><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> - <li id="How_the_web_works"><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site">Quel aspect pour votre site Web ?</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">Gérer les fichiers</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Bases du HTML</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Bases des CSS</a></li> + <li><a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript">Bases du JavaScript</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web">Publier votre site Web</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Comment fonctionne le Web</a></li> </ul> diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html index a3839113a3..f9fcdc2434 100644 --- a/files/fr/learn/html/cheatsheet/index.html +++ b/files/fr/learn/html/cheatsheet/index.html @@ -14,174 +14,271 @@ original_slug: Apprendre/HTML/Cheatsheet <p>Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (<em>cheatsheet</em>) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une <a href="/fr/docs/Web/HTML/Element">documentation HTML exhaustive</a> ainsi que différents <a href="/fr/Apprendre/HTML/Comment">tutoriels HTML détaillés</a>. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.</p> <div class="note"> -<p><strong>Rappel :</strong> Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.</p> +<p><strong>Note :</strong> Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.</p> </div> -<h2 id="Mise_en_forme_inline">Mise en forme <em>inline</em></h2> +<h2>Éléments en ligne</h2> -<p>Un élément dit « en ligne » ou <em>inline</em> prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.</p> +<p>Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <code><body></code>.</p> -<table class="nostripe standard-table"> +<table class="standard-table"> <thead> <tr> - <th scope="col">Utilisation</th> - <th scope="col">Fragment de code</th> - <th scope="col">Résultat</th> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> </tr> </thead> <tbody> <tr> - <td style="vertical-align: top;">Un lien simple</td> - <td style="vertical-align: top;"><code><a href="https://developer.mozilla.org">Un lien vers MDN</a></code></td> - <td style="vertical-align: top;"><a href="https://developer.mozilla.org">Un lien vers MDN</a></td> + <td>Un lien</td> + <td>{{HTMLElement("a")}}</td> + <td id="a-example"><pre class="brush: html"><a href="https://example.org"> +Un lien vers example.org</a>.</pre> + {{EmbedLiveSample("a-example", 100, 60)}}</td> </tr> <tr> - <td>Une image simple</td> - <td><code><img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" /></code></td> - <td><img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png"></td> + <td>Une image</td> + <td>{{HTMLElement("img")}}</td> + <td id="img-example"><pre class="brush: html"><img src="beast.png" width="25" /></pre> + {{EmbedLiveSample("img-example", 100, 60)}}</td> </tr> <tr> - <td>Un texte avec emphase</td> - <td><code><em>Je suis distingué</em></code></td> - <td><em>Je suis distingué</em></td> + <td>Un conteneur en ligne</td> + <td>{{HTMLElement("span")}}</td> + <td id="span-example"><pre class="brush: html">Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.</pre> + {{EmbedLiveSample("span-example", 100, 60)}}</td> </tr> <tr> - <td>Un texte marqué comme important</td> - <td><code><strong>Je suis important</strong></code></td> - <td><strong>Je suis important</strong></td> + <td>Emphase du texte</td> + <td>{{HTMLElement("em")}}</td> + <td id="em-example"><pre class="brush: html"><em>La classe non ?</em>.</pre> + {{EmbedLiveSample("em-example", 100, 60)}}</td> </tr> <tr> - <td>Un texte mis en avant</td> - <td><code><mark>Remarquez-moi</mark></code></td> - <td><mark>Remarquez-moi</mark></td> + <td>Texte idiomatique</td> + <td>{{HTMLElement("i")}}</td> + <td id="i-example"><pre class="brush: html"> +Marque la phrase <i>généralement en italique</i>.</pre> + {{EmbedLiveSample("i-example", 100, 60)}}</td> </tr> <tr> - <td>Barrer du texte qui n'est plus pertinent</td> - <td><code><s>Je ne suis plus d'actualité ou plus pertinent</s></code></td> - <td><s>Je ne suis plus d'actualité ou plus pertinent</s></td> + <td>Texte d'attention</td> + <td>{{HTMLElement("b")}}</td> + <td id="b-example"><pre class="brush: html"> +Met en avant un <b>mot ou une phrase d'une certaine importance</b>.</pre> + {{EmbedLiveSample("b-example", 100, 60)}}</td> </tr> <tr> - <td>Souligner pour ajouter une annotation non-textuelle</td> - <td><code>Ceci est <u>mal orthographié</u></code></td> - <td>Ceci est <u>mal orthographié</u></td> + <td>Texte d'importance</td> + <td>{{HTMLElement("strong")}}</td> + <td id="strong-example"><pre class="brush: html"><strong>Ce contenu est important !</strong></pre> + {{EmbedLiveSample("strong-example", 100, 60)}}</td> </tr> <tr> - <td>Du texte qui doit être affiché en indice</td> - <td><code>H<sub>2</sub>O</code></td> - <td>H<sub>2</sub>O</td> + <td>Marquer du texte</td> + <td>{{HTMLElement("mark")}}</td> + <td id="mark-example"><pre class="brush: html"><mark>Vous me voyez ?</mark></pre> + {{EmbedLiveSample("mark-example", 100, 60)}}</td> </tr> <tr> - <td>Du texte qui doit être affiché en exposant</td> - <td><code>M<sup>me</sup> de Bovary</code></td> - <td>M<sup>me</sup> de Bovary</td> + <td>Texte barré</td> + <td>{{HTMLElement("s")}}</td> + <td id="s-example"><pre class="brush: html"><s>Je ne suis plus pertinent.</s></pre> + {{EmbedLiveSample("s-example", 100, 60)}}</td> </tr> <tr> - <td>Une citation dans le cours du texte</td> - <td><code>Il a dit : <q>Je suis ton père.</q></code></td> - <td>Il a dit : <q>Je suis ton père.</q></td> + <td>Mise en indice</td> + <td>{{HTMLElement("sub")}}</td> + <td id="sub-example"><pre class="brush: html">H<sub>2</sub>O</pre> + {{EmbedLiveSample("sub-example", 100, 60)}}</td> + </tr> + <tr> + <td>Texte de commentaire</td> + <td>{{HTMLElement("small")}}</td> + <td id="small-example"><pre class="brush: html"> +Utilisé pour représenter <small>les petites +notes </small> d'un document.</pre> +{{EmbedLiveSample("small-example", 100, 60)}}</td> + </tr> + <tr> + <td>Adresse</td> + <td>{{HTMLElement("address")}}</td> + <td id="address-example"><pre class="brush: html"><address>15 Rue du Bourg</address></pre> +{{EmbedLiveSample("address-example", 100, 60)}}</td> + </tr> + <tr> + <td>Citation textuelle</td> + <td>{{HTMLElement("cite")}}</td> + <td id="cite-example"><pre class="brush: html">Pour plus d'informations sur les monstres, +voir <cite>Le monstrueux livre des monstres</cite>.</pre> + {{EmbedLiveSample("cite-example", 100, 60)}}</td> + </tr> + <tr> + <td>Mise en exposant</td> + <td>{{HTMLElement("sup")}}</td> + <td id="sup-example"><pre class="brush: html">x<sup>2</sup></pre> + {{EmbedLiveSample("sup-example", 100, 60)}}</td> + </tr> + <tr> + <td>Citation en ligne</td> + <td>{{HTMLElement("q")}}</td> + <td id="q-example"><pre class="brush: html"> +<q>Toi aussi mon fils ?</q>, a-t-il dit.</pre> +{{EmbedLiveSample("q-example", 100, 60)}}</td> </tr> <tr> <td>Un saut de ligne</td> - <td><code>Ligne 1 <br/> Ligne 2</code></td> - <td>Ligne 1<br> - Ligne 2</td> + <td>{{HTMLElement("br")}}</td> + <td id="br-example"><pre class="brush: html">Ligne 1<br>Ligne 2</pre> +{{EmbedLiveSample("br-example", 100, 80)}}</td> </tr> <tr> - <td>Du code informatique (code « machine »)</td> - <td><code><code>System.print.File("coucou")</code></code></td> - <td><code>System.print.File("coucou")</code></td> + <td>Un saut de ligne possible</td> + <td>{{HTMLElement("wbr")}}</td> + <td id="wbr-example"><pre class="brush: html"> +<div style="width: 200px"> + Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch. +</div></pre> +{{EmbedLiveSample("wbr-example", 100, 80)}}</td> </tr> <tr> - <td>Un fichier audio intégré</td> - <td><code><audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio></code></td> - <td> - <audio>L'élément <code>audio</code> n'est pas supporté.</audio> - </td> + <td>Date</td> + <td>{{HTMLElement("time")}}</td> + <td id="time-example"><pre class="brush: html"> +Utilisé pour mettre en forme la date. Par exemple : +<time datetime="2020-05-24" pubdate> +Publié le 24 mai 2020</time>.</pre> +{{EmbedLiveSample("time-example", 100, 60)}}</td> </tr> <tr> - <td>Un fichier vidéo intégré</td> - <td><code><video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video></code></td> - <td> - <video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video> - </td> + <td>Code</td> + <td>{{HTMLElement("code")}}</td> + <td id="code-example"><pre class="brush: html"> +Ce texte est au format normal, +mais <code>celui-ci représente du code</code>.</pre> +{{EmbedLiveSample("code-example", 100, 60)}}</td> + </tr> + <tr> + <td>Audio</td> + <td>{{HTMLElement("audio")}}</td> + <td id="audio-example"><pre class="brush: html"> +<audio controls="controls"> + <source="t-rex-roar.mp3" type="audio/mpeg"> + Votre navigateur ne prend pas en charge audio. +</audio></pre> +{{EmbedLiveSample("audio-example", 100, 80)}}</td> + </tr> + <tr> + <td>Video</td> + <td>{{HTMLElement("video")}}</td> + <td id="video-example"><pre class="brush: html"> +<video controls width="250" + src="https://archive.org/download/ElephantsDream/ed_hd.ogv" > + L'élément <code>video</code> n'est pas pris en charge. +</video></pre> +{{EmbedLiveSample("video-example", 100, 200)}}</td> </tr> </tbody> </table> -<h2 id="Mise_en_forme_block">Mise en forme <em>block</em></h2> +<h2>Éléments de bloc</h2> -<p>Les éléments de bloc (<em>block</em> en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.</p> +<p>Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.</p> -<table class="nostripe standard-table"> +<table class="standard-table"> <thead> <tr> - <th scope="col">Utilisation</th> - <th scope="col">Fragment de code</th> - <th scope="col">Résultat</th> + <th scope="col">Usage</th> + <th scope="col">Élément</th> + <th scope="col">Exemple</th> </tr> </thead> <tbody> <tr> - <td style="vertical-align: top;">Un paragraphe simple</td> - <td style="vertical-align: top;"> - <p><code><p>Je suis un paragraphe</p></code><br> - <code><p>Je suis un autre paragraphe</p> </code></p> - </td> - <td style="vertical-align: top;"> - <p>Je suis un paragraphe</p> - - <p>Je suis un autre paragraphe</p> + <td>Un paragraphe</td> + <td>{{HTMLElement("p")}}</td> + <td id="p-example"><pre class="brush: html"> +<p>Je suis un paragraphe</p> +<p>Et un autre paragraph</p></pre> +{{EmbedLiveSample("p-example", 100, 150)}} </td> </tr> <tr> - <td style="vertical-align: top;">Une liste non-ordonnée</td> - <td style="vertical-align: top;"><code><ul><br> - <li>Je suis un élément</li><br> - <li>Je suis un autre élément</li><br> - <ul></code></td> - <td style="vertical-align: top;"> - <ul> - <li>Je suis un élément</li> - <li>Je suis un autre élément</li> - </ul> - </td> + <td>Une citation étendue</td> + <td>{{HTMLElement("blockquote")}}</td> + <td id="blockquote-example"><pre class="brush: html">Ils sont alors dit : +<blockquote>L'élément blockquote indique une citation étendue.</blockquote></pre> +{{EmbedLiveSample("blockquote-example", 100, 100)}} + </td> </tr> <tr> - <td style="vertical-align: top;">Une liste ordonnée</td> - <td style="vertical-align: top;"><code><ol><br> - <li>Je suis le premier élément</li><br> - <li>Je suis le deuxième élément</li><br> - <ol></code></td> - <td style="vertical-align: top;"> - <ol> - <li>Je suis le premier élément</li> - <li>Je suis le deuxième élément</li> - </ol> - </td> + <td>Information supplémentaire</td> + <td>{{HTMLElement("details")}}</td> + <td id="details-example"><pre class="brush: html"> +<details> + <summary>Anti-sèche HTML</summary> + <p>Éléments en ligne</p> + <p>Éléments de bloc</p> +</details></pre> +{{EmbedLiveSample("details-example", 100, 150)}} + </td> </tr> <tr> - <td style="vertical-align: top;">Une ligne horizontale</td> - <td style="vertical-align: top;"><code><hr/></code></td> - <td style="vertical-align: top;"> - <hr></td> + <td>Une liste non-ordonnée</td> + <td>{{HTMLElement("ul")}}</td> + <td id="ul-example"><pre class="brush: html"> +<ul><br> + <li>Je suis un élément de liste</li><br> + <li>Et moi un autre</li><br> +</ul></pre> +{{EmbedLiveSample("ul-example", 100, 100)}} + </td> </tr> <tr> - <td style="vertical-align: top;">Des titres de différents niveaux (du plus important au moins important)</td> - <td style="vertical-align: top;"> - <p><h2>Un titre de niveau 2</h2><br> - <h3>Un titre de niveau 3</h3><br> - <h4>Un titre de niveau 4</h4><br> - <h5>Un titre de niveau 5</h5></p> - </td> - <td style="vertical-align: top;"> - <h2 id="Un_titre_de_niveau_2">Un titre de niveau 2</h2> - - <h3 id="Un_titre_de_niveau_3">Un titre de niveau 3</h3> - - <h4 id="Un_titre_de_niveau_4">Un titre de niveau 4</h4> - - <h5 id="Un_titre_de_niveau_5">Un titre de niveau 5</h5> + <td>Une liste ordonnée</td> + <td>{{HTMLElement("ol")}}</td> + <td id="ol-example"><pre class="brush: html"> +<ol><br> + <li>Je suis le premier élément</li><br> + <li>Et moi le deuxième</li><br> +</ol></pre> +{{EmbedLiveSample("ol-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Une liste de définitions</td> + <td>{{HTMLElement("dl")}}</td> + <td id="dl-example"><pre class="brush: html"> +<dl> + <dt>Un terme</dt><br> + <dd>La définition du terme</dd> + <dt>Un autre terme</dt> + <dd>La définition d'un autre terme</dd> +</dl></pre> +{{EmbedLiveSample("dl-example", 100, 150)}} </td> </tr> + <tr> + <td>Un séparateur horizontal</td> + <td>{{HTMLElement("hr")}}</td> + <td id="hr-example"><pre class="brush: html"> +avant<hr>après</pre> +{{EmbedLiveSample("hr-example", 100, 100)}} + </td> + </tr> + <tr> + <td>Un titre</td> + <td>{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}</td> + <td id="h1-h6-example"><pre class="brush: html"> +<h1> Titre de niveau 1 </h1> +<h2> Titre de niveau 2 </h2> +<h3> Titre de niveau 3 </h3> +<h4> Titre de niveau 4 </h4> +<h5> Titre de niveau 5 </h5> +<h6> Titre de niveau 6 </h6></pre> +{{EmbedLiveSample("h1-h6-example", 100, 350)}} + </td> + </tr> </tbody> -</table> +</table>
\ No newline at end of file diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html index 5d6e826597..2bd7ccebb6 100644 --- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -9,11 +9,9 @@ tags: translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image --- -<div class="summary"> <p>Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -27,7 +25,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image </table> <div class="warning"> -<p>Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.</p> +<p><strong>Attention :</strong> Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.</p> </div> <h2 id="Les_cartes_imagées_cliquables_et_leurs_inconvénients">Les cartes imagées cliquables et leurs inconvénients</h2> diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.html b/files/fr/learn/html/howto/define_terms_with_html/index.html index ba6015387c..c4a834b1a4 100644 --- a/files/fr/learn/html/howto/define_terms_with_html/index.html +++ b/files/fr/learn/html/howto/define_terms_with_html/index.html @@ -9,15 +9,13 @@ tags: translation_of: Learn/HTML/Howto/Define_terms_with_HTML original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML --- -<div class="summary"> <p>HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + <td>Vous devez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> </tr> <tr> <th scope="row">Objectifs :</th> @@ -33,8 +31,6 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML <dt>Bleu (<em>adjectif</em>)</dt> <dd>La couleur du ciel lors d'un temps clair.<br> <em><q>Le ciel est bleu.</q></em></dd> - <dd>Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.<br> - <em><q>Un steak bleu s'il vous plaît.</q></em></dd> </dl> </blockquote> @@ -69,7 +65,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML </p></pre> <div class="note"> -<p>La spécification HTML <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element">met en avant l'attribut <code>title</code></a> pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut <code>title</code> ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également <a href="http://www.w3.org/TR/html/dom.html#attr-title">ce qui est noté dans les spécifications</a>.</p> +<p><strong>Note :</strong> La spécification HTML <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element">met en avant l'attribut <code>title</code></a> pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut <code>title</code> ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également <a href="http://www.w3.org/TR/html/dom.html#attr-title">ce qui est noté dans les spécifications</a>.</p> </div> <h3 id="Améliorer_l'accessibilité">Améliorer l'accessibilité</h3> @@ -91,7 +87,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML <p>Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).</p> <div class="note"> -<p>Les listes de descriptions <a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">ne doivent pas être utilisées pour retranscrire des dialogues</a>. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici <a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">quelques recommandations pour retranscrire un dialogue dans un document web</a>.</p> +<p><strong>Note :</strong> Les listes de descriptions <a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">ne doivent pas être utilisées pour retranscrire des dialogues</a>. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici <a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">quelques recommandations pour retranscrire un dialogue dans un document web</a>.</p> </div> <p>Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.</p> @@ -123,7 +119,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML </pre> <div class="note"> -<p>La structure de base qu'on voit dans cet exemple alterne les termes (<code><dt></code>) et leurs descriptions (<code><dd></code>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.</p> +<p><strong>Note :</strong> La structure de base qu'on voit dans cet exemple alterne les termes (<code><dt></code>) et leurs descriptions (<code><dd></code>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.</p> </div> <h3 id="Améliorer_l'aspect_visuel">Améliorer l'aspect visuel</h3> diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html index 62b8556ca8..e5f130e8ca 100644 --- a/files/fr/learn/html/howto/index.html +++ b/files/fr/learn/html/howto/index.html @@ -13,16 +13,14 @@ original_slug: Apprendre/HTML/Comment <p>HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :</p> -<div class="column-container"> -<div class="column-half"> <h3 id="Structure_de_base">Structure de base</h3> <p>En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :</p> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques">Comment diviser une page web en sections logiques</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres">Comment organiser une hiérarchie de titres</a></li> + <li><a href="/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li> + <li><a href="/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques">Comment diviser une page web en sections logiques</a></li> + <li><a href="/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres">Comment organiser une hiérarchie de titres</a></li> </ul> <h3 id="Sémantique_de_base_pour_le_texte">Sémantique de base pour le texte</h3> @@ -30,35 +28,32 @@ original_slug: Apprendre/HTML/Comment <p>Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.</p> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une liste d'éléments en HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">Comment fournir des informations de contact dans une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Comment marquer des abréviations et les rendre compréhensibles</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Comment définir des termes en HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une liste d'éléments en HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">Comment fournir des informations de contact dans une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Comment marquer des abréviations et les rendre compréhensibles</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Define_terms_with_HTML">Comment définir des termes en HTML</a></li> </ul> -</div> - -<div class="column-half"> <h3 id="Les_hyperliens">Les hyperliens</h3> <p>Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :</p> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une table des matières en HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une table des matières en HTML</a></li> </ul> <h3 id="Images_et_multimédia">Images et multimédia</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter une vidéo à une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter un contenu audio à une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter une vidéo à une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter un contenu audio à une page web</a></li> </ul> <h3 id="Script_et_mise_en_forme">Script et mise en forme</h3> @@ -66,25 +61,21 @@ original_slug: Apprendre/HTML/Comment <p>HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.</p> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Comment utiliser JavaScript dans une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Comment utiliser JavaScript dans une page web</a></li> </ul> <h3 id="Intégrer_du_contenu">Intégrer du contenu</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">Comment intégrer une page web dans une autre page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">Comment ajouter du contenu Flash dans une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">Comment intégrer une page web dans une autre page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">Comment ajouter du contenu Flash dans une page web</a></li> </ul> -</div> -</div> <h2 id="Problèmes_avancés_ou_rares">Problèmes avancés ou rares</h2> <p>Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :</p> -<div class="column-container"> -<div class="column-half"> <h3 id="Les_formulaires">Les formulaires</h3> <p>Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre <a href="/fr/docs/Web/Guide/HTML/Formulaires">le guide dédié aux formulaires</a>. Vous pouvez commencer ici :</p> @@ -99,42 +90,40 @@ original_slug: Apprendre/HTML/Comment <p>Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :</p> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Comment optimiser le rendu d'un tableau HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Comment optimiser le rendu d'un tableau HTML</a></li> </ul> <h3 id="La_représentation_de_données">La représentation de données</h3> <ul> - <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Comment associer du contenu lisible avec des structures de données informatiques arbitraires</a></li> + <li><a href="/fr/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Comment associer du contenu lisible avec des structures de données informatiques arbitraires</a></li> </ul> <h3 id="Interactivité">Interactivité</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Comment créer des boîtes de dialogue avec HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Comment créer des boîtes de dialogue avec HTML</a></li> </ul> -</div> -<div class="column-half"> <h3 id="Sémantique_avancée_pour_les_éléments_textuels">Sémantique avancée pour les éléments textuels</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Comment restituer des changements (du texte ajouté/retiré)</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Comment restituer des changements (du texte ajouté/retiré)</a></li> </ul> <h3 id="Images_et_multimédia_avancés">Images et multimédia avancés</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Comment ajouter une cartes de zones cliquables sur une image</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">Comment créer des images dynamiques et interactives</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Comment ajouter une cartes de zones cliquables sur une image</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">Comment créer des images dynamiques et interactives</a></li> </ul> <h3 id="L'internationalisation">L'internationalisation</h3> @@ -142,9 +131,7 @@ original_slug: Apprendre/HTML/Comment <p>HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.</p> <ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Comment ajouter plusieurs langages sur une seule page web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li> -</ul> -</div> -</div> + <li><a href="/fr/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Comment ajouter plusieurs langages sur une seule page web</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html index c920171729..e57980829e 100644 --- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html @@ -9,11 +9,9 @@ tags: translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web --- -<div class="summary"> <p>Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -31,7 +29,7 @@ original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web <p>{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.</p> <div class="note"> -<p>Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">les bases de JavaScript</a>. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter <a href="/en-US/docs/Web/JavaScript/Guide">le Guide JavaScript</a>.</p> +<p><strong>Note :</strong> Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur <a href="/fr/Learn/Getting_started_with_the_web/JavaScript_basics">les bases de JavaScript</a>. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter <a href="/fr/docs/Web/JavaScript/Guide">le Guide JavaScript</a>.</p> </div> <h2 id="Comment_déclencher_le_code_JavaScript_depuis_le_document_HTML">Comment déclencher le code JavaScript depuis le document HTML</h2> @@ -67,7 +65,7 @@ window.addEventListener('load', function () { <p>L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :</p> <ul> - <li><strong>Tout le contenu d'un document doit être disponible sous forme de texte (structuré).</strong> HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en <a href="/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML">listes non ordonnées</a> de <a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">liens</a>.</li> + <li><strong>Tout le contenu d'un document doit être disponible sous forme de texte (structuré).</strong> HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en <a href="/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML">listes non ordonnées</a> de <a href="/fr/Learn/HTML/Howto/Create_a_hyperlink">liens</a>.</li> <li><strong>Toutes les fonctionnalités doivent être accessibles depuis le clavier.</strong> <ul> <li>Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.</li> diff --git a/files/fr/learn/html/index.html b/files/fr/learn/html/index.html index 3e7ba5b847..95e31501ca 100644 --- a/files/fr/learn/html/index.html +++ b/files/fr/learn/html/index.html @@ -41,27 +41,21 @@ original_slug: Apprendre/HTML <dl> <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a></dt> <dd>Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a></dt> + <dt><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a></dt> <dd>Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">Tableaux HTML</a></dt> + <dt><a href="/fr/docs/Learn/HTML/Tables">Tableaux HTML</a></dt> <dd>Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Formulaire HTML</a></dt> + <dt><a href="/fr/docs/Learn/HTML/Forms">Formulaire HTML</a></dt> <dd>Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.</dd> </dl> -<article class="approved"> -<div class="boxed translate-rendered text-content"> <h2 id="Résolution_de_problèmes_courants_en_HTML">Résolution de problèmes courants en HTML</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Utilisation du HTML pour la solution de problèmes courants</a> fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.</p> +<p><a href="/fr/docs/Learn/HTML/Howto">Utilisation du HTML pour la solution de problèmes courants</a> fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.</p> <h2 id="Voir_aussi">Voir aussi</h2> -<div class="document-head" id="wiki-document-head"> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> sur MDN</dt> + <dt><a href="/fr/docs/Web/HTML">HTML (HyperText Markup Language)</a> sur MDN</dt> <dd>Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.</dd> -</dl> -</div> -</div> -</article> +</dl>
\ No newline at end of file diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html index 4a6d9d8f3a..d3602ccd19 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</p> +<p>Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -34,11 +34,11 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting </tbody> </table> -<h2 id="Listes_descriptives"><span>Listes descriptives</span></h2> +<h2 id="Listes_descriptives">Listes descriptives</h2> -<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">des listes simples en HTML</a>, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — <strong>les <span>listes descriptives</span></strong>. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :</p> +<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">des listes simples en HTML</a>, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — <strong>les listes descriptives</strong>. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :</p> -<pre class="notranslate">soliloque +<pre>soliloque Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce). monologue Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents. @@ -47,7 +47,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen <p>Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (<strong>d</strong>escription <strong>t</strong>erm) et chaque description d'un élément {{htmlelement("dd")}} (<strong>d</strong>escription <strong>d</strong>efinition). Terminons en balisant l'exemple ci‑dessus :</p> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt>soliloque</dt> <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd> <dt>monologue</dt> @@ -69,11 +69,13 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen <p>Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :</p> -<dl> - <dt>aparté</dt> - <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> - <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd> -</dl> +<pre class="brush: html"> +<dl> + <dt>aparté</dt> + <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> + <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd> +</dl> +</pre> <h3 id="Apprentissage_interactif_balisez_une_série_de_définitions">Apprentissage interactif : balisez une série de définitions</h3> @@ -81,10 +83,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen <p>Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, cliquez sur<em> Voir la solution</em>.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -108,7 +107,7 @@ Une couleur brun léger.</textarea> -<pre class="brush: css notranslate">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -130,7 +129,7 @@ body { -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -207,9 +206,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Citations">Citations</h2> @@ -219,38 +217,38 @@ textarea.onkeyup = function(){ <p>Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <code><blockquote></code> :</p> -<pre class="brush: html notranslate"><p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc +<pre class="brush: html"><p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p></pre> +<h4>Exemple de bloc de citation</h4> <p>Pour le changer en bloc de citation, on ferait simplement ceci :</p> -<pre class="brush: html notranslate"><blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p> </blockquote></pre> <p>Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :</p> - -<blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> -<p>L'<strong>Élément HTML <code><blockquote></code></strong> (ou <em>Élément HTML bloc de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p> -</blockquote> +<p>{{EmbedLiveSample("Blocs_de_citation")}}</p> <h3 id="Citations_en_ligne">Citations en ligne</h3> <p>Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <code><q></code> :</p> -<pre class="brush: html notranslate"><p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu +<h4>Exemple de citation en ligne</h4> + +<pre class="brush: html"><p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p></pre> <p>Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :</p> -<p>L'élément citation — <code><q></code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p> +<p>{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}</p> <h3 id="Citations_2">Citations</h3> <p>Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un <code>cite</code> sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <code><cite></code> à la source de la citation d'une manière ou d'une autre :</p> -<pre class="brush: html notranslate"><p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html"><p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> <cite>page blockquote du MDN</cite></a>: </p> @@ -285,10 +283,7 @@ pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p <p>Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour obtenir la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -307,7 +302,7 @@ pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -327,7 +322,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -404,15 +399,14 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Abréviations">Abréviations</h2> <p>Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :</p> -<pre class="notranslate"><p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> +<pre><p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> <p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p></pre> @@ -425,17 +419,14 @@ textarea.onkeyup = function(){ <p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p> <div class="note"> -<p><strong>Note </strong>: Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <code><abbr></code>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.</p> +<p><strong>Note :</strong> Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <code><abbr></code>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.</p> </div> <h3 id="Apprentissage_actif_marquer_une_abréviation">Apprentissage actif : marquer une abréviation</h3> <p>Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.</p> -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -452,7 +443,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -472,7 +463,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -549,21 +540,20 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<div>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</div> +<div>{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}</div> <h2 id="Balisage_des_détails_de_contact">Balisage des détails de contact</h2> <p>HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Chris Mills, Manchester, The Grim North, UK</p> </address></pre> <p>Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas <em>n'importe quelle</em> adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :</p> -<pre class="brush: html notranslate"><address> +<pre class="brush: html"><address> <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p> </address></pre> @@ -571,7 +561,7 @@ textarea.onkeyup = function(){ <p>Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :</p> -<pre class="brush: html notranslate"><p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> +<pre class="brush: html"><p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> <p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> <p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p></pre> @@ -581,7 +571,7 @@ textarea.onkeyup = function(){ <p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> -<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p> +<p>Si x^2 égale 9, x doit valoir 3 ou -3.</p> <h2 id="Représentation_du_code_informatique">Représentation du code informatique</h2> @@ -597,10 +587,10 @@ textarea.onkeyup = function(){ <p>Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>) :</p> -<pre class="brush: html notranslate"><pre><code>var para = document.querySelector('p'); +<pre class="brush: html"><pre><code>var para = document.querySelector('p'); para.onclick = function() { - alert('<span>Owww, arrête de me toucher !</span>'); + alert('Owww, arrête de me toucher !'); }</code></pre> <p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p> @@ -623,7 +613,7 @@ para.onclick = function() { <p>HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :</p> -<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 janvier 2016</<span class="pl-ent">time</span>></pre> +<pre class="brush: html"><time datetime="2016-01-20">20 janvier 2016</time></pre> <p>En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :</p> @@ -634,31 +624,31 @@ para.onclick = function() { <li>20/01/16</li> <li>01/20/16</li> <li>Le 20 du mois prochain</li> - <li><span lang="fr">20e Janvier 2016</span></li> - <li><span lang="ja">2016年1月20日</span></li> - <li><span lang="ja">etc.</span></li> + <li>20e Janvier 2016</li> + <li>2016年1月20日</li> + <li>etc.</li> </ul> <p>Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.</p> <p>L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :</p> -<pre class="brush: html notranslate"><!-- Simple date standard --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 janvier 2016</<span class="pl-ent">time</span>> +<pre class="brush: html"><!-- Simple date standard --> +<time datetime="2016-01-20">20 janvier 2016</time> <!-- Juste l'année et le mois --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>janvier 2016</<span class="pl-ent">time</span>> +<time datetime="2016-01">janvier 2016</time> <!-- Juste le mois et les jour --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 janvier</<span class="pl-ent">time</span>> +<time datetime="01-20">20 janvier</time> <!-- Juste l'heure, heure et minutes --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19h30</<span class="pl-ent">time</span>> +<time datetime="19:30">19h30</time> <!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19h30m1,856s</<span class="pl-ent">time</span>> +<time datetime="19:30:01.856">19h30m1,856s</time> <!-- Date et heure --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>19h30, le 20 janvier 2016</<span class="pl-ent">time</span>> +<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> <!-- Date et heure avec décalage de fuseau horaire --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>19h30, le 20 janvier 2016 corespond à 20h30 en France</<span class="pl-ent">time</span>> +<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time> <!-- Appel d'un numéro de semains donné --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>La 4e semaine de 2016</<span class="pl-ent">time</span>></pre> +<time datetime="2016-W04">La 4e semaine de 2016</time></pre> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html index 95ce137c9b..abaeb6d167 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <div>{{LearnSidebar}}<br> {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web <em>une toile</em>. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.</p> +<p>Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web <em>une toile</em>. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -39,30 +39,30 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web <em>une toile</em> — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).</p> <div class="note"> -<p><strong>Note </strong>: Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).</p> +<p><strong>Note :</strong> Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).</p> </div> <p>La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.</p> -<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="bbc-homepage.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="bbc-homepage.png"></p> <h2 id="Anatomie_dun_lien">Anatomie d'un lien</h2> <p>Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une <strong>Hypertext Reference</strong>) contenant l'adresse web vers laquelle vous voulez que le lien pointe.</p> -<pre class="brush: html notranslate"><p>Je suis en train de créer un lien à +<pre class="brush: html"><p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>. </p></pre> <p>qui donne le résultat suivant :</p> -<p>Je suis en train de créer un lien à <a class="ignore-external" href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p> +<p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p> <h3 id="Ajouter_des_informations_dassistance_avec_lattribut_title">Ajouter des informations d'assistance avec l'attribut title</h3> <p>L'autre attribut qu'il est possible d'ajouter à un lien est <code>title</code> ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :</p> -<pre class="brush: html notranslate"><p>Je suis en train de créer un lien à +<pre class="brush: html"><p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>. @@ -70,10 +70,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Voici le résultat (le contenu de <code>title</code> apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :</p> -<p>Je suis en train de créer un lien vers <a class="ignore-external" href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil de Mozilla</a></p> +<p>Je suis en train de créer un lien vers <a href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil de Mozilla</a></p> <div class="note"> -<p><strong>Note </strong>: le <code>title</code> d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de <code>title</code>. Si une information de <code>title</code> est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.</p> +<p><strong>Note :</strong> le <code>title</code> d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de <code>title</code>. Si une information de <code>title</code> est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.</p> </div> <h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3> @@ -90,12 +90,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne">éléments bloc </a>. Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <code><a></a></code>.</p> -<pre class="brush: html notranslate"><a href="https://www.mozilla.org/fr/"> +<pre class="brush: html"><a href="https://www.mozilla.org/fr/"> <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"> </a></pre> <div class="note"> -<p><strong>Note </strong>: Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.</p> +<p><strong>Note :</strong> Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.</p> </div> <h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2> @@ -106,7 +106,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <p>Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> -<p><img alt="Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf." src="dir-struct.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf." src="dir-struct.png"></p> <p>La <strong>racine</strong> de cette structure de répertoires s'appelle <code>creating-hyperlinks</code>. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier <code>index.html</code> et un <code>contacts.html</code>. Sur un site réel, <code>index.html</code> serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).</p> @@ -116,38 +116,38 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <li> <p><strong>Dans un même dossier </strong>: si vous voulez inclure un hyperlien dans <code>index.html</code> (celui de plus haut niveau) pointant vers <code>contacts.html</code>, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est <code>contacts.html</code> :</p> - <pre class="brush: html notranslate"><p>Voulez‑vous rencontrer un membre du personnel en particulier ? + <pre class="brush: html"><p>Voulez‑vous rencontrer un membre du personnel en particulier ? Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p></pre> </li> <li> <p><strong>Descendre dans les sous-répertoires </strong>: si vous désirez inclure un hyperlien dans <code>index.html</code> (<code>celui</code> de plus haut niveau) pointant vers <code>projects/index.html</code>, vous avez besoin de descendre dans le dossier<code>projects</code> avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera <code>projects/index.html</code> :</p> - <pre class="brush: html notranslate"><p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p></pre> + <pre class="brush: html"><p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p></pre> </li> <li> <p><strong>Monter dans les dossiers parents </strong>: si vous voulez inclure un hyperlien dans <code>projects/index.html</code> qui pointe vers <code>pdfs/projects-brief.pdf</code>, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier <code>pdfs</code>. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — <code>..</code> —, de sorte que l'URL à utiliser sera <code>../pdfs/project‑brief.pdf</code> :</p> - <pre class="brush: html notranslate"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> + <pre class="brush: html"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> </li> </ul> <div class="note"> -<p><strong>Note </strong>: Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. <code>../../../complexe/path/to/my/file.html</code>.</p> +<p><strong>Note :</strong> Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. <code>../../../complexe/path/to/my/file.html</code>.</p> </div> <h3 id="Fragments_de_documents">Fragments de documents</h3> <p>Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme <strong>fragment de document</strong>), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :</p> -<pre class="brush: html notranslate"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> +<pre class="brush: html"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> <p>Puis, pour faire un lien vers cet <code>id</code> précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :</p> -<pre class="brush: html notranslate"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> +<pre class="brush: html"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> <p>Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers <em>une autre partie du même document</em> :</p> -<pre class="brush: html notranslate"><p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p></pre> +<pre class="brush: html"><p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p></pre> <h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3> @@ -184,13 +184,13 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a& <p><em><strong>Bon</strong> texte de lien:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Télécharger Firefox </a></p></pre> <p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p> -<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> +<pre class="brush: html"><p><a href="https://firefox.com/"> Cliquer ici </a> pour télécharger Firefox</p> @@ -225,7 +225,7 @@ pour télécharger Firefox</p> <p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p> -<pre class="brush: html notranslate"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> +<pre class="brush: html"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> Télécharger le rapport des ventes (PDF, 10Mo) </a></p> @@ -241,10 +241,10 @@ pour télécharger Firefox</p> <p>Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut <code>download</code> pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :</p> -<pre class="notranslate"><code><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" download="firefox-latest-64bit-installer.exe"> Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France) -</a></code></pre> +</a></pre> <h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2> @@ -270,10 +270,10 @@ pour télécharger Firefox</p> <p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p> -<p><img alt="Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux." src="accueil.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux." src="accueil.png"></p> <div class="note"> -<p><strong>Note </strong>: si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> pour voir la réponse correcte.</p> +<p><strong>Note :</strong> si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> pour voir la réponse correcte.</p> </div> <h2 id="Liens_de_courriel">Liens de courriel</h2> @@ -282,7 +282,7 @@ pour télécharger Firefox</p> <p>Sous sa forme la plus basique et la plus communément utilisée, un lien <code>mailto:</code> indique simplement l'adresse du destinataire voulu. Par exemple :</p> -<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> +<pre class="brush: html"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> </pre> <p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p> @@ -295,7 +295,7 @@ pour télécharger Firefox</p> <p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p> -<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel"> +<pre class="brush: html"><a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel"> Envoyer un mail avec copie, copie cachée, sujet et corps de message </a></pre> diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.html b/files/fr/learn/html/introduction_to_html/debugging_html/index.html index 34d758d938..ed0cfa6a2b 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.</p> +<p>Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -36,7 +36,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <p>Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.</p> -<p><img alt="Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne »." src="fr-erreur.png" style="display: block; margin: 0px auto;">Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez <code>println!(Salut, Ô Monde!");</code> il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.</p> +<p><img alt="Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne »." src="fr-erreur.png">Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez <code>println!(Salut, Ô Monde!");</code> il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.</p> <p>Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.</p> @@ -60,7 +60,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <p>HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !</p> <div class="note"> -<p><strong>Note </strong>: HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.</p> +<p><strong>Note :</strong> HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.</p> </div> <h3 id="Apprentissage_actif_étude_avec_un_code_permissif">Apprentissage actif : étude avec un code permissif</h3> @@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <ol> <li>Primo, télécharchez notre démo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example </a>et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit <strong>malformé</strong>, par opposition à <strong>bien-formé</strong>).</li> - <li>Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :<img alt="Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. " src="fr-html-errone.png" style="display: block; margin: 0px auto;"></li> + <li>Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :<img alt="Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. " src="fr-html-errone.png"></li> <li>Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément <code>body</code> est affiché) : <pre> <h1>Exemple de HTML à déboguer</h1> @@ -100,7 +100,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML </ul> </li> <li>Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">Découverte des outils de développement du navigateur</a>.</li> - <li>Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : <img alt="L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur." src="fr-inspecteur.png" style="display: block; margin: 0px auto;"></li> + <li>Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : <img alt="L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur." src="fr-inspecteur.png"></li> <li>Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes <em>devraient</em> donner le même résultat) : <ul> <li>Les éléments <code>p</code> et <code>li</code> ont été pourvus de balises fermantes.</li> @@ -127,9 +127,9 @@ en HTML. Voici un exemple :</strong> <p>La meilleure stratégie consiste à faire passer votre page HTML par le <a href="https://validator.w3.org/">Markup Validation Service (</a>Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.</p> -<p><img alt="La page d'accueil du validateur HTML" src="fr-w3c.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="La page d'accueil du validateur HTML" src="fr-w3c.png"></p> -<p>Pour définir le HTML à valider, vous pouvez donner une adresse web (<em><span>Validate by</span> URI</em>) , téléverser un fichier HTML (<em>Validate by File Upload</em>) ou entrer directement du code HTML (<em>Validate by Direct Input</em>).</p> +<p>Pour définir le HTML à valider, vous pouvez donner une adresse web (<em>Validate by URI</em>) , téléverser un fichier HTML (<em>Validate by File Upload</em>) ou entrer directement du code HTML (<em>Validate by Direct Input</em>).</p> <h3 id="Apprentissage_actif_validation_d'un_document_HTML">Apprentissage actif : validation d'un document HTML</h3> @@ -144,7 +144,7 @@ en HTML. Voici un exemple :</strong> <p>Cela vous donnera une liste d'erreurs et autres informations.</p> -<p><img alt="La liste des résultats de la validation de HTML par le service de validation du W3C." src="fr-liste-erreur.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="La liste des résultats de la validation de HTML par le service de validation du W3C." src="fr-liste-erreur.png"></p> <h4 id="Interprétation_des_messages_d'erreur">Interprétation des messages d'erreur</h4> @@ -159,7 +159,7 @@ en HTML. Voici un exemple :</strong> <pre>exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html></pre> <div class="note"> - <p><strong>Note</strong> : un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.</p> + <p><strong>Note :</strong> un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.</p> </div> </li> <li>« Unclosed element <code>ul</code> » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} <em>est</em> correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.</li> @@ -167,9 +167,9 @@ en HTML. Voici un exemple :</strong> <p>Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.</p> -<p>Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie <span>: </span></p> +<p>Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : </p> -<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="valid-html-banner.png" style="display: block; margin: 0 auto;"></p> +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="valid-html-banner.png"></p> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html index 37fcd02cc2..2ffb0e3cdf 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}<br> </div> -<p class="summary">De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</p> +<p>De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -56,7 +56,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur Un « site web typique » pourrait ressembler à quelque chose comme ceci :</dd> </dl> -<p><img alt="un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page." src="ecran.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page." src="ecran.png"></p> <h2 id="HTML_pour_structurer_un_contenu">HTML pour structurer un contenu</h2> @@ -65,7 +65,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur <p>C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?</p> <div class="note"> -<p><strong>Note </strong>: Les daltoniens représentent environ <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a> ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait <a href="https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle">285 millions de personnes aveugles et malvoyantes</a> dans le monde, alors que la population totale était <a href="https://fr.wikipedia.org/wiki/Population_mondiale">d'environ 7 milliards </a>d'habitants).</p> +<p><strong>Note :</strong> Les daltoniens représentent environ <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a> ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait <a href="https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle">285 millions de personnes aveugles et malvoyantes</a> dans le monde, alors que la population totale était <a href="https://fr.wikipedia.org/wiki/Population_mondiale">d'environ 7 milliards </a>d'habitants).</p> </div> <p>Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure">ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences</a>.</p> @@ -174,7 +174,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur <ul> <li>{{HTMLElement('main')}} est relatif au contenu <em>unique de la page</em>. N'utilisez <code><main></code> que une seule fois par page et placez-le directement à l'intérieur de l'élement {{HTMLElement('body')}}. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments.</li> <li>{{HTMLElement('article')}} entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.)</li> - <li>{{HTMLElement('section')}} ressemble à <code><article></code>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un <code><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">heading</a></code> ; notez également que vous pouvez fractionner un <code><article></code> en plusieurs <code><section></code> ou bien des <code><section></code> en divers <code><article></code>, selon le contexte.</li> + <li>{{HTMLElement('section')}} ressemble à <code><article></code>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un <code><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">heading</a></code> ; notez également que vous pouvez fractionner un <code><article></code> en plusieurs <code><section></code> ou bien des <code><section></code> en divers <code><article></code>, selon le contexte.</li> <li>{{HTMLElement('aside')}} contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc).</li> <li>{{HTMLElement('header')}} représente un groupe de contenus introductoires. Enfant de {{HTMLElement('body')}}, il définit l'en-tête général de la page web, mais enfant de {{HTMLElement('article')}} ou {{HTMLElement('section')}} il définit un en‑tête propre à cette section (ne confondez pas <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter%20un%20titre">titles et headings</a>).</li> <li>{{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.</li> @@ -212,7 +212,7 @@ alors qu'il titubait en travers de la porte <span class="editor-note"> <p>Ce n'est pas vraiment un élément <code><aside></code> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <code><section></code>, car il ne fait pas partie du contenu principal de la page. Donc un <code><div></code> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.</p> <div class="warning"> -<p><strong>Avertissement</strong> : les <code>div</code> sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.</p> +<p><strong>Attention :</strong> les <code>div</code> sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.</p> </div> <h3 id="Sauts_de_ligne_et_traits_horizontaux">Sauts de ligne et traits horizontaux</h3> @@ -226,7 +226,7 @@ Qui aimait écrire du HTML<br> Mais ses structures et sémantiques affligeantes<br> rendaient de ses marquages la lecture inélégante.</p></pre> -<p>Sans éléments <code><br></code>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html">HTML ignore la plupart des blancs</a>) ; avec des <br> dans le code, voici le rendu de ce qui précède :</p> +<p>Sans éléments <code><br></code>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html">HTML ignore la plupart des blancs</a>) ; avec des <br> dans le code, voici le rendu de ce qui précède :</p> <p>Il y avait une fois une fille nommée Nell<br> Qui aimait écrire du HTML<br> @@ -235,27 +235,25 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <p><code>Les éléments <hr></code> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :</p> +<h3>Exemple avec hr</h3> + <pre><p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p> <hr> <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p></pre> <p>sera rendu ainsi :</p> - -<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p> - -<hr> -<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p> +<p>{{EmbedLiveSample("Exemple_avec_hr")}}</p> <h2 id="Planification_dun_site_web_simple">Planification d'un site web simple</h2> <p>Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !</p> <ol> - <li>Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. <img alt="les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité." src="fr_commun.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. <img alt="Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page." src="fr-structure.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. <img alt="Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays." src="fr-liste.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.<img alt="Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter." src="fr-tri.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> - <li>Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. <img alt="Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat." src="fr-map.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> + <li>Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. <img alt="les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité." src="fr_commun.png"></li> + <li>Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. <img alt="Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page." src="fr-structure.png"></li> + <li>Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. <img alt="Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays." src="fr-liste.png"></li> + <li>Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.<img alt="Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter." src="fr-tri.png"></li> + <li>Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. <img alt="Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat." src="fr-map.png"></li> </ol> <h3 id="Apprentissage_actif_créez_la_cartographie_de_votre_propre_site">Apprentissage actif : créez la cartographie de votre propre site</h3> @@ -263,7 +261,7 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <p>Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?</p> <div class="note"> -<p><strong>Note </strong>: Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.</p> +<p><strong>Note :</strong> Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -273,7 +271,7 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">Using HTML sections and outlines </a>: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.</li> + <li><a href="/fr/docs/Web/HTML/Element/Heading_Elements">Using HTML sections and outlines </a>: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.</li> </ul> <p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</p> diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html index 5636377789..dce8e89b0e 100644 --- a/files/fr/learn/html/introduction_to_html/getting_started/index.html +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.</p> +<p>Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -44,14 +44,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <pre class="brush: html"><p>Mon chat est très grincheux</p></pre> <div class="note"> -<p><strong>Note : </strong>Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.</p> +<p><strong>Note :</strong> Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.</p> </div> <h2 id="Anatomie_d'un_élément_HTML">Anatomie d'un élément HTML</h2> <p>Regardons notre élément paragraphe d'un peu plus près :</p> -<p><img alt="" src="chat-grincheuxl.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="" src="chat-grincheuxl.png"></p> <p>Les principales parties de notre élément sont :</p> @@ -68,10 +68,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <p>Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -88,7 +85,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started </div> </pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -109,7 +106,7 @@ body { } </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -186,9 +183,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}</p> <h3 id="Eléments_imbriqués">Eléments imbriqués</h3> @@ -223,15 +219,15 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}</p> <div class="note"> -<p><strong>Note </strong>: HTML5 a redéfini les catégories d'éléments dans HTML5 : voir <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">catégories de contenu d'éléments</a>. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.</p> +<p><strong>Note :</strong> HTML5 a redéfini les catégories d'éléments dans HTML5 : voir <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">catégories de contenu d'éléments</a>. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.</p> </div> <div class="note"> -<p> <strong>Note</strong> : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">les types de boîtes des CSS </a>portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.</p> +<p><strong>Note :</strong> les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">les types de boîtes des CSS </a>portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.</p> </div> <div class="note"> -<p><strong>Note </strong>: Vous trouverez des pages de référence utiles incluant des listes d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne">éléments en ligne</a>.</p> +<p><strong>Note :</strong> Vous trouverez des pages de référence utiles incluant des listes d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne">éléments en ligne</a>.</p> </div> <h3 id="Éléments_vides">Éléments vides</h3> @@ -248,7 +244,7 @@ textarea.onkeyup = function(){ <p>Les éléments peuvent aussi avoir des attributs, qui comme suit:</p> -<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="attribut-chat-grincheux.png" style="display: block; margin: 0px auto;"></p> +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="attribut-chat-grincheux.png"></p> <p>Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut <code>class</code> vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un <a href="/fr/docs/Web/CSS">style CSS</a> ou un comportement particulier, par exemple.</p> @@ -274,10 +270,7 @@ textarea.onkeyup = function(){ <p>Si vous faites une erreur, vous pouvez toujours réinitialiser la <em>zone de saisie</em> en cliquant sur le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, cliquez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -294,7 +287,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -314,7 +307,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -391,9 +384,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}</p> <h3 id="Les_attributs_booléens">Les attributs booléens</h3> @@ -488,12 +480,12 @@ textarea.onkeyup = function(){ </ol> <div class="note"> -<p><strong>Note</strong>: Vous pouvez également trouver ce modèle HTML dans le<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html"> dépôt GitHub MDN Learning Area</a>.</p> +<p><strong>Note :</strong> Vous pouvez également trouver ce modèle HTML dans le<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html"> dépôt GitHub MDN Learning Area</a>.</p> </div> <p>Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:</p> -<p><img alt="Une simple page HTML affichant Voici ma page" src="fr-capture-modele.png" style="display: block; margin: 0px auto;">Dans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :</p> +<p><img alt="Une simple page HTML affichant Voici ma page" src="fr-capture-modele.png">Dans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :</p> <ul> <li>Au début du document, juste après la balise d'ouverture <body>, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante <h1> et la balise fermante </ h1> ;</li> @@ -505,10 +497,7 @@ textarea.onkeyup = function(){ <p>Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour l'afficher.</p> -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<pre class="brush: html"><h2>Zone de rendu</h2> +<pre class="brush: html hidden"><h2>Zone de rendu</h2> <div class="output" style="min-height: 50px;"> </div> @@ -525,7 +514,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -549,7 +538,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -626,9 +615,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> <h3 id="Espace_vide_en_HTML">Espace vide en HTML</h3> @@ -689,7 +677,7 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note</strong>: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : <a href="https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML">Liste des entités caractère de XML et HTML</a>.</p> +<p><strong>Note :</strong> Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : <a href="https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML">Liste des entités caractère de XML et HTML</a>.</p> </div> <h2 id="Commentaires_en_HTML">Commentaires en HTML</h2> @@ -711,7 +699,7 @@ textarea.onkeyup = function(){ <p>Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !</p> <div class="note"> -<p><strong>Note</strong>: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style <a href="/fr/docs/Learn/CSS">CSS</a>. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.</p> +<p><strong>Note :</strong> À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style <a href="/fr/docs/Learn/CSS">CSS</a>. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.</p> </div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html index b0755184e9..213a383e88 100644 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> -<p class="summary">L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.</p> +<p>L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis:</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <p>La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.</p> -<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg"></p> <p>Le contenu structuré facilite la lecture et la rend plus agréable.</p> @@ -90,7 +90,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <p>Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !</p> -<p><img alt="Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer." src="recette.png" style="display: block; margin: 0px auto;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> +<p><img alt="Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer." src="recette.png"></p> <p>Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :</p> @@ -109,10 +109,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <p>Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton <em>Réinitialiser</em>. Si vous êtes bloqués, appuyez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 50px;"> </div> @@ -129,7 +126,7 @@ Mes jambes sont en carton et je suis mariée à un poisson.</textarea> <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -149,7 +146,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -227,9 +224,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 370) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}</p> <h3 id="Pourquoi_a-t-on_besoin_de_sémantique">Pourquoi a-t-on besoin de sémantique ?</h3> @@ -282,11 +278,7 @@ houmous <p>Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -304,7 +296,7 @@ houmous</textarea> <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -324,7 +316,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -402,9 +394,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}</p> <h3 id="Listes_ordonnées">Listes ordonnées</h3> @@ -430,11 +421,7 @@ Roulez sur 300 mètres, l'école est sur votre droite</pre> <p>Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.</p> -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 50px;"> </div> @@ -453,7 +440,7 @@ Roulez sur 300 mètres, l'école est sur votre droite</textarea> <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -473,7 +460,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -551,18 +538,14 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}</p> <h3 id="Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine">Apprentissage actif : mettre des balises pour une recette de cuisine</h3> <p>Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.</p> -<div class="hidden"> -<h6 id="Playable_code_4">Playable code</h6> - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 50px;"> </div> @@ -605,7 +588,7 @@ textarea.onkeyup = function(){ <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -625,7 +608,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -703,9 +686,8 @@ function insertAtCaret(text) { updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}</p> <p>Si vous êtes bloqué, vous pouvez cliquer sur le bouton <em>Voir la solution</em>, ou alors regarder l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> sur le dépôt GitHub.</p> @@ -775,14 +757,11 @@ function insertAtCaret(text) { <pre class="brush: html"><p>Ce liquide est <strong>hautement toxique</strong> — si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p></pre> -<h3 id="Apprentissage_actif_soulignez_l'important_!">Apprentissage actif : soulignez l'important !</h3> +<h3 id="Apprentissage_actif_soulignez_l'important">Apprentissage actif : soulignez l'important</h3> <p>Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.</p> -<div class="hidden"> -<h6 id="Playable_code_5">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -804,7 +783,7 @@ si vous en buvez, <strong>vous pourriez en <em>mourir</em>< <input id="solution" type="button" value="Voir la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -825,7 +804,7 @@ body { }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -902,9 +881,8 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}</p> <h3 id="Italique_gras_soulignement…">Italique, gras, soulignement…</h3> @@ -916,12 +894,12 @@ textarea.onkeyup = function(){ <ul> <li>{{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée…</li> - <li>{{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, <span>une phrase liminaire</span>…</li> + <li>{{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…</li> <li>{{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...</li> </ul> <div class="note"> -<p>Un petit avertissement à propos du soulignement : <strong>les gens associent fortement soulignement et hyperliens</strong>. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <code><u></code> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.</p> +<p><strong>Note :</strong> Un petit avertissement à propos du soulignement : <strong>les gens associent fortement soulignement et hyperliens</strong>. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <code><u></code> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.</p> </div> <pre class="brush: html"><!-- noms scientifiques --> diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html index fdd62cd744..d4a5b51dbd 100644 --- a/files/fr/learn/html/introduction_to_html/index.html +++ b/files/fr/learn/html/introduction_to_html/index.html @@ -16,14 +16,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML --- <div>{{LearnSidebar}}</div> -<p class="summary">Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.</p> +<p>Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.</p> <h2 id="Prérequis">Prérequis</h2> <p>Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">cet article</a> et comprendre comment créer et gérer des fichiers tel qu'expliqué dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">cet autre article</a> — ces deux articles font partie du module <a href="/fr/docs/Learn/Getting_started_with_the_web">Démarrer avec le Web</a> qui s'adresse aux débutants.</p> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html index 748b35d142..faa34e068d 100644 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -16,9 +16,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <code><head></code> en HTML.</p> +<p>Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <code><head></code> en HTML.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index e3ce2ceabc..0fa7c74921 100644 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -7,9 +7,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <div>{{LearnSidebar}}<br> {{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.</p> +<p>Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -61,7 +61,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <li>appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.</li> </ul> -<h2 id="Conseils_et_astuces"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.5px;"><strong>Conseils et astuces</strong></span></font></h2> +<h2 id="Conseils_et_astuces"><strong>Conseils et astuces</strong></h2> <ul> <li>Utilisez le « <a href="https://validator.w3.org/">W3C HTML validator »</a> pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).</li> @@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <p>La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.</p> -<p><img alt="L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue." src="oiseaux.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue." src="oiseaux.png"></p> <h2 id="Évaluation">Évaluation</h2> diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 8bb80d773c..af254c337d 100644 --- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -8,9 +8,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.</p> +<p>L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <h2 id="Quest-ce_que_len-tête_de_HTML">Qu'est-ce que l'en-tête de HTML ?</h2> -<p>Revoyons le document HTML de base de l' <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document">article précédent</a>:</p> +<p>Revoyons le document HTML de base de l' <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document">article précédent</a>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -40,12 +40,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :</p> -<pre class="brush: html notranslate"><head> +<pre class="brush: html"><head> <meta charset="utf-8"> <title>Ma page test</title> </head></pre> -<p>Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.</p> +<p>Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.</p> <h2 id="Ajouter_un_titre">Ajouter un titre</h2> @@ -67,7 +67,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML </ol> </li> <li>Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : - <p><img alt="Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>." src="fr-element-title.png" style="display: block; margin: 0px auto;">Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <code><title></code> apparaît !</p> + <p><img alt="Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>." src="fr-element-title.png">Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <code><title></code> apparaît !</p> </li> <li> <p>Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.</p> @@ -76,7 +76,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Le contenu de l'élément <code><title></code> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( <em>Marques-pages > Marquer cette page</em> ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <code><title></code> est suggéré comme nom pour le marque-page.</p> -<p><img alt="Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>." src="fr-bookmarked.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>." src="fr-bookmarked.png"></p> <p>Le contenu de <code><title></code> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.</p> @@ -88,27 +88,27 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :</p> -<pre class="brush: html notranslate"><meta charset="utf-8"></pre> +<pre class="brush: html"><meta charset="utf-8"></pre> <p>Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. <code>utf-8</code> <em> </em>est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :</p> -<p><img alt="Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement." src="fr-meta-utf8.png" style="display: block; margin: 0px auto;">Si vous définissez votre encodage de caractères en <code>ISO-8859-1</code> , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :</p> +<p><img alt="Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement." src="fr-meta-utf8.png">Si vous définissez votre encodage de caractères en <code>ISO-8859-1</code> , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :</p> -<p><img alt="Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement." src="fr-meta-iso.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement." src="fr-meta-iso.png"></p> <div class="note"> -<p><strong>Note</strong> : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage <code>utf-8</code> sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.</p> +<p><strong>Note :</strong> Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage <code>utf-8</code> sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.</p> </div> <h3 id="Apprentissage_actif_expérience_avec_lencodage_des_caractères">Apprentissage actif : expérience avec l'encodage des caractères</h3> -<p><span id="result_box" lang="fr"><span>Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <code><title></code> (la page </span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a><span lang="fr"><span>), faites un essai de modification de la valeur de la métadonnée <code>charset</code> en ISO-8859-1 et ajoutez le japonais à votre page</span><span>.</span> Voici<span> le code que nous avons utilisé :</span></span></p> +<p>Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <code><title></code> (la page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), faites un essai de modification de la valeur de la métadonnée <code>charset</code> en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :</p> -<pre class="brush: html notranslate"><p>Japanese example: ご飯が熱い。</p></pre> +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> <h3 id="Ajouter_le_nom_de_lauteur_et_une_description">Ajouter le nom de l'auteur et une description</h3> -<p><span id="result_box" lang="fr"><span>De nombreux éléments <code><meta></code> icontiennent les attributs <code>name</code> et <code>content</code> :</span></span></p> +<p>De nombreux éléments <code><meta></code> icontiennent les attributs <code>name</code> et <code>content</code> :</p> <ul> <li><code>name</code> définit le type de méta élément ; le type d'informations contenu.</li> @@ -117,10 +117,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <p>Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :</p> -<pre class="brush: html notranslate"><meta name="author" content="Chris Mills"> -<meta name="description" content="<span id="result_box" lang="fr"><span>La Zone Apprentissage des documents web -du MDN a pour but de donner </span><span>aux débutants du Web tout ce qu'ils doivent -savoir pour commencer le développement de pages webs et d'applications</span><span>.</span></span>"></pre> +<pre class="brush: html"><meta name="author" content="Chris Mills"> +<meta name="description" content="La Zone Apprentissage des documents web +du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent +savoir pour commencer le développement de pages webs et d'applications."></pre> <p>Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.</p> @@ -134,24 +134,24 @@ savoir pour commencer le développement de pages webs et d'applications</span><s <li>Allez sur la page d'accueil de <a href="/fr/">Mozilla Developer Network</a>.</li> <li>Regardez le source de la page (Clic droit/<kbd>Ctrl</kbd>, choissisez « <em>Code source de la page</em> » dans le menu contextuel.)</li> <li>Trouvez la balise méta <code>description</code>. Elle ressemble à ceci : - <pre id="line1"><meta name="description" content="<span><a class="attribute-value">MDN Web Docs fournit + <pre><meta name="description" content="<a class="attribute-value">MDN Web Docs fournit des informations sur les technologies web ouvertes comme HTML, CSS et les API utilisées pour les sites web et les applications web. On y trouve également de la documentation destinées aux développeurs à propos des produits Mozilla tels que les - outils de développement de Firefox.</a>"></span></pre> + outils de développement de Firefox.</a>"></pre> </li> <li>Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <code><meta></code> description et de l'élément <code><title></code> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! - <p><img alt='Une page de recherche Google pour "MDN web docs"' src="fr-google.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + <p><img alt='Une page de recherche Google pour "MDN web docs"' src="fr-google.png"></p> </li> </ol> <div class="note"> -<p><strong>Note</strong> : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de <a href="https://www.google.com/webmasters/tools/">Google's webmaster tools</a> - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.</p> +<p><strong>Note :</strong> Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de <a href="https://www.google.com/webmasters/tools/">Google's webmaster tools</a> - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.</p> </div> <div class="note"> -<p><strong>Note</strong>: Plusieurs fonctions <code><meta></code> ne sont plus utilisées. Par exemple, l'élément <code><meta></code> <code>keyword</code> (<code><meta name= "keywords" content="mettez, vos, mot-clés, ici"></code>) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.</p> +<p><strong>Note :</strong> Plusieurs fonctions <code><meta></code> ne sont plus utilisées. Par exemple, l'élément <code><meta></code> <code>keyword</code> (<code><meta name= "keywords" content="mettez, vos, mot-clés, ici"></code>) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.</p> </div> <h3 id="Autres_types_de_métadonnées">Autres types de métadonnées</h3> @@ -160,23 +160,23 @@ savoir pour commencer le développement de pages webs et d'applications</span><s <p>Par exemple, <a href="https://ogp.me/">Open Graph Data</a> est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :</p> -<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> -<meta property="og:description" content=<span>"<a class="attribute-value">MDN Web Docs fournit des +<pre class="brush: html"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> +<meta property="og:description" content="<a class="attribute-value">MDN Web Docs fournit des informations sur les technologies web ouvertes comme HTML, CSS et les API utilisées pour les sites web et les applications web. On y trouve également de la documentation destinées aux développeurs à propos des produits -Mozilla tels que les outils de développement de Firefox.</a>"></span> +Mozilla tels que les outils de développement de Firefox.</a>"> <meta property="og:title" content="Mozilla Developer Network"></pre> <p>En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.</p> -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="facebook-output.png" style="display: block; margin: 0 auto;">Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:</p> +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="facebook-output.png">Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:</p> -<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> <h2 id="Ajouter_des_icônes_personnalisées_à_un_site">Ajouter des icônes personnalisées à un site</h2> -<p><span id="result_box" lang="fr"><span>Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.</span></span></p> +<p>Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.</p> <p>La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.</p> @@ -185,17 +185,17 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <ol> <li>Enregistrez-la dans le même répertoire que la page d'index du site, sous le format <code>.ico</code> (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme <code>.gif</code> ou <code>.png</code>, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)</li> <li>Ajoutez la ligne suivante dans votre <code><head></code> du HTML pour la référencer : - <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> </li> </ol> <p>Voici un exemple de favicône dans un panneau de favoris :</p> -<p><img alt="Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté." src="fr-library.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté." src="fr-library.png"></p> <p>Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :</p> -<pre class="brush: html notranslate"><!-- troisième-génération iPad avec haute-résolution Retina display: --> +<pre class="brush: html"><!-- troisième-génération iPad avec haute-résolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> <!-- iPhone avec haute-résolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> @@ -218,15 +218,15 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <li> <p>L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, <code>rel="stylesheet"</code> indiquant qu'il s'agit de la feuille de style du document, et <code>href</code> indiquant le chemin d'accès au fichier la contenant :</p> - <pre class="brush: html notranslate"><link rel="stylesheet" href="mon_fichier_css.css"></pre> + <pre class="brush: html"><link rel="stylesheet" href="mon_fichier_css.css"></pre> </li> <li> <p>L'élément {{htmlelement("script")}} ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture <code></body></code>), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant de lui appliquer le JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur déclenchera une erreur).</p> - <pre class="brush: html notranslate"><script src="mon-fichier-js.js"></script></pre> + <pre class="brush: html"><script src="mon-fichier-js.js"></script></pre> <div class="note"> - <p><strong>Note </strong>: L'élément <code><script></code> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <code><script></code>.</p> + <p><strong>Note :</strong> L'élément <code><script></code> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <code><script></code>.</p> </div> </li> </ul> @@ -241,7 +241,7 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <p>Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :</p> -<p><img alt="Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page." src="js-css-exemple.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page." src="js-css-exemple.png"></p> <ul> <li>Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier.</li> @@ -249,20 +249,20 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> </ul> <div class="note"> -<p><strong>Note </strong>: Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> .</p> +<p><strong>Note :</strong> Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> .</p> </div> <h2 id="Définition_de_la_langue_principale_du_document">Définition de la langue principale du document</h2> -<p>Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'<a href="/en-US/docs/Web/HTML/Global_attributes/lang">attribut <code>lang</code></a> <span class="short_text" id="result_box" lang="fr"><span>à la balise ouvrante HTML (voir</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p> +<p>Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'<a href="/fr/docs/Web/HTML/Global_attributes/lang">attribut <code>lang</code></a> à la balise ouvrante HTML (voir <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p> -<pre class="brush: html notranslate"><html lang="fr"></pre> +<pre class="brush: html"><html lang="fr"></pre> <p>Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)</p> <p>Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :</p> -<pre class="brush: html notranslate"><p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p></pre> +<pre class="brush: html"><p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p></pre> <p>Ces codes sont définis par la norme <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Vous en trouverez plus sur <a href="https://www.w3.org/International/articles/language-tags/">Etiquettes langues en HTML et XML (en)</a>.</p> diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html index 5c2520b633..e8cddd0909 100644 --- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -14,13 +14,9 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag <p>{{LearnSidebar}}<br> {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> -<p> </p> - -<div class="summary"> <p>Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -35,7 +31,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag <h2 id="Qu'est-ce_que_SVG_Qu'apporte-t-il">Qu'est-ce que SVG ? Qu'apporte-t-il ?</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.</p> +<p><a href="/fr/docs/Web/SVG">SVG</a> est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.</p> <p>Certaines images (appelées images « <em>matricielles</em> ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.</p> @@ -46,7 +42,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag <p>Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme <a href="https://inkscape.org">Inkscape</a>. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.</p> <div class="note"> -<p>Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web</a>.</p> +<p><strong>Note :</strong> Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web</a>.</p> </div> <h2 id="La_méthode_rapide_htmlelement(img)">La méthode rapide : {{htmlelement("img")}}</h2> @@ -80,12 +76,13 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag </ul> <div class="note"> + <p><strong>Note :</strong></p> <ul> <li>Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via <code><img></code>). - <pre class="brush: css"><code>background: url("image-de-secours.png");</code> -background-image<code>: url(image.svg); -background-size: contain;</code></pre> + <pre class="brush: css">background: url("image-de-secours.png"); +background-image: url(image.svg); +background-size: contain;</pre> </li> <li>Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, <a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas#Un_mot_sur_les_serveurs_Web">cet article pourra vous aider à résoudre le problème</a>.</li> </ul> diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html index 762a36442a..abda8ddf31 100644 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .</p> +<p>Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions élémentaires en informatique, <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, fondamentaux du HTML (comme décrit dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le Web).</a></td> + <td>Notions élémentaires en informatique, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, fondamentaux du HTML (comme décrit dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le Web).</a></td> </tr> <tr> <th scope="row">Objectifs :</th> @@ -39,7 +39,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}. C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — <code>src</code> (souvent appelé par son nom entier: <em>source</em>). L'attribut <code>src</code> contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément {{htmlelement("a")}} <code>href=</code> attribue des valeurs.</p> <div class="note"> -<p><strong>Note</strong>: Vous devriez lire <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url">Une brève présentation des URL et des chemins</a> pour vous rafraîchir la mémoire avant de continuer.</p> +<p><strong>Note :</strong> Vous devriez lire <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url">Une brève présentation des URL et des chemins</a> pour vous rafraîchir la mémoire avant de continuer.</p> </div> <p>Donc, par exemple, si votre image s'appelle <code>dinosaur.jpg</code>, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :</p> @@ -53,7 +53,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Ainsi de suite.</p> <div class="note"> -<p><strong>Note</strong>: Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. <code>dinosaur.jpg</code> est infiniment mieux que <code>img835.png</code>.</p> +<p><strong>Note :</strong> Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. <code>dinosaur.jpg</code> est infiniment mieux que <code>img835.png</code>.</p> </div> <p>Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :</p> @@ -63,7 +63,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.</p> <div class="warning"> -<p><strong>Attention ! :</strong> La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :<br> +<p><strong>Attention :</strong> La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :<br> <br> 1) Ce soit votre image (vous en êtes le créateur),<br> 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,<br> @@ -74,14 +74,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Le code au-dessus vous donnera, à peu prés, le résultat suivant :</p> -<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="basic-image.png"></p> <div class="note"> -<p><strong>Note</strong>: Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.</p> +<p><strong>Note :</strong> Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.</p> </div> <div class="note"> -<p><strong>Note</strong>: Vous trouverez les exemples finis de cette section sur <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> (regardez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">code source </a>.)</p> +<p><strong>Note :</strong> Vous trouverez les exemples finis de cette section sur <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> (regardez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">code source </a>.)</p> </div> <h3 id="Texte_alternatif">Texte alternatif</h3> @@ -94,7 +94,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>La manière la plus simple de tester votre texte <code>alt</code> est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée <code>dinosooooor.jpg</code>, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :</p> -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="alt-text.png"></p> <p>Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :</p> @@ -111,14 +111,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <ul> <li><strong>Decoration. </strong>Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un <code>alt=""</code> vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.</li> <li><strong>Contenu. </strong>Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un <em>bref</em> <em> </em><code>alt</code> text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de <code>alt</code> text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement <code>alt=""</code>.</li> - <li><strong>Lien.</strong> Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien">Lien texte accessible </a>. Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <code><a></code>, soit dans l'attribut <code>alt</code> de l'image – utilisez ce qui marche le mieux dans votre cas.</li> - <li><strong>Texte.</strong> Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/text-shadow">utilisez CSS</a> pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut <code>alt</code> .</li> + <li><strong>Lien.</strong> Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien">Lien texte accessible </a>. Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <code><a></code>, soit dans l'attribut <code>alt</code> de l'image – utilisez ce qui marche le mieux dans votre cas.</li> + <li><strong>Texte.</strong> Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, <a href="/fr/docs/Web/CSS/text-shadow">utilisez CSS</a> pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut <code>alt</code> .</li> </ul> <p>Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.</p> <div class="note"> -<p><strong>Note</strong>: Pour plus d'informations, voyez notre guide <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Textes Alternatifs</a></p> +<p><strong>Note :</strong> Pour plus d'informations, voyez notre guide <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Textes Alternatifs</a></p> </div> <h3 id="Largeur_et_hauteur_width-height">Largeur et hauteur (width-height)</h3> @@ -133,19 +133,19 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :</p> -<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> +<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="alt-text-with-width-height.png"></p> <p>C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.</p> <p>De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur. Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon <a href="https://fr.wikipedia.org/wiki/Format_d%27image">Format d'image</a>. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.</p> <div class="note"> -<p><strong>Note</strong>: Si vous devez absolument modifier une taille d' image, vous devriez vous servir de <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> .</p> +<p><strong>Note :</strong> Si vous devez absolument modifier une taille d' image, vous devriez vous servir de <a href="/fr/Apprendre/CSS">CSS</a> .</p> </div> <h3 id="Titre_dimages">Titre d'images</h3> -<p>Comme décrit dans le chapitre <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens </a>, vous pouvez aussi ajouter un attribut <code>title</code> aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :</p> +<p>Comme décrit dans le chapitre <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens </a>, vous pouvez aussi ajouter un attribut <code>title</code> aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :</p> <pre class="brush: html"><img src="images/dinosaur.jpg" alt="The head and torso of a dinosaur skeleton; @@ -156,7 +156,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Cela donne une info-bulle avec le texte entré dans l'attribut <code>title</code> :</p> -<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> +<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="image-with-title.png"></p> <p>Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.</p> @@ -178,12 +178,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton <em>Reset</em> . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - - - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -200,9 +195,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML <input id="solution" type="button" value="Show solution"> </div></pre> - - -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -222,9 +215,7 @@ body { background: #f5f9fa; }</pre> - - -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -302,10 +293,7 @@ textarea.onkeyup = function(){ updateCode(); };</pre> - -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> @@ -340,7 +328,7 @@ textarea.onkeyup = function(){ <p>L'élément {{htmlelement("figcaption")}} dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.</p> <div class="note"> -<p><strong>Note</strong>: D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte <code>alt</code> devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.</p> +<p><strong>Note :</strong> D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte <code>alt</code> devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.</p> </div> <p>Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :</p> @@ -364,10 +352,7 @@ textarea.onkeyup = function(){ <p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton <em>Reset</em> . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><h2>Live output</h2> +<pre class="brush: html hidden"><h2>Live output</h2> <div class="output" style="min-height: 50px;"> </div> @@ -385,7 +370,7 @@ textarea.onkeyup = function(){ -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -407,7 +392,7 @@ body { -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -485,12 +470,7 @@ textarea.onkeyup = function(){ updateCode(); };</pre> - - - -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Images_darrière-plan_CSS">Images d'arrière-plan CSS</h2> @@ -505,7 +485,7 @@ textarea.onkeyup = function(){ <p>En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.</p> <div class="note"> -<p><strong>Note</strong>: Vous en apprendrez beaucoup plus sur les <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> dans notre topic <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> .</p> +<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> dans notre topic <a href="/fr/Apprendre/CSS">CSS</a> .</p> </div> <p>C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.</p> @@ -515,10 +495,10 @@ textarea.onkeyup = function(){ <h2 id="Dans_ce_module">Dans ce module :</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> </ul> diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html index 86eb86cd9f..445c2724fe 100644 --- a/files/fr/learn/html/multimedia_and_embedding/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/index.html @@ -29,7 +29,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding <p>Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">introduction au HTML</a>. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.</p> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html index bf2054f890..37cd4e8230 100644 --- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -8,13 +8,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !</p> +<p>Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding">Multimedia et Intégration</a>.</td> + <td>Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module <a href="/fr/Apprendre/HTML/Multimedia_and_embedding">Multimedia et Intégration</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -30,7 +30,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>Allez dans le répertoire <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.</p> <div class="note"> -<p><strong>Note</strong>: le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.</p> +<p><strong>Note :</strong> le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.</p> </div> <h2 id="Énoncé_du_projet">Énoncé du projet</h2> @@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>Puis, créez une version paysage de 1200px de large de <code>red-panda.jpg</code>, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p> <div class="note"> -<p><strong>Note</strong>: Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. <a href="https://tinypng.com/">tinypng.com</a> est une bonne aide pour faire ça aisément.</p> +<p><strong>Note :</strong> Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. <a href="https://tinypng.com/">tinypng.com</a> est une bonne aide pour faire ça aisément.</p> </div> <h3 id="Ajouter_un_logo_à_l'en-tête">Ajouter un logo à l'en-tête</h3> @@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>Assurez-vous de faire correspondre les bonnes images avec les liens corrects !</p> <div class="note"> -<p><strong>Note</strong>: Pour tester correctement les exemples <code>srcset</code>/<code>sizes</code>, vous devez charger votre site sur un serveur (utiliser <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> +<p><strong>Note :</strong> Pour tester correctement les exemples <code>srcset</code>/<code>sizes</code>, vous devez charger votre site sur un serveur (utiliser <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans <a href="/fr/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p> </div> <h3 id="Un_panda_rouge_créatif">Un panda rouge créatif</h3> @@ -85,9 +85,9 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <p>La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.</p> -<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p> +<p><img alt="A wide shot of our example splash page" src="wide-shot.png"></p> -<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p> +<p><img alt="A narrow shot of our example splash page" src="narrow-shot.png"></p> <h2 id="Évaluation">Évaluation</h2> @@ -100,12 +100,12 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page <h2 id="Dans_ce_module">Dans ce module :</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des objets aux "iframes" - autres techniques d'intégration</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Images adaptatives</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des objets aux "iframes" - autres techniques d'intégration</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page web</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Images adaptatives</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></li> </ul> <p> </p> diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html index a35a7d6131..c840ee2f9e 100644 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -21,13 +21,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les <code><iframe></code> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.</p> +<p>Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les <code><iframe></code> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et articles précédents de ce module.</td> + <td>Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et articles précédents de ce module.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <p> </p> -<p>Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les <a href="https://developer.mozilla.org/fr/docs/Glossary/Java">applets Java</a> et <a href="https://developer.mozilla.org/fr/docs/Glossary/Adobe_Flash">Flash</a> — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.</p> +<p>Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les <a href="/fr/docs/Glossary/Java">applets Java</a> et <a href="/fr/docs/Glossary/Adobe_Flash">Flash</a> — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.</p> <p>Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il est régulièrement utilisé aujourd'hui.</p> @@ -73,10 +73,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <p>Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Afficher la solution</em> pour voir la réponse.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Sortie directe</h2> +<pre class="brush: html hidden"><h2>Sortie directe</h2> <div class="output" style="min-height: 250px;"> </div> @@ -92,7 +89,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog <input id="solution" type="button" value="Afficher la solution"> </div></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -112,7 +109,7 @@ body { background: #f5f9fa; }</pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -190,10 +187,7 @@ textarea.onkeyup = function(){ updateCode(); };</pre> -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> <h2 id="Iframes_en_détail">Iframes en détail</h2> @@ -212,7 +206,7 @@ textarea.onkeyup = function(){ <dl> <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> - <dd>Si activé, <code><iframe></code> pourra être mis en mode plein écran avec <a href="/en-US/docs/Web/API/Fullscreen_API">Full Screen API</a> (un peu hors‑sujet dans cet article).</dd> + <dd>Si activé, <code><iframe></code> pourra être mis en mode plein écran avec <a href="/fr/docs/Web/API/Fullscreen_API">Full Screen API</a> (un peu hors‑sujet dans cet article).</dd> <dt>{{htmlattrxref('frameborder','iframe')}}</dt> <dd>Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}<code>: none;</code> dans le {{Glossary('CSS')}}.</dd> <dt>{{htmlattrxref('src','iframe')}}</dt> @@ -226,7 +220,7 @@ textarea.onkeyup = function(){ </dl> <div class="note"> -<p><strong>Note </strong>: Afin d'améliorer la vitesse, il est pertinent de définir l'attribut <code>src</code> de <code>iframe</code> avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).</p> +<p><strong>Note :</strong> Afin d'améliorer la vitesse, il est pertinent de définir l'attribut <code>src</code> de <code>iframe</code> avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).</p> </div> <h3 id="Problèmes_de_sécurité">Problèmes de sécurité</h3> @@ -236,10 +230,10 @@ textarea.onkeyup = function(){ <p>Fabricants de navigateurs et développeurs Web ont appris à la dure que <code><iframe></code> constitue sur le Web une cible commune (terme officiel : un <strong>vecteur d'attaque</strong>) pour des personnes mal intentionnées (souvent appelés <strong>hackeurs (</strong>pirates), ou plus exactement, <strong>crackeurs</strong>). <code><iframe></code> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <code><iframe></code> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.</p> <div class="note"> -<p>Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <code><iframe></code> : les hackeurs incorporent un <code><iframe></code> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.</p> +<p><strong>Note :</strong> Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <code><iframe></code> : les hackeurs incorporent un <code><iframe></code> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.</p> </div> -<p>Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trouver en direct sur Github</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">code source</a> aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la <em>Console</em> dans les <a href="https://developer.mozilla.org/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em> (<em>Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre</em>) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <code><iframe></code> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.</p> +<p>Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trouver en direct sur Github</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">code source</a> aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la <em>Console</em> dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em> (<em>Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre</em>) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <code><iframe></code> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.</p> <h4 id="N'intégrer_que_si_nécessaire">N'intégrer que si nécessaire</h4> @@ -263,7 +257,7 @@ textarea.onkeyup = function(){ <p>L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que <a href="https://letsencrypt.org/">Let's Encrypt</a> facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, <em>et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP</em> (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <code><iframe></code>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut <code>src</code> de <code><iframe></code> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.</p> <div class="note"> -<p><strong>Note</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.</p> +<p><strong>Note :</strong> <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.</p> </div> <h4 id="Toujours_utiliser_l'attribut_sandbox">Toujours utiliser l'attribut <code>sandbox</code></h4> @@ -275,15 +269,15 @@ textarea.onkeyup = function(){ <p>Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut <code>sandbox=""</code>) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez <em>jamais</em> mettre à la fois les valeurs <code>allow-scripts</code> et <code>allow-same-origin</code> aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».</p> <div class="note"> -<p><strong>Note </strong>: Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <code><iframe></code>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.</p> +<p><strong>Note :</strong> Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <code><iframe></code>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.</p> </div> <h4 id="Configurer_les_directives_CSP">Configurer les directives CSP</h4> -<p>{{Glossary("CSP")}} est un acronyme pour « <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong> » (politique de sécurité du contenu) ; les directives CSP fournissent un <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">ensemble d'en‑têtes HTTP</a> (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <code><iframe></code>, vous pouvez <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configurer votre serveur pour qu'il adresse une en‑tête appropriée <code>X-Frame-Options</code></a>.</em> Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.</p> +<p>{{Glossary("CSP")}} est un acronyme pour « <strong><a href="/fr/docs/Web/Security/CSP">content security policy</a></strong> » (politique de sécurité du contenu) ; les directives CSP fournissent un <a href="/fr/docs/Web/Security/CSP/CSP_policy_directives">ensemble d'en‑têtes HTTP</a> (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <code><iframe></code>, vous pouvez <em><a href="/fr/docs/Web/HTTP/X-Frame-Options">configurer votre serveur pour qu'il adresse une en‑tête appropriée <code>X-Frame-Options</code></a>.</em> Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.</p> <div class="note"> -<p><strong>Note </strong>: Lisez le post de Frederik Braun sur <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.</p> +<p><strong>Note :</strong> Lisez le post de Frederik Braun sur <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.</p> </div> <h2 id="Les_éléments_<embed>_et_<object>">Les éléments <embed> et <object></h2> @@ -291,7 +285,7 @@ textarea.onkeyup = function(){ <p>Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !</p> <div class="note"> -<p><strong>Note </strong>: Un <strong>greffon</strong> est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.</p> +<p><strong>Note :</strong> Un <strong>greffon</strong> est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.</p> </div> <p>Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.</p> @@ -342,7 +336,7 @@ textarea.onkeyup = function(){ <p> </p> <div class="note"> -<p><strong>Note </strong>: <code><object></code> requiert un attribut <code>data</code>, un attribut <code>type</code>, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). <code>typemustmatch</code> empêche le fichier incorporé d'être exécuté avant que l'attribut <code>type</code> indique le type exact de média. <code>typemustmatch</code> peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).</p> +<p><strong>Note :</strong> <code><object></code> requiert un attribut <code>data</code>, un attribut <code>type</code>, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). <code>typemustmatch</code> empêche le fichier incorporé d'être exécuté avant que l'attribut <code>type</code> indique le type exact de média. <code>typemustmatch</code> peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).</p> </div> <p>Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">en direct sur Github</a> ainsi que <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">le code source</a> également):</p> @@ -375,7 +369,7 @@ textarea.onkeyup = function(){ <li><strong>Restez à l'écart des risques supplémentaires en matière de sécurité.</strong><strong> </strong>Adobe Flash est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoirement</a> non‑sûr<a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">,</a> même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">demandé qu'Adobe arrête</a><a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso"> Flash.</a></li> </ul> -<p>Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la <a href="https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vidéo HTML5</a> pour vos besoins en médias, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour les images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst écrivait déjà il y a quelques années</a> qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.</p> +<p>Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la <a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vidéo HTML5</a> pour vos besoins en médias, <a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="/fr/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour les images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst écrivait déjà il y a quelques années</a> qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.</p> <h2 id="Résumé">Résumé</h2> @@ -392,12 +386,12 @@ textarea.onkeyup = function(){ <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et Vidéo</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écrans d'accueil Mozilla</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et Vidéo</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> à <iframe> — autres techniques d'intégration</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écrans d'accueil Mozilla</a></li> </ul> <p> </p> diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html index 4ee6bee321..29f0d234da 100644 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page <p>Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).</p> <div class="note"> - <p><strong>Note :</strong> Toutes les nouvelles fonctionnalités présentées dans cet article — <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a>/<a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).</p> + <p><strong>Note :</strong> Toutes les nouvelles fonctionnalités présentées dans cet article — <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset"><code>srcset</code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-sizes"><code>sizes</code></a>/<a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).</p> </div> <h2 id="Comment_créer_des_images_adaptatives">Comment créer des images adaptatives ?</h2> @@ -97,7 +97,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page </ol> <div class="note"> -<p><strong>Note :</strong> pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (<code>px</code>, <code>em</code>) ou relative au viewport (<code>vw</code>), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.</p> +<p><strong>Note :</strong> pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (<code>px</code>, <code>em</code>) ou relative au viewport (<code>vw</code>), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.</p> </div> <p>Ainsi, une fois ces attributs en place, le navigateur va :</p> @@ -112,14 +112,14 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page <p>Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média <code>(max-width: 480px)</code> sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier <code>elva-fairy-480w.jpg</code> sera chargé, car sa largeur intrinsèque (<code>480w</code>) est celle qui est la plus proche de <code>440px</code>. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.</p> <div class="note"> - <p><strong>Note :</strong> lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction <code>document.querySelector("html").clientWidth</code> dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page <code>about:debugging</code> de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.</p> + <p><strong>Note :</strong> lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction <code>document.querySelector("html").clientWidth</code> dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page <code>about:debugging</code> de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.</p> <p>Pour observer les images chargées, vous pouvez utiliser l'onglet <a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a> dans les outils de développement de Firefox.</p> </div> <p>Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-src"><code>src</code></a>.</p> <div class="note"> -<p><strong>Note :</strong> dans l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> du document, vous trouvez la ligne <code><meta name="viewport" content="width=device-width"></code> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).</p> +<p><strong>Note :</strong> dans l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> du document, vous trouvez la ligne <code><meta name="viewport" content="width=device-width"></code> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).</p> </div> @@ -169,7 +169,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page <p><img alt="Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre." src="picture-element-wide.png"><img alt="Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit." src="picture-element-narrow.png"></p> <div class="note"> -<p><strong>Note :</strong> vous ne devez utiliser l'attribut <code>media</code> qu'avec un scénario de décision de nature artistique ; quand vous utilisez <code>media</code>, ne mettez pas de conditions pour le média avec l'attribut <code>sizes.</code></p> +<p><strong>Note :</strong> vous ne devez utiliser l'attribut <code>media</code> qu'avec un scénario de décision de nature artistique ; quand vous utilisez <code>media</code>, ne mettez pas de conditions pour le média avec l'attribut <code>sizes.</code></p> </div> <h3 id="Pourquoi_ne_peut-on_pas_réaliser_cela_avec_le_CSS_ou_du_JavaScript">Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?</h3> diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 4854d24907..75e2a70ecd 100644 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -18,13 +18,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> -<p class="summary">Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.</p> +<p>Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a>.</td> + <td>Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et <a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a>.</td> </tr> <tr> <th scope="row">Objectifs :</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">fichiers d'échantillons audio et vidéo et exemples de code</a> pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.</p> <div class="note"> -<p><strong>Note </strong>: Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, et <a href="https://vimeo.com/">Vimeo</a>. Pour l'audio, voyez <a href="https://soundcloud.com/">Soundcloud</a> par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.</p> +<p><strong>Note :</strong> Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, et <a href="https://vimeo.com/">Vimeo</a>. Pour l'audio, voyez <a href="https://soundcloud.com/">Soundcloud</a> par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.</p> </div> <h3 id="L'_élément_<video>">L' élément <video></h3> @@ -59,14 +59,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <dt>{{htmlattrxref("src","video")}}</dt> <dd>De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut <code>src</code> (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière.</dd> <dt>{{htmlattrxref("controls","video")}}</dt> - <dd>Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'<a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie">épilepsie</a>.) Vous devez vous servir de l'attribut <code>controls</code> pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'<a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLMediaElement">API JavaScript </a>adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.</dd> + <dd>Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'<a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie">épilepsie</a>.) Vous devez vous servir de l'attribut <code>controls</code> pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'<a href="/fr/docs/Web/API/HTMLMediaElement">API JavaScript </a>adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.</dd> <dt>Le paragraphe dans la balise <code><video></code></dt> <dd>Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <code><video></code> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.</dd> </dl> <p>La vidéo intégrée donnerait quelque chose comme ça :</p> -<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> +<p><img alt="A simple video player showing a video of a small white rabbit" src="simple-video.png"></p> <p>Faites un essai avec <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">l'exemple ici</a>. (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">code source</a>.)</p> @@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.</p> <div class="note"> -<p><strong>Note </strong>: Ce n'est pas si simple, comme vous pouvez le voir dans le <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité des codecs audio-vidéo</a>. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.</p> +<p><strong>Note :</strong> Ce n'est pas si simple, comme vous pouvez le voir dans le <a href="/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité des codecs audio-vidéo</a>. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.</p> </div> <p>Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.</p> @@ -95,7 +95,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p> </p> <div class="note"> -<p><strong>Note : </strong>Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats <strong>MP3 </strong>(pour l'audio) et <strong>MP4/H.264</strong> (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.</p> +<p><strong>Note :</strong> Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats <strong>MP3 </strong>(pour l'audio) et <strong>MP4/H.264</strong> (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.</p> <p> </p> </div> @@ -115,7 +115,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p> </p> <div class="note"> -<p><strong>Note</strong> : L'<a href="/en-US/docs/Web/HTML/Supported_media_formats">article sur les formats média pris en charge</a> contient quelques types {{glossary("MIME type","MIME")}} courants.</p> +<p><strong>Note :</strong> L'<a href="/fr/docs/Web/HTML/Supported_media_formats">article sur les formats média pris en charge</a> contient quelques types {{glossary("MIME type","MIME")}} courants.</p> </div> <h3 id="Autres_fonctionnalités_de_<video>">Autres fonctionnalités de <video></h3> @@ -133,7 +133,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Cela produit une sortie du type suivant :</p> -<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;"></p> +<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="extra-video-features.png"></p> <p>Voici les nouvelles fonctionnalités :</p> @@ -174,10 +174,10 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Vous verrez quelque chose de ce genre dans un navigateur :</p> -<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> +<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="audio-player.png"></p> <div class="note"> -<p><strong>Note</strong>: Vous pouver <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">lancer la démo de l'audio en direct </a>sur Github (voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">code source de l'interpréteur</a>.)</p> +<p><strong>Note :</strong> Vous pouver <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">lancer la démo de l'audio en direct </a>sur Github (voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">code source de l'interpréteur</a>.)</p> </div> <p>Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :</p> @@ -202,7 +202,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.</p> <div class="note"> -<p><strong>Note </strong>: « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.</p> +<p><strong>Note :</strong> « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.</p> </div> <p>WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :</p> @@ -218,7 +218,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video <p>Un fichier WebVTT typique ressemblera à :</p> -<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT +<pre>WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -248,12 +248,12 @@ Ceci est le deuxième. <p>Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :</p> -<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> +<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="video-player-with-captions.png"></p> -<p>Pour plus de détails, lisez <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous‑titres aux vidéos HTML5</a>. Vous <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trouverez un exemple</a>, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a> aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. </p> +<p>Pour plus de détails, lisez <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous‑titres aux vidéos HTML5</a>. Vous <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trouverez un exemple</a>, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a> aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. </p> <div class="note"> -<p><strong>Note </strong>: Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.</p> +<p><strong>Note :</strong> Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.</p> </div> <h3 id="Apprentissage_interactif_intégrer_vos_propres_vidéos_et_audios">Apprentissage interactif : intégrer vos propres vidéos et audios</h3> @@ -285,9 +285,9 @@ Ceci est le deuxième. <li>{{htmlelement("video")}}</li> <li>{{htmlelement("source")}}</li> <li>{{htmlelement("track")}}</li> - <li><a href="https://developer.mozilla.org/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Ajouter des légendes et sous-titres aux vidéos HTML5</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Intégration Audio et Vidéo </a>: de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.</li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipuler l'Audio et la Vidéo</a>: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).</li> + <li><a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Ajouter des légendes et sous-titres aux vidéos HTML5</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Intégration Audio et Vidéo </a>: de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.</li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipuler l'Audio et la Vidéo</a>: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).</li> <li>Options automatisées pour la <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduction multimédia</a>.</li> </ul> @@ -298,12 +298,12 @@ Ceci est le deuxième. <h2 id="Contenu_du_module">Contenu du module :</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page Web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Ajouter des images "responsive" à une page Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page Web</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Ajouter des images "responsive" à une page Web</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> </ul> <p> </p> diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html index 11669b25e7..7a6f46a012 100644 --- a/files/fr/learn/html/tables/advanced/index.html +++ b/files/fr/learn/html/tables/advanced/index.html @@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Tableaux/Advanced <div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> -<p class="summary">Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.</p> +<p>Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -55,7 +55,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced <p>Le titre est placé directement sous la balise <code><table></code>.</p> <div class="note"> -<p><strong>Note</strong> : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <code><table></code> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <code><caption></code>, car <code>summary</code> est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant (il n'apparaît pas dans la page).</p> +<p><strong>Note :</strong> L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <code><table></code> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <code><caption></code>, car <code>summary</code> est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant (il n'apparaît pas dans la page).</p> </div> <h3 id="Apprentissage_actif_Ajouter_un_titre">Apprentissage actif : Ajouter un titre</h3> @@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced </ol> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver notre version sur GitHub — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">voir aussi directement</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver notre version sur GitHub — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">voir aussi directement</a>).</p> </div> <h2 id="Ajout_d'une_structure_avec_<thead>_<tfoot>_et_<tbody>">Ajout d'une structure avec <thead>, <tfoot>, et <tbody></h2> @@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced </ul> <div class="note"> -<p><strong>Note</strong> : <code><tbody></code> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <code><tbody></code> et regardez le code HTML dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement de votre navigateur</a> — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.</p> +<p><strong>Note :</strong> <code><tbody></code> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <code><tbody></code> et regardez le code HTML dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement de votre navigateur</a> — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.</p> </div> <h3 id="Apprentissage_actif_Ajout_d'une_structure_au_tableau">Apprentissage actif : Ajout d'une structure au tableau</h3> @@ -115,15 +115,12 @@ tfoot { </ol> <div class="note"> -<p><strong>Note</strong> : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (<a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a> est un bon moyen de commencer ; il y a aussi un article spécifique sur <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">l'esthétique des tables</a>).</p> +<p><strong>Note :</strong> Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (<a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a> est un bon moyen de commencer ; il y a aussi un article spécifique sur <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">l'esthétique des tables</a>).</p> </div> <p>Le code de votre tableau fini devrait ressembler à quelque chose comme :</p> -<div class="hidden"> -<h6 id="Hidden_example">Hidden example</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -228,12 +225,11 @@ tfoot { </body> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi le trouver sur Github <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">voir aussi le résultat</a> directement).</p> +<p><strong>Note :</strong> Vous pouvez aussi le trouver sur Github <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">voir aussi le résultat</a> directement).</p> </div> <h2 id="Tableaux_imbriqués">Tableaux imbriqués</h2> @@ -270,7 +266,7 @@ tfoot { <p>Voici la sortie qui en résulte :</p> -<table id="table1"> +<table> <tbody> <tr> <th>title1</th> @@ -278,8 +274,8 @@ tfoot { <th>title3</th> </tr> <tr> - <td id="nested"> - <table id="table2"> + <td> + <table> <tbody> <tr> <td>cell1</td> @@ -370,18 +366,18 @@ tfoot { <p>Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.</p> <div class="note"> -<p><strong>Note :</strong> Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/" title="Vision Impairment Data">données de l'OMS en 2017</a>.</p> +<p><strong>Note :</strong> Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/" title="Vision Impairment Data">données de l'OMS en 2017</a>.</p> </div> <p>Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.</p> -<h3 class="attTitle" id="Utilisation_des_en-têtes_de_colonnes_et_de_lignes">Utilisation des en-têtes de colonnes et de lignes</h3> +<h3 id="Utilisation_des_en-têtes_de_colonnes_et_de_lignes">Utilisation des en-têtes de colonnes et de lignes</h3> <p>Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes. La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.</p> <p>Nous avons déjà traité des en-têtes dans notre article précédent — voir <a href="/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Ajouter des en-têtes avec <th></a> .</p> -<h3 class="attTitle" id="L'attribut_scope">L'attribut <code>scope</code></h3> +<h3 id="L'attribut_scope">L'attribut <code>scope</code></h3> <p>Aux balises <code><th></code>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <code><th></code> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :</p> @@ -409,7 +405,7 @@ tfoot { <p><code>scope</code> a deux autres valeurs possibles — <code>colgroup</code> et <code>rowgroup</code>. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<code><th></code>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut <code>scope="colgroup"</code>, alors que les autres doivent recevront un attribut <code>scope="col"</code>.</p> -<h3 class="attTitle" id="Les_attributs_id_et_headers">Les attributs <code>id</code> et <code>headers</code></h3> +<h3 id="Les_attributs_id_et_headers">Les attributs <code>id</code> et <code>headers</code></h3> <p>Une alternative à l'usage de l'attribut <code>scope</code> est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :</p> @@ -445,7 +441,7 @@ tfoot { </tbody></pre> <div class="note"> -<p><strong>Note</strong>: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise <strong>beaucoup</strong> plus de balisage et ne laisse aucune marge d'erreur. L'approche <code>scope</code> est généralement suffisante pour la plupart des tableaux.</p> +<p><strong>Note :</strong> Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise <strong>beaucoup</strong> plus de balisage et ne laisse aucune marge d'erreur. L'approche <code>scope</code> est généralement suffisante pour la plupart des tableaux.</p> </div> <h3 id="Apprentissage_actif_jouer_avec_scope_et_headers">Apprentissage actif : jouer avec <code>scope</code> et <code>headers</code></h3> @@ -457,7 +453,7 @@ tfoot { </ol> <div class="note"> -<p><strong>Note</strong> : Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">voir aussi directement</a>)<br> +<p><strong>Note :</strong> Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">voir aussi directement</a>)<br> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">voir aussi directement</a>).</p> </div> @@ -474,7 +470,7 @@ tfoot { <ul> <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Tableaux HTML : notions de base</a></li> <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a></li> - <li><a class="new" href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data" rel="nofollow">Structuration de données sur les planètes</a></li> + <li><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></li> </ul> </div> </div> diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html index b4e3cf6667..fe9ef9ef91 100644 --- a/files/fr/learn/html/tables/basics/index.html +++ b/files/fr/learn/html/tables/basics/index.html @@ -23,20 +23,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics <div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> -<blockquote> -<dl> - <dd>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</dd> -</dl> -</blockquote> +<p>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</p> -<dl> -</dl> - -<table class="learn-box standard-table" style="height: 97px; width: 672px;"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les bases de HTML (voir <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>).</td> + <td>Les bases de HTML (voir <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -47,17 +40,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics <h2 id="Quest-ce_quun_tableau">Qu'est-ce qu'un tableau ?</h2> -<p>Un tableau est un ensemble structuré de données (<strong>table de données</strong>) présentées en lignes et colonnes. <span class="translation">Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier</span>.</p> +<p>Un tableau est un ensemble structuré de données (<strong>table de données</strong>) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.</p> -<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="numbers-table.png"></p> -<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> +<p><img alt="A swimming timetable showing a sample data table" src="swimming-timetable.png"></p> -<p><span class="translation">Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800</span> :</p> +<p>Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :</p> -<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="1800-census.jpg"></p> -<p><span class="translation">Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web</span> .</p> +<p>Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .</p> <h3 id="Comment_fonctionne_un_tableau">Comment fonctionne un tableau ?</h3> @@ -197,13 +190,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics </tbody> </table> -<p><span class="translation">Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.</span></p> +<p>Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.</p> <h3 id="Style_de_tableau">Style de tableau</h3> <p>Vous pouvez également <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder sur l'exemple réel</a> sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un CSS plus signifiant.</p> -<p>Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec <a href="/en-US/docs/Learn/CSS">CSS</a>, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Style et tableaux</a> quand vous aurez fini ici.</p> +<p>Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec <a href="/fr/docs/Learn/CSS">CSS</a>, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Style et tableaux</a> quand vous aurez fini ici.</p> <p>Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">feuille de style ici</a>, et également <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">un exemple HTML d'application de cette feuille de style là</a> — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.</p> @@ -227,10 +220,10 @@ original_slug: Apprendre/HTML/Tableaux/Basics <li>Avant tout, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire de votre ordinateur.</li> <li>Le contenu de chaque tableau est encadré par ces deux balises : <strong><code><a href="/fr/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Ajoutez‑les dans le corps de votre HTML.</li> <li>Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément <strong><code><a href="/fr/docs/Web/HTML/Element/td"><td></a></code></strong> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : - <pre class="brush: html notranslate"><td>Bonjour, je suis votre première cellule.</td></pre> + <pre class="brush: html"><td>Bonjour, je suis votre première cellule.</td></pre> </li> <li>Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : - <pre class="brush: html notranslate"><td>Bonjour, je suis votre première cellule </td> + <pre class="brush: html"><td>Bonjour, je suis votre première cellule </td> <td>je suis votre deuxième cellule</td> <td>je suis votre troisième cellule</td> <td>je suis votre quatrième cellule</td></pre> @@ -244,7 +237,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <ol> <li>Placez les quatre cellules que vous avez créées entre deux balises <code><tr></code> ainsi : - <pre class="brush: html notranslate"><tr> + <pre class="brush: html"><tr> <td>Bonjour, je suis votre première cellule </td> <td>je suis votre deuxième cellule </td> <td>je suis votre troisième cellule </td> @@ -274,14 +267,14 @@ original_slug: Apprendre/HTML/Tableaux/Basics </table> <div class="note"> -<p><strong>Note</strong>: Vous pouvez également trouver cela sur GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">voir en direct aussi</a>).</p> +<p><strong>Note :</strong> Vous pouvez également trouver cela sur GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">voir en direct aussi</a>).</p> </div> -<h2 id="Ajouter_des_en-têtes_avec_<th>"><a id="Adding_headers_with_%3Cth%3E_elements" name="Adding_headers_with_%3Cth%3E_elements"></a>Ajouter des en-têtes avec <th></h2> +<h2 id="Ajouter_des_en-têtes_avec_<th>">Ajouter des en-têtes avec <th></h2> <p>Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <td>&nbsp;</td> <td>Knocky</td> @@ -369,12 +362,12 @@ original_slug: Apprendre/HTML/Tableaux/Basics <ol> <li>En premier lieu, faites une copie des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.</li> - <li>Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <code><td></code>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <code><td></code> des cellules entourant le tableau par des <code><th></code>.</li> + <li>Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <strong><code><a href="/fr/docs/Web/HTML/Element/th"><th></a></code></strong> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <code><td></code>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <code><td></code> des cellules entourant le tableau par des <code><th></code>.</li> <li>Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.</li> </ol> <div class="note"> -<p><strong>Note</strong> : Vous pouvez trouver notre exemple achevé <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">voir en direct aussi</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver notre exemple achevé <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">voir en direct aussi</a>).</p> </div> <h3 id="Pourquoi_les_en-têtes_sont-ils_utiles">Pourquoi les en-têtes sont-ils utiles ?</h3> @@ -382,7 +375,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <p>Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.</p> <div class="note"> -<p><strong>Note</strong> : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.</p> +<p><strong>Note :</strong> Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.</p> </div> <p>Les en-têtes de tableau ont un autre avantage — avec l'attribut <code>scope</code> (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.</p> @@ -393,7 +386,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <p>Le code initial ressemble à cela :</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Animaux</th> </tr> @@ -461,19 +454,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics </ol> <div class="note"> -<p><strong>Note</strong> : Vous pouvez trouver l'exemple achevé dans <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">voir en direct aussi</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver l'exemple achevé dans <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">voir en direct aussi</a>).</p> </div> -<table id="tabular" style="background-color: white;"> -</table> - <h2 id="Attribuer_un_style_commun_aux_colonnes">Attribuer un style commun aux colonnes</h2> -<p>Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque <code><td></code> ou <code><th></code> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.</p> +<p>Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <strong><code><a href="/fr/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/fr/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque <code><td></code> ou <code><th></code> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.</p> +<h3>Premier exemple</h3> <p>Observez l'exemple simple suivant :</p> -<pre class="brush: html notranslate"><table> +<pre class="brush: html"><table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> @@ -489,27 +480,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics </table></pre> <p>Ce qui nous donne comme résultat :</p> - -<table> - <tbody> - <tr> - <th>Data 1</th> - <th style="background-color: yellow;">Data 2</th> - </tr> - <tr> - <td>Calcutta</td> - <td style="background-color: yellow;">Orange</td> - </tr> - <tr> - <td>Robots</td> - <td style="background-color: yellow;">Jazz</td> - </tr> - </tbody> -</table> +<p>{{EmbedLiveSample("Premier_exemple")}}</p> <p>Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne (nous aurions probablement défini une <code>classe</code> dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <code><col></code>. Les éléments <code><col></code> sont utilisés dans un conteneur <code><colgroup></code> juste en-dessous de la balise <code><table></code>. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit :</p> -<pre class="brush: html notranslate"> <table> +<h3>Autres exemples</h3> + +<pre class="brush: html"> <table> <colgroup> <col> <col style="background-color: yellow"> @@ -532,13 +509,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics <p>Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <code><col></code> avec un attribut span, comme ceci :</p> -<pre class="brush: html notranslate"><colgroup> +<pre class="brush: html"><colgroup> <col style="background-color: yellow" span="2"> </colgroup></pre> <p>Comme <code>colspan</code> et <code>rowspan</code>, <code>span</code> reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.</p> -<h3 id="Apprentissage_actif_colgroup_et_col"><a id="Active_learning_colgroup_and_col" name="Active_learning_colgroup_and_col"></a>Apprentissage actif : <code>colgroup</code> et <code>col</code></h3> +<h3 id="Apprentissage_actif_colgroup_et_col">Apprentissage actif : <code>colgroup</code> et <code>col</code></h3> <p>Maintenant, il est temps de vous y mettre vous-même.</p> @@ -559,7 +536,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics <li>Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li> </ol> -<p><span lang="fr">Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version </span> <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (à<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html"> voir aussi</a> directement) <span lang="fr">sur GitHub</span> .</p> +<p>Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (à<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html"> voir aussi</a> directement) sur GitHub .</p> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html index 1344ec014c..e29779b351 100644 --- a/files/fr/learn/html/tables/index.html +++ b/files/fr/learn/html/tables/index.html @@ -15,14 +15,14 @@ original_slug: Apprendre/HTML/Tableaux --- <div>{{LearnSidebar}}</div> -<p class="summary">Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de <a href="/en-US/docs/Learn/CSS">CSS</a> pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.</p> +<p>Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de <a href="/fr/docs/Learn/CSS">CSS</a> pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.</p> <h2 id="Prérequis">Prérequis</h2> <p>Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html index 9732baa868..303bf2fdf9 100644 --- a/files/fr/learn/html/tables/structuring_planet_data/index.html +++ b/files/fr/learn/html/tables/structuring_planet_data/index.html @@ -8,27 +8,27 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data <div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> -<p class="summary"><span id="result_box" lang="fr"><span>Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.</span></span></p> +<p>Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td><span id="result_box" lang="fr"><span>Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.</span></span></td> + <td>Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.</td> </tr> <tr> <th scope="row">Objectif :</th> - <td><span id="result_box" lang="fr"><span>Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.</span></span></td> + <td>Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.</td> </tr> </tbody> </table> <h2 id="Point_de_départ">Point de départ</h2> -<p><span id="result_box" lang="fr"><span>Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.</span></span></p> +<p>Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez aussi utiliser un site comme<a class="external external-icon" href="https://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <code><script></code>/<code><style></code> dans la page HTML.</p> +<p><strong>Note :</strong> Vous pouvez aussi utiliser un site comme<a class="external external-icon" href="https://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <code><script></code>/<code><style></code> dans la page HTML.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> @@ -37,7 +37,7 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data <p>Le tableau terminé devrait ressembler à celui-ci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="assessment-table.png"></p> <p>Vous pouvez aussi <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder l'exemple ici</a> (sans regarder le code source — ne trichez pas !)</p> diff --git a/files/fr/learn/index.html b/files/fr/learn/index.html index 5292847294..b21e54c010 100644 --- a/files/fr/learn/index.html +++ b/files/fr/learn/index.html @@ -16,7 +16,7 @@ original_slug: Apprendre --- <p>{{LearnSidebar}}</p> -<p class="summary">Bienvenue dans l'Espace d'apprentissage (<i>Learning Area</i>) de MDN. Cet ensemble d'articles a pour but de fournir aux développeurs web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.</p> +<p>Bienvenue dans l'Espace d'apprentissage (<i>Learning Area</i>) de MDN. Cet ensemble d'articles a pour but de fournir aux développeurs web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.</p> <p>Le but de cette section de MDN n'est pas de vous faire passer de « débutant » à « expert », mais plutôt de vous mettre à l'aise avec les technologies. À partir de là, vous devriez être capable de vous débrouiller par vous-même, en utilisant <a href="/fr/docs/Web">le reste du contenu de MDN</a> et d'autres ressources.</p> @@ -29,11 +29,9 @@ original_slug: Apprendre <p>Si vous avez des questions concernant des sujets que vous aimeriez voir couverts ou si vous pensez qu'il en manque, envoyez-nous un message sur notre <a href="https://discourse.mozilla.org/c/mdn">Forum de discussion</a>.</p> <div class="callout"> - <h4 id="Looking_to_become_a_front-end_web_developer">Vous voulez devenir un développeur web front-end ?</h4> - + <p>Vous voulez devenir un développeur web front-end ?</p> <p>Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - - <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a></p> + <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a></p> </div> <h2 id="Where_to_start">Par où commencer ?</h2> @@ -49,8 +47,8 @@ original_slug: Apprendre <dd>Lorsque vous aurez appris l'essentiel de HTML, CSS, et JavaScript, vous devriez étudier <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools">les outils de développement web côté client</a> et éventuellement approfondir <a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">les <i>frameworks</i> JavaScript côté client</a>, ainsi <a href="/fr/docs/Learn/Server-side">que la programmation des sites web côté serveur</a>.</dd> </dl> -<div class="notecard note"> - <p><strong>Note :</strong> Notre <a href="/fr/docs/Glossary">Glossaire</a> fournit des définitions de la terminologie employée.</p> +<div class="note"> + <p><strong>Note :</strong> Notre <a href="/fr/docs/Glossary">Glossaire</a> fournit des définitions de la terminologie employée.</p> </div> <p>{{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}}</p> diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.html b/files/fr/learn/javascript/asynchronous/async_await/index.html index fa4956f829..5955c0f27f 100644 --- a/files/fr/learn/javascript/asynchronous/async_await/index.html +++ b/files/fr/learn/javascript/asynchronous/async_await/index.html @@ -17,9 +17,9 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div> -<p class="summary">Plus récemment, les <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">fonctions async</a> et le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a></code> ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.</p> +<p>Plus récemment, les <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">fonctions async</a> et le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a></code> ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -295,8 +295,7 @@ displayContent() <p>Pour la gestion des erreurs, nous avons inclus un bloc <code>.catch()</code> sur notre appel <code>displayContent()</code> ; cela permettra de gérer les erreurs survenant dans les deux fonctions.</p> <div class="notecard note"> - <p><b>Note :</b></p> - <p>Il est également possible d'utiliser un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> au sein d'une fonction asynchrone, à la place d'un bloc asynchrone <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">exemple en direct</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">code source</a>).</p> + <p><strong>Note :</strong> Il est également possible d'utiliser un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> au sein d'une fonction asynchrone, à la place d'un bloc asynchrone <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">exemple en direct</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">code source</a>).</p> </div> <h2 id="handling_asyncawait_slowdown">Gérer les ralentissements potentiellement causés par async/await</h2> diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html index 0e44c87232..0b71c56c49 100644 --- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html +++ b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html @@ -21,9 +21,9 @@ translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach <div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div> -<p class="summary">Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.</p> +<p>Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.html b/files/fr/learn/javascript/asynchronous/concepts/index.html index ebcb242eae..ee10969b47 100644 --- a/files/fr/learn/javascript/asynchronous/concepts/index.html +++ b/files/fr/learn/javascript/asynchronous/concepts/index.html @@ -12,9 +12,9 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts --- <div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div> -<p class="summary">Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.</p> +<p>Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -33,7 +33,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts <p>Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".</p> -<p><img alt="Spinner multicolore pour macOS avec ballon de plage." src="beachball.jpg" style="display: block; float: left; margin: 0px 30px 0px 0px;"></p> +<p><img alt="Spinner multicolore pour macOS avec ballon de plage." src="beachball.jpg"></p> <p>C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la <strong>programmation asynchrone</strong>. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.</p> @@ -63,9 +63,8 @@ btn.addEventListener('click', () => { <p>Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.</p> +<div class="note"> + <p><strong>Note :</strong> L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.</p> </div> <p>Dans notre deuxième exemple, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">voir en direct</a>), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :</p> @@ -92,9 +91,8 @@ alertBtn.addEventListener('click', () => <p>Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.</p> +<div class="note"> + <p><strong>Note :</strong> D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.</p> </div> <p>Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur <strong>un seul <i>thread</i></strong>. À ce stade, nous devons introduire le concept de <strong><i>threads</i></strong>.</p> diff --git a/files/fr/learn/javascript/asynchronous/index.html b/files/fr/learn/javascript/asynchronous/index.html index 31e2c8bfbe..0688d5de42 100644 --- a/files/fr/learn/javascript/asynchronous/index.html +++ b/files/fr/learn/javascript/asynchronous/index.html @@ -19,12 +19,12 @@ translation_of: Learn/JavaScript/Asynchronous --- <div>{{LearnSidebar}}</div> -<p class="summary">Dans ce module, nous examinons le <a href="/fr/docs/Glossary/JavaScript">JavaScript</a> <a href="/fr/docs/Glossary/Asynchronous">asynchrone</a>, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.</p> +<p>Dans ce module, nous examinons le <a href="/fr/docs/Glossary/JavaScript">JavaScript</a> <a href="/fr/docs/Glossary/Asynchronous">asynchrone</a>, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.</p> <div class="callout"> - <h4 id="looking_to_become_a_front-end_web_developer">Vous cherchez à devenir une développeuse ou un développeur web front-end ?</h4> + <p>Vous cherchez à devenir une développeuse ou un développeur web front-end ?</p> <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> + <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> </p> </div> @@ -35,8 +35,7 @@ translation_of: Learn/JavaScript/Asynchronous <p>Si vous n'êtes pas familier avec le concept de programmation asynchrone, vous devriez absolument commencer par l'article <a href="/fr/docs/Learn/JavaScript/Asynchronous/Concepts">Concepts généraux de programmation asynchrone</a> de ce module. Si vous connaissez ce concept, vous pouvez probablement passer directement au module <a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing">Introduction au JavaScript asynchrone</a>.</p> <div class="note"> - <p><b>Note :</b></p> - <p>Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://glitch.com">Glitch</a>.</p> + <p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://glitch.com">Glitch</a>.</p> </div> <h2 id="guides">Guides</h2> diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.html b/files/fr/learn/javascript/asynchronous/introducing/index.html index b58da5b180..1a352017dd 100644 --- a/files/fr/learn/javascript/asynchronous/introducing/index.html +++ b/files/fr/learn/javascript/asynchronous/introducing/index.html @@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div> -<p class="summary">Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.</p> +<p>Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -68,15 +68,12 @@ btn.addEventListener('click', () => { <p>Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragraphe n'apparaîtra qu'après avoir appuyé sur le bouton OK dans la boîte d'alerte. Vous pouvez l'essayer vous-même :</p> -<div class="hidden"> - <pre class="brush: html"><<span class="pl-ent">button</span>>Cliquez sur moi</<span class="pl-ent">button</span>></pre> -</div> +<pre class="brush: html hidden"><button>Cliquez sur moi</button></pre> <p>{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Il est important de se rappeler que <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code>, tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.</p> +<div class="note"> + <p><strong>Note :</strong> Il est important de se rappeler que <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code>, tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.</p> </div> <h2 id="asynchronous_javascript">JavaScript asynchrone</h2> @@ -162,9 +159,8 @@ gods.forEach(function (eachName, index){ console.log('Problème de récupération : ' + err.message); });</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez trouver la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">voir la source ici</a>, et aussi <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">voir le fonctionnement en direct</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez trouver la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">voir la source ici</a>, et aussi <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">voir le fonctionnement en direct</a>).</p> </div> <p>Nous voyons ici <code>fetch()</code> prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a>. La promesse est un objet représentant l'achèvement ou l'échec de l'opération asynchrone. Elle représente un état intermédiaire, en quelque sorte. En substance, c'est la façon dont le navigateur dit « Je promets de vous donner la réponse dès que possible », d'où le nom de « promesse ».</p> @@ -176,9 +172,8 @@ gods.forEach(function (eachName, index){ <li>Le bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> à la fin s'exécute si l'un des blocs <code>.then()</code> échoue - de manière similaire aux blocs synchrones <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch" >try...catch</a></code>, un objet d'erreur est mis à disposition à l'intérieur du <code>catch()</code>, qui peut être utilisé pour signaler le type d'erreur qui s'est produit. Notez cependant que le <code>try...catch</code> synchrone ne fonctionnera pas avec les promesses, bien qu'il fonctionne avec <a href="/fr/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, comme vous l'apprendrez plus tard.</li> </ul> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.</p> +<div class="note"> + <p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.</p> </div> <h3 id="the_event_queue">La file d'attente des événements</h3> @@ -255,18 +250,16 @@ console.log(`Tout est bon !`);</pre> <p>Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction <code>console.log()</code>, le bloc <code>fetch()</code> n'a pas fini de s'exécuter, de sorte que la variable <code>image</code> n'a pas reçu de valeur.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Pour des raisons de sécurité, vous ne pouvez pas <code>fetch()</code> les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur web local</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Pour des raisons de sécurité, vous ne pouvez pas <code>fetch()</code> les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur web local</a>.</p> </div> <h2 id="active_learning_make_it_all_async!">Apprentissage actif : rendez tout asynchrone !</h2> <p>Pour corriger l'exemple problématique de <code>fetch()</code> et faire en sorte que les trois déclarations <code>console.log()</code> apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration <code>console.log()</code> s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc <code>.then()</code> enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc <code>then()</code>. Essayez de corriger cela maintenant.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous êtes bloqué, vous pouvez <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">trouver une réponse ici</a> (voyez-la fonctionner <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">en direct</a>). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide <a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a>, plus loin dans ce module.</p> +<div class="note"> + <p><strong>Note :</strong> Si vous êtes bloqué, vous pouvez <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">trouver une réponse ici</a> (voyez-la fonctionner <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">en direct</a>). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide <a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Gérer les opérations asynchrones avec élégance grâce aux Promesses</a>, plus loin dans ce module.</p> </div> <h2 id="conclusion">Conclusion</h2> diff --git a/files/fr/learn/javascript/asynchronous/promises/index.html b/files/fr/learn/javascript/asynchronous/promises/index.html index 499dcb87be..69f6de6a21 100644 --- a/files/fr/learn/javascript/asynchronous/promises/index.html +++ b/files/fr/learn/javascript/asynchronous/promises/index.html @@ -19,9 +19,9 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div> -<p class="summary"><strong>Les promesses</strong> sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.</p> +<p><strong>Les promesses</strong> sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -69,9 +69,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <p>La chose importante ici est que l'appel <code>getUserMedia()</code> revient presque immédiatement, même si le flux de la caméra n'a pas encore été obtenu. Même si la fonction <code>handleCallButton()</code> est déjà retournée au code qui l'a appelée, lorsque <code>getUserMedia()</code> a fini de travailler, elle appelle le gestionnaire que vous fournissez. Tant que l'application ne suppose pas que le flux a commencé, elle peut continuer à fonctionner.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article <a href="/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling">L'essentiel du WebRTC</a>. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article <a href="/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling">L'essentiel du WebRTC</a>. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.</p> </div> <h2 id="the_trouble_with_callbacks">Le problème des fonctions de rappel</h2> @@ -146,9 +145,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <p>Cependant, la lecture n'est pas aussi facile et cette syntaxe peut ne pas être utilisable si vos blocs sont plus complexes que ce que nous avons montré ici.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez apporter d'autres améliorations avec la syntaxe <code>async</code>/<code>await</code>, que nous aborderons dans le prochain article.</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez apporter d'autres améliorations avec la syntaxe <code>async</code>/<code>await</code>, que nous aborderons dans le prochain article.</p> </div> <p>Dans leur forme la plus basique, les promesses sont similaires aux écouteurs d'événements, mais avec quelques différences :</p> @@ -164,9 +162,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises <p>Dans le premier exemple, nous allons utiliser la méthode <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch"><code>fetch()</code></a> pour récupérer une image sur le web, la méthode <a href="/fr/docs/Web/API/Body/blob"><code>blob()</code></a> pour transformer le contenu brut du corps de la réponse fetch en un objet <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a>, puis afficher ce blob à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>. Cet exemple est très similaire à celui que nous avons examiné dans le <a href="/fr/docs/Learn/JavaScript/Asynchronous/Introducing#asynchronous_javascript">premier article</a>, mais nous le ferons un peu différemment au fur et à mesure que nous vous ferons construire votre propre code basé sur des promesses.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL <code>file://</code>). Vous devez l'exécuter via un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur de test local</a>, ou utiliser une solution en ligne telle que <a href="https://glitch.com/">Glitch</a> ou <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">les pages GitHub</a>.</p> +<div class="note"> + <p><strong>Note :</strong> L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL <code>file://</code>). Vous devez l'exécuter via un <a href="/fr/docs/Learn/Common_questions/set_up_a_local_testing_server">serveur de test local</a>, ou utiliser une solution en ligne telle que <a href="https://glitch.com/">Glitch</a> ou <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">les pages GitHub</a>.</p> </div> <ol> @@ -183,9 +180,8 @@ translation_of: Learn/JavaScript/Asynchronous/Promises </li> <li> <p>Pour répondre à l'achèvement réussi de l'opération lorsque cela se produit (dans ce cas, lorsqu'une <a href="/fr/docs/Web/API/Response">réponse</a> est retournée), nous invoquons la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/then"><code>.then()</code></a> de l'objet promesse. La fonction de rappel à l'intérieur du bloc <code>.then()</code> s'exécute uniquement lorsque l'appel de la promesse se termine avec succès et retourne l'objet <a href="/fr/docs/Web/API/Response"><code>Response</code></a> — en langage de promesse, lorsqu'elle a été <strong>remplie</strong> (<i>fullfilled</i> en anglais). On lui passe l'objet <a href="/fr/docs/Web/API/Response"><code>Response</code></a> retourné en tant que paramètre.</p> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Le fonctionnement d'un bloc <code>.then()</code> est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de <code>AddEventListener()</code>. Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un <code>.then()</code> ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.</p> + <div class="note"> + <p><strong>Note :</strong> Le fonctionnement d'un bloc <code>.then()</code> est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de <code>AddEventListener()</code>. Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un <code>.then()</code> ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.</p> </div> <p>Nous exécutons immédiatement la méthode <code>blob()</code> sur cette réponse pour nous assurer que le corps de la réponse est entièrement téléchargé, et lorsqu'il est disponible, le transformer en un objet <code>Blob</code> avec lequel nous pouvons faire quelque chose. Le résultat de cette méthode est retourné comme suit :</p> <pre class="brush: js">response => response.blob()</pre> @@ -220,9 +216,8 @@ document.body.appendChild(image);</pre> <p>Si vous enregistrez le fichier HTML que vous venez de créer et le chargez dans votre navigateur, vous verrez que l'image s'affiche dans la page comme prévu. Bon travail !</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne <code>fetch()</code> et <code>blob()</code>, et simplement créer un élément <code><img></code> et définir la valeur de son attribut <code>src</code> à l'URL du fichier image, <code>coffee.jpg</code>. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.</p> +<div class="note"> + <p><strong>Note :</strong> Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne <code>fetch()</code> et <code>blob()</code>, et simplement créer un élément <code><img></code> et définir la valeur de son attribut <code>src</code> à l'URL du fichier image, <code>coffee.jpg</code>. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.</p> </div> <h3 id="responding_to_failure">Réagir à un échec</h3> @@ -237,9 +232,8 @@ document.body.appendChild(image);</pre> <p>Cela ne fait pas beaucoup plus que si vous ne preniez pas la peine d'inclure le bloc <code>.catch()</code> du tout, mais pensez-y - cela nous permet de contrôler la gestion des erreurs exactement comme nous le voulons. Dans une application réelle, votre bloc <code>.catch()</code> pourrait réessayer de récupérer l'image, ou afficher une image par défaut, ou demander à l'utilisateur de fournir une URL d'image différente, ou autre.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez voir <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html">notre version de l'exemple en direct</a> (voir également son <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html">code source</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez voir <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html">notre version de l'exemple en direct</a> (voir également son <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html">code source</a>).</p> </div> <h3 id="chaining_the_blocks_together">Enchaîner les blocs</h3> @@ -266,9 +260,8 @@ document.body.appendChild(image);</pre> <p>Gardez à l'esprit que la valeur renvoyée par une promesse remplie devient le paramètre transmis à la fonction de rappel du bloc <code>.then()</code> suivant.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Les blocs <code>.then()</code>/<code>.catch()</code> dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> dans du code synchrone. Gardez à l'esprit que le <code>try...catch</code> synchrone ne fonctionnera pas dans du code asynchrone.</p> +<div class="note"> + <p><strong>Note :</strong> Les blocs <code>.then()</code>/<code>.catch()</code> dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> dans du code synchrone. Gardez à l'esprit que le <code>try...catch</code> synchrone ne fonctionnera pas dans du code asynchrone.</p> </div> <h2 id="promise_terminology_recap">Récapitulatif de la terminologie des promesses</h2> @@ -394,14 +387,12 @@ document.body.appendChild(para);</pre> <p>Le code que nous avons fourni ici pour l'affichage des articles est assez rudimentaire, mais il fonctionne comme une explication pour le moment.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">voir en direct</a>, et voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">code source</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">voir en direct</a>, et voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">code source</a>.</p> </div> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de <code>Promise.all()</code>, en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.</p> +<div class="note"> + <p><strong>Note :</strong> Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de <code>Promise.all()</code>, en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.</p> <p>De plus, vous pourriez déterminer quel est le type de fichier récupéré sans avoir besoin d'une propriété <code>type</code> explicite. Vous pourriez, par exemple, vérifier l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> de la réponse dans chaque cas en utilisant <a href="/fr/docs/Web/API/Headers/get"><code>response.headers.get("content-type")</code></a>, puis agir en conséquence.</p> </div> @@ -456,9 +447,8 @@ document.body.appendChild(para);</pre> <p>Cela permet d'envoyer un simple message à la console pour nous dire quand chaque tentative de récupération est terminée.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p><code>then()</code>/<code>catch()</code>/<code>finally()</code> est l'équivalent asynchrone de <code>try</code>/<code>catch</code>/<code>finally</code> en code synchrone.</p> +<div class="note"> + <p><strong>Note :</strong> <code>then()</code>/<code>catch()</code>/<code>finally()</code> est l'équivalent asynchrone de <code>try</code>/<code>catch</code>/<code>finally</code> en code synchrone.</p> </div> <h2 id="building_your_own_custom_promises">Construire vos propres promesses personnalisées</h2> @@ -496,9 +486,8 @@ document.body.appendChild(para);</pre> <p>L'exemple ci-dessus n'est pas très flexible - la promesse ne peut jamais s'accomplir qu'avec une seule chaîne de caractères, et elle n'a aucune sorte de condition <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject"><code>reject()</code></a> spécifiée (il est vrai que <code>setTimeout()</code> n'a pas vraiment de condition d'échec, donc cela n'a pas d'importance pour cet exemple).</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Pourquoi <code>resolve()</code>, et pas <code>fulfill()</code> ? La réponse que nous vous donnerons, pour l'instant, est <em>c'est compliqué</em>.</p> +<div class="note"> + <p><strong>Note :</strong> Pourquoi <code>resolve()</code>, et pas <code>fulfill()</code> ? La réponse que nous vous donnerons, pour l'instant, est <em>c'est compliqué</em>.</p> </div> <h3 id="rejecting_a_custom_promise">Rejeter une promesse personnalisée</h3> @@ -545,9 +534,8 @@ document.body.appendChild(para);</pre> <p>Lorsque vous enregistrez et exécutez le code tel quel, après une seconde, vous obtiendrez le message d'alerte. Essayez maintenant de définir le message sur une chaîne vide ou l'intervalle sur un nombre négatif, par exemple, et vous pourrez voir la promesse rejetée avec les messages d'erreur appropriés ! Vous pouvez également essayer de faire autre chose avec le message résolu plutôt que de simplement créer une alerte.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez trouver notre version de cet exemple sur GitHub sur <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html">custom-promise2.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html">code source</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez trouver notre version de cet exemple sur GitHub sur <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html">custom-promise2.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html">code source</a>).</p> </div> <h3 id="a_more_real-world_example">Un exemple plus concret</h3> diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html index c776e4773b..e2f90a12fb 100644 --- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html @@ -20,9 +20,9 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals <div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div> -<p class="summary">Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.</p> +<p>Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -66,9 +66,8 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals <li>Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.</li> </ul> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>La quantité de temps spécifiée (ou le délai) n'est <strong>pas</strong> le <em>temps garanti</em> à l'exécution, mais plutôt le <em>temps minimum</em> à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.</p> +<div class="note"> + <p><strong>Note :</strong> La quantité de temps spécifiée (ou le délai) n'est <strong>pas</strong> le <em>temps garanti</em> à l'exécution, mais plutôt le <em>temps minimum</em> à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.</p> <p>En conséquence, un code comme <code>setTimeout(fn, 0)</code> s'exécutera dès que la pile sera vide, <strong>pas</strong> immédiatement. Si vous exécutez un code comme <code>setTimeout(fn, 0)</code> mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.</p> </div> @@ -116,9 +115,8 @@ let maSalutation = setTimeout(direBonjour, 2000);</pre> <pre class="brush: js">clearTimeout(maSalutation);</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Voir <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">voir aussi le code source</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Voir <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">voir aussi le code source</a>).</p> </div> <h2 id="setinterval">setInterval()</h2> @@ -179,9 +177,8 @@ clearInterval(myInterval);</pre> <li>Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs <code>setInterval()</code> à l'horloge, ce qui entraînera un comportement erroné.</li> </ul> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous êtes bloqué, vous pouvez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">trouver notre version ici</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">code source</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Si vous êtes bloqué, vous pouvez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">trouver notre version ici</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">code source</a>).</p> </div> <h2 id="things_to_keep_in_mind_about_settimeout_and_setinterval">Choses à garder à l'esprit concernant setTimeout() et setInterval()</h2> @@ -251,9 +248,8 @@ alert('Hello');</pre> <p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Plus d'informations à ce sujet sur CreativeJS</a> <small>(en)</small>.)</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous trouverez des exemples d'utilisation de <code>requestAnimationFrame()</code> ailleurs dans le cours - voir par exemple <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>, et <a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">La construction d'objet en pratique</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Vous trouverez des exemples d'utilisation de <code>requestAnimationFrame()</code> ailleurs dans le cours - voir par exemple <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a>, et <a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">La construction d'objet en pratique</a>.</p> </div> <p>La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :</p> @@ -267,9 +263,8 @@ draw();</pre> <p>L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez <code>requestAnimationFrame()</code> avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle <code>requestAnimationFrame()</code> de manière récursive.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, <a href="/fr/docs/Web/CSS/CSS_Animations">les animations CSS</a> sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.</p> +<div class="note"> + <p><strong>Note :</strong> Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, <a href="/fr/docs/Web/CSS/CSS_Animations">les animations CSS</a> sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.</p> <p>Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets <a href="/fr/docs/Web/API/Canvas_API">2D Canvas API</a> ou <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>), <code>requestAnimationFrame()</code> est la meilleure option dans la plupart des cas.</p> </div> @@ -338,9 +333,8 @@ draw();</pre> <p>Assez avec la théorie ! Construisons votre propre exemple personnel de <code>requestAnimationFrame()</code>. Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.</p> -<div class="notecard note"> - <p><b>Note: </b></p> - <p>Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de <code>requestAnimationFrame()</code>, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.</p> +<div class="note"> + <p><strong>Note :</strong> Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de <code>requestAnimationFrame()</code>, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.</p> </div> <ol> @@ -402,9 +396,8 @@ let rAF; </li> </ol> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez trouver l'<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">exemple terminé en direct sur GitHub</a>. (Vous pouvez également voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">code source</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">exemple terminé en direct sur GitHub</a>. (Vous pouvez également voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">code source</a>).</p> </div> <h3 id="clearing_a_requestanimationframe_call">Effacer un appel de requestAnimationFrame()</h3> @@ -426,9 +419,8 @@ let rAF; <li>Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.</li> </ul> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">exemple en direct</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">code source</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">exemple en direct</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">code source</a>.</p> </div> <h3 id="throttling_a_requestanimationframe_animation">Ralentissement d'une animation requestAnimationFrame()</h3> @@ -536,9 +528,8 @@ function start() { btn.style.display = 'none'; setTimeout(setEndgame, random(5000,10000)); }</pre> - <div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous verrez que cet exemple appelle <code>setTimeout()</code> sans stocker la valeur de retour. (Donc, pas <code>let myTimeout = setTimeout(functionName, interval)</code>.)</p> + <div class="note"> + <p><strong>Note :</strong> Vous verrez que cet exemple appelle <code>setTimeout()</code> sans stocker la valeur de retour. (Donc, pas <code>let myTimeout = setTimeout(functionName, interval)</code>.)</p> <p>Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !</p> </div> <p>Le résultat net du code précédent est que lorsque le bouton <em>Start</em> est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction <code>setEndgame()</code>, que vous allez définir ensuite.</p> @@ -586,9 +577,8 @@ function start() { <p>Voilà, c'est fait !</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous êtes bloqué, consultez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">notre version du jeu en live</a> (voir également le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">code source</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Si vous êtes bloqué, consultez <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">notre version du jeu en live</a> (voir également le <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">code source</a>).</p> </div> <h2 id="conclusion">Conclusion</h2> diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html index 1463cc1e20..696c4d50d3 100644 --- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.</p> +<p>Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Savoir-faire de base, une compréhension minimale HTML et CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocs de code réutilisables</a>.</td> + <td>Savoir-faire de base, une compréhension minimale HTML et CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocs de code réutilisables</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -36,16 +36,16 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function <h2 id="Apprentissage_actif_Construisons_une_fonction">Apprentissage actif : Construisons une fonction</h2> -<p>La fonction que nous allons construire sera nommée <code>displayMessage()</code>. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction <a href="/en-US/docs/Web/API/Window/alert">alert()</a> du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :</p> +<p>La fonction que nous allons construire sera nommée <code>displayMessage()</code>. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction <a href="/fr/docs/Web/API/Window/alert">alert()</a> du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :</p> <pre class="brush: js">alert('This is a message');</pre> <p>La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.</p> -<p>La fonction <a href="/en-US/docs/Web/API/Window/alert">alert()</a> est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.</p> +<p>La fonction <a href="/fr/docs/Web/API/Window/alert">alert()</a> est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.</p> <div class="note"> -<p><strong>Note </strong>: Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.</p> +<p><strong>Note :</strong> Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.</p> </div> <h2 id="La_fonction_de_base">La fonction de base</h2> @@ -53,7 +53,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function <p>Pour commencer, mettons en place une fonction de base.</p> <div class="note"> -<p><strong>Note </strong>: Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">conventions de noms de variables</a>. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.</p> +<p><strong>Note :</strong> Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les <a href="/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">conventions de noms de variables</a>. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.</p> </div> <ol> @@ -195,7 +195,8 @@ panel.appendChild(closeBtn);</pre> <ol> <li>Tout d'abord, téléchargez les icônes nécessaires à cet exercice (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé <code>icons</code> dans le même répertoire que votre fichier HTML. - <div class="note"><strong>Note </strong>: icônes <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> et <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> trouvés sur iconfinder.com, et créés par <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Merci !</div> + <div class="note"> + <p><strong>Note :</strong> icônes <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> et <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> trouvés sur iconfinder.com, et créés par <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Merci !</p></div> </li> <li>Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur <code>.msgBox</code> en changeant : <pre class="brush: css">width: 200px;</pre> @@ -229,7 +230,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');</pre> </ol> <div class="note"> -<p><strong>Note </strong>: Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">version définitive sur GitHub</a> (aussi, vous pouvez tester la <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">démo</a>), ou nous demander de l'aide.</p> +<p><strong>Note :</strong> Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">version définitive sur GitHub</a> (aussi, vous pouvez tester la <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">démo</a>), ou nous demander de l'aide.</p> </div> <h2 id="Conclusion">Conclusion</h2> diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.html b/files/fr/learn/javascript/building_blocks/conditionals/index.html index a41c2385f6..5a6a89cc13 100644 --- a/files/fr/learn/javascript/building_blocks/conditionals/index.html +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.html @@ -21,7 +21,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals <p>Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -40,7 +40,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals <p>Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png"></p> +<p><img alt="" src="cookie-choice-small.png"></p> <h2 id="Instruction_if_..._else">Instruction if ... else</h2> @@ -100,7 +100,7 @@ if (coursesFaites === true) { <p>Avec un tel code, la variable <code>coursesFaites</code> renvoie toujours <code>false</code>, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne <code>true</code> à la variable <code>coursesFaites</code> si l'enfant a fait les courses.</p> <div class="note"> -<p><strong>Note</strong> : Vous pouvez voir une <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">version plus complète de cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">version live</a>.)</p> +<p><strong>Note :</strong> Vous pouvez voir une <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">version plus complète de cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">version live</a>.)</p> </div> <h3 id="else_if">else if</h3> @@ -109,37 +109,37 @@ if (coursesFaites === true) { <p>Il existe un moyen d'enchaîner des choix / résultats supplémentaires à <code>if...else</code> — en utilisant <code>else if</code> entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre <code>if() { ... }</code> et <code>else { ... }</code> — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:</p> -<pre class="brush: html line-numbers language-html" style="font-size: 16px !important; line-height: 24px !important;"><code class="language-html" style="font-size: 16px !important; line-height: 24px !important;"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"weather</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Select the weather type today: <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>weather<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>--Make a choice--<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sunny<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Sunny<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>rainy<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Rainy<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>snowing<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Snowing<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>overcast<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Overcast<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js line-numbers language-js" style="font-size: 16px !important; line-height: 24px !important;"><code class="language-js" style="font-size: 16px !important; line-height: 24px !important;">const select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -const para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -select<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'change'</span><span class="punctuation token">,</span> setWeather<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">setWeather</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - const choice <span class="operator token">=</span> select<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'sunny'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'rainy'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'snowing'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>choice <span class="operator token">===</span> <span class="string token">'overcast'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: html"><label for="weather">Select the weather type today: </label> +<select id="weather"> + <option value="">--Make a choice--</option> + <option value="sunny">Sunny</option> + <option value="rainy">Rainy</option> + <option value="snowing">Snowing</option> + <option value="overcast">Overcast</option> +</select> + +<p></p></pre> + +<pre class="brush: js">const select = document.querySelector('select'); +const para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + +function setWeather() { + const choice = select.value; + + if (choice === 'sunny') { + para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; + } else if (choice === 'rainy') { + para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'; + } else if (choice === 'snowing') { + para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; + } else if (choice === 'overcast') { + para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; + } else { + para.textContent = ''; + } +}</pre> <p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p> @@ -151,7 +151,7 @@ select<span class="punctuation token">.</span><span class="function token">addEv </ol> <div class="note"> -<p><strong>Note </strong>: Vous trouverez également <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">version live</a> ici.)</p> +<p><strong>Note :</strong> Vous trouverez également <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">version live</a> ici.)</p> </div> <h3 id="Une_note_sur_les_opérateurs_de_comparaison">Une note sur les opérateurs de comparaison</h3> @@ -165,7 +165,7 @@ select<span class="punctuation token">.</span><span class="function token">addEv </ul> <div class="note"> -<p><strong>Note </strong>: Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.</p> +<p><strong>Note :</strong> Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.</p> </div> <p>Nous souhaitons mentionner à propos des tests des valeurs booléennes (<code>true</code>/<code>false</code>) un modèle courant que vous rencontrerez souvent. Toute valeur autre que <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> ou une chaîne vide (<code>''</code>) renvoie <code>true</code> lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est <code>true</code>, ou même si elle existe (c'est-à-dire si elle n'est pas <code>undefined</code>).<br> @@ -262,7 +262,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true' <p>Les Instructions <code>if...else</code> font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.</p> -<p>Les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch">instructions switch</a> sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :</p> +<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Instructions/switch">instructions switch</a> sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :</p> <pre class="brush: js"><strong>switch (expression) {</strong> <strong>case</strong> choix1<strong>:</strong> @@ -292,7 +292,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true' </ol> <div class="note"> -<p><strong>Note</strong> : Vous n'avez pas à inclure la section <code>default</code> — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.</p> +<p><strong>Note :</strong> Vous n'avez pas à inclure la section <code>default</code> — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.</p> </div> <h3 id="Un_exemple_de_switch">Un exemple de switch</h3> @@ -340,12 +340,12 @@ function setWeather() { <p>{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}</p> <div class="note"> -<p><strong>Note</strong><strong> </strong>: Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">cours d'exécution </a>ici aussi.)</p> +<p><strong>Note :</strong> Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">cours d'exécution </a>ici aussi.)</p> </div> <h2 id="Opérateur_ternaire">Opérateur ternaire</h2> -<p>Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">opérateur ternaire ou conditionnel</a> est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est <code>true</code> et une autre si elle est <code>false</code> — elle est utile dans certains cas, et occupe moins de place qu'un bloc <code>if...else</code> si votre choix est limité à deux possibilités à choisir via une condition <code>true</code>/<code>false</code>. Voici le pseudo‑code correspondant :</p> +<p>Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">opérateur ternaire ou conditionnel</a> est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est <code>true</code> et une autre si elle est <code>false</code> — elle est utile dans certains cas, et occupe moins de place qu'un bloc <code>if...else</code> si votre choix est limité à deux possibilités à choisir via une condition <code>true</code>/<code>false</code>. Voici le pseudo‑code correspondant :</p> <pre>( condition ) ? exécuter ce code : exécuter celui‑ci à la place</pre> @@ -385,10 +385,10 @@ select.onchange = function() { <p>Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction <code>update()</code>, qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.</p> -<p>Nous avons également mis un écouteur d'événement <a href="https://developer.mozilla.org/fr/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — <code>select.value === 'black'</code>. Si le test renvoie <code>true</code>, nous exécutons la fonction <code>update()</code> avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie <code>false</code>, nous exécutons <code>update()</code> avec les paramètres noir et blanc, les couleurs du site seront inversées.</p> +<p>Nous avons également mis un écouteur d'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — <code>select.value === 'black'</code>. Si le test renvoie <code>true</code>, nous exécutons la fonction <code>update()</code> avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie <code>false</code>, nous exécutons <code>update()</code> avec les paramètres noir et blanc, les couleurs du site seront inversées.</p> <div class="note"> -<p><strong>Note</strong><strong> </strong>: Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">cours d'exécution </a>ici aussi.)</p> +<p><strong>Note :</strong> Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">cours d'exécution </a>ici aussi.)</p> </div> <h2 id="Apprentissage_actif_un_calendrier_simple">Apprentissage actif : un calendrier simple</h2> @@ -417,10 +417,7 @@ select.onchange = function() { <p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="output" style="height: 500px;overflow: auto;"> +<pre class="brush: html hidden"><div class="output" style="height: 500px;overflow: auto;"> <label for="month">Choisissez un mois : </label> <select id="month"> <option value="Janvier">Janvier</option> @@ -476,7 +473,7 @@ createCalendar(31,'Janvier'); </div> </pre> -<pre class="brush: css">.output * { +<pre class="brush: css hidden">.output * { box-sizing: border-box; } @@ -496,7 +493,7 @@ createCalendar(31,'Janvier'); } </pre> -<pre class="brush: js">const textarea = document.getElementById('code'); +<pre class="brush: js hidden">const textarea = document.getElementById('code'); const reset = document.getElementById('reset'); const solution = document.getElementById('solution'); let code = textarea.value; @@ -520,11 +517,10 @@ var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = d textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> -<h2 id="Activité_plus_de_choix_de_couleurs_!">Activité : plus de choix de couleurs !</h2> +<h2 id="Activité_plus_de_choix_de_couleurs">Activité : plus de choix de couleurs</h2> <p>Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive <code>switch</code> qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive <code>switch</code> au dessous du commentaire <code>// AJOUT D'UNE DIRECTIVE SWITCH</code> :</p> @@ -536,10 +532,7 @@ window.addEventListener('load', updateCode); <p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><div class="output" style="height: 300px;"> +<pre class="brush: html hidden"><div class="output" style="height: 300px;"> <label for="theme">Choisissez un thème : </label> <select id="theme"> <option value="white">Blanc</option> @@ -575,7 +568,7 @@ function update(bgColor, textColor) { </div> </pre> -<pre class="brush: js">const textarea = document.getElementById('code'); +<pre class="brush: js hidden">const textarea = document.getElementById('code'); const reset = document.getElementById('reset'); const solution = document.getElementById('solution'); let code = textarea.value; @@ -599,21 +592,20 @@ const jsSolution = 'const select = document.querySelector(\'select\');\nlet html textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}</p> +<p>{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}</p> <h2 id="Conclusion">Conclusion</h2> -<p>C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien <a href="https://developer.mozilla.org/fr/Apprendre#Nous_contacter">contactez‑nous</a> pour une aide.</p> +<p>C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien <a href="/fr/Apprendre#Nous_contacter">contactez‑nous</a> pour une aide.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Opérateurs de comparaison</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs#Les_instructions_conditionnelles">Les instructions conditionnelles</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else">Référence if...else</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Référence opérateur conditionnel (ternaire)</a></li> + <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Opérateurs de comparaison</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs#Les_instructions_conditionnelles">Les instructions conditionnelles</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">Référence if...else</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Référence opérateur conditionnel (ternaire)</a></li> </ul> <p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p> @@ -621,11 +613,11 @@ window.addEventListener('load', updateCode); <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans du code — conditions</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — blocs de code réutilisables</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Gallerie d'images</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans du code — conditions</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — blocs de code réutilisables</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Gallerie d'images</a></li> </ul> diff --git a/files/fr/learn/javascript/building_blocks/events/index.html b/files/fr/learn/javascript/building_blocks/events/index.html index c61ed3635e..b8bd4ba3d6 100644 --- a/files/fr/learn/javascript/building_blocks/events/index.html +++ b/files/fr/learn/javascript/building_blocks/events/index.html @@ -1,14 +1,6 @@ --- title: Introduction aux évènements slug: Learn/JavaScript/Building_blocks/Events -tags: - - Article - - Codage - - Débutant - - Evènement - - Gestionnaire d'événement - - Guide - - JavaScript translation_of: Learn/JavaScript/Building_blocks/Events original_slug: Apprendre/JavaScript/Building_blocks/Evènements --- @@ -16,45 +8,45 @@ original_slug: Apprendre/JavaScript/Building_blocks/Evènements <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary"><span id="result_box" lang="fr"><span>Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez.</span> <span>Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information.</span> <span>Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs.</span> <span>Ce ne sera pas une étude exhaustive;</span> mais seulement<span> ce que vous devez savoir à ce stade.</span></span></p> +<p>Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td><span id="result_box" lang="fr"><span>Connaissances de base en informatique, une compréhension de base de HTML et CSS, </span></span><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td> + <td>Connaissances de base en informatique, une compréhension de base de HTML et CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> - <td><span id="result_box" lang="fr"><span>Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.</span></span></td> + <td>Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.</td> </tr> </tbody> </table> <h2 id="Une_série_d'événements_heureux">Une série d'événements heureux</h2> -<p><span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez </span></span>— <span lang="fr"><span>le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit.</span> <span>Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.</span></span></p> +<p>Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="" src="MDN-mozilla-events-runway.png"></p> -<p><span id="result_box" lang="fr"><span>Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou</span> <span>toute la fenêtre du navigateur.</span> <span>Il y a beaucoup de types différents </span></span><span lang="fr"><span>d'événements qui peuvent se produire, par exemple :</span></span></p> +<p>Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :</p> <ul> - <li><span>L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.</span></li> - <li><span lang="fr"><span>L'utilisateur appuie sur une touche du clavier.</span> </span></li> - <li><span lang="fr"><span>L'utilisateur redimensionne ou ferme la fenêtre du navigateur.</span> </span></li> - <li><span lang="fr"><span>Une page web finissant de se charger.</span> </span></li> - <li><span lang="fr"><span>Un formulaire en cours de soumission</span> </span></li> - <li><span lang="fr"><span>Une vidéo en cours de lecture, en pause ou en fin de lecture.</span> </span></li> - <li><span lang="fr"><span>Une erreur qui survient.</span></span></li> + <li>L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.</li> + <li>L'utilisateur appuie sur une touche du clavier. </li> + <li>L'utilisateur redimensionne ou ferme la fenêtre du navigateur. </li> + <li>Une page web finissant de se charger. </li> + <li>Un formulaire en cours de soumission </li> + <li>Une vidéo en cours de lecture, en pause ou en fin de lecture. </li> + <li>Une erreur qui survient.</li> </ul> -<p><span id="result_box" lang="fr"><span>Vous vous en rendrez compte (notamment en jetant un coup d'œil à la</span></span> section <span lang="fr"><span>MDN </span></span><a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des événements</a><span lang="fr"><span> ), il y a <strong>beaucoup</strong> d'événements auxquels vous pouvez répondre.</span><br> +<p>Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN <a href="/fr/docs/Web/Events">Référence des événements</a> ), il y a <strong>beaucoup</strong> d'événements auxquels vous pouvez répondre.<br> <br> - <span>Chaque événement disponible a un <strong>gestionnaire d'événement</strong>, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera.</span> <span>Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous <strong>enregistrons un gestionnaire d'événements</strong>.</span> <span>Notez que les gestionnaires d'événements sont parfois appelés <strong>écouteurs d'événements</strong> - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble.</span> <span>L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.</span></span></p> + Chaque événement disponible a un <strong>gestionnaire d'événement</strong>, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous <strong>enregistrons un gestionnaire d'événements</strong>. Notez que les gestionnaires d'événements sont parfois appelés <strong>écouteurs d'événements</strong> - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.</p> <div class="note"> -<p><strong>Note</strong>: il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur</p> +<p><strong>Note :</strong> il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur</p> </div> <h3 id="Un_exemple_simple">Un exemple simple</h3> @@ -63,9 +55,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Evènements <pre class="brush: html"><button>Change color</button></pre> -<div class="hidden"> -<pre class="brush: css">button { margin: 10px };</pre> -</div> +<pre class="brush: css hidden">button { margin: 10px };</pre> <p>Le JavaScript ressemblera à ça :</p> @@ -92,21 +82,21 @@ btn.onclick = function() { <h3 id="Ce_ne_sont_pas_que_des_pages_web">Ce ne sont pas que des pages web</h3> -<p><span id="result_box" lang="fr"><span>Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript.</span> <span>En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.</span></span></p> +<p>Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.</p> -<p>Par exemple, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> <span id="result_box" lang="fr"><span>est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur.</span></span> Le modèle <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme <code>on()</code> pour enregistrer un écouteur d'événement, et <code>once()</code> pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a> propose un bon exemple d'utilisation.</p> +<p>Par exemple, <a href="/fr/docs/Learn/Server-side/Express_Nodejs">Node.js</a> est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme <code>on()</code> pour enregistrer un écouteur d'événement, et <code>once()</code> pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a> propose un bon exemple d'utilisation.</p> -<p><span id="result_box" lang="fr"><span>Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs </span></span>—<span lang="fr"><span> comme améliorations de la fonctionnalité du navigateur </span></span>—<span lang="fr"><span> à l'aide d'une technologie appelée</span></span> <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions">WebExtensions</a>. <span id="result_box" lang="fr"><span>Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent</span></span> — les écouteurs d'événements sont sensibles à la casse (p.ex.<code>onMessage</code> plutôt que <code>onmessage</code>), et doivent êtres combinés à la fonction <code>addListener</code>. Jetez un oeil à la page <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage page</a> pour voir un exemple.</p> +<p>Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée <a href="/fr/Add-ons/WebExtensions">WebExtensions</a>. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.<code>onMessage</code> plutôt que <code>onmessage</code>), et doivent êtres combinés à la fonction <code>addListener</code>. Jetez un oeil à la page <a href="/fr/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage page</a> pour voir un exemple.</p> -<p><span id="result_box" lang="fr"><span>Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage;</span> <span>nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.</span></span></p> +<p>Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.</p> <h2 id="De_quelle_manière_utiliser_les_événements_Web">De quelle manière utiliser les événements Web ?</h2> -<p><span id="result_box" lang="fr"><span>Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche.</span> <span>Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.</span></span></p> +<p>Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.</p> <h3 id="Les_propriétés_du_gestionnaire_d'événement">Les propriétés du gestionnaire d'événement</h3> -<p><span id="result_box" lang="fr"><span>Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours.</span> <span>Revenons à l'exemple ci-dessus :</span></span></p> +<p>Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :</p> <pre class="brush: js">var btn = document.querySelector('button'); @@ -115,9 +105,9 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; }</pre> -<p>La propriété <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> <span id="result_box" lang="fr"><span>est la propriété du gestionnaire d'événement utilisée dans cette situation.</span> <span>C'est essentiellement une propriété comme les autres disponibles sur le bouton</span></span> (p.ex. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), mais d'un type spécial —<span id="result_box" lang="fr"><span> lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.</span></span></p> +<p>La propriété <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. <code><a href="/fr/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/fr/docs/Web/API/HTMLElement/style">btn.style</a></code>), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.</p> -<p><span id="result_box" lang="fr"><span>Vous pouvez également définir la propriété du gestionnaire d'</span></span>événement<span lang="fr"><span> comme étant égale au nom d'une fonction définie </span></span>(comme nous l'avons vu dans <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a>). Le code suivant fonctionnera tout pareil:</p> +<p>Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans <a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a>). Le code suivant fonctionnera tout pareil:</p> <pre class="brush: js">var btn = document.querySelector('button'); @@ -128,22 +118,22 @@ function bgChange() { btn.onclick = bgChange;</pre> -<p><span id="result_box" lang="fr"><span>De nombreuses propriétés de gestionnaire d'événement sont disponibles.</span> <span>Faisons une expérience.</span></span></p> +<p>De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.</p> -<p><span class="short_text" id="result_box" lang="fr"><span>Tout d'abord, faites une copie locale de</span></span> <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, <span id="result_box" lang="fr"><span>et ouvrez-le dans votre navigateur.</span> <span>C'est juste une copie de l'exemple simple </span></span><span lang="fr"><span>de couleur aléatoire avec lequel nous avons déjà joué dans cet article.</span> <span>Maintenant, changez</span></span> <code>btn.onclick</code> <span id="result_box" lang="fr"><span>pour lui attribuer, tour à tour,</span></span><span lang="fr"><span> les différentes valeurs qui suivent, et observez le résultat:</span></span></p> +<p>Tout d'abord, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez <code>btn.onclick</code> pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:</p> <ul> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — <span id="result_box" lang="fr"><span>La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau).</span> <span>Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.</span></span></li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — La couleur change seulement si l'élément est double-cliqué.</li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — La couleur change si l'on appuie sur une touche du clavier. <code>keypress</code> se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que <code>keydown</code> et <code>keyup</code> se réfèrent respectivement à l'appui et au relâchement sur la touche. <span id="result_box" lang="fr"><span>Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a>, qui représente la fenêtre entière du navigateur.</li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — <span id="result_box" lang="fr"><span>La couleur changera respectivement</span></span><span lang="fr"><span> lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.</span></span></li> + <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> et <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.</li> + <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — La couleur change seulement si l'élément est double-cliqué.</li> + <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — La couleur change si l'on appuie sur une touche du clavier. <code>keypress</code> se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que <code>keydown</code> et <code>keyup</code> se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet <a href="/fr/docs/Web/API/Window">window</a>, qui représente la fenêtre entière du navigateur.</li> + <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> et <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.</li> </ul> -<p><span id="result_box" lang="fr"><span>Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire</span></span> <code>onclick</code> peut être enregistré sur presque n'importe quel élément), <span id="result_box" lang="fr"><span>alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser</span></span> <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).</p> +<p>Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire <code>onclick</code> peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser <a href="/fr/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).</p> <h3 id="Les_gestionnaires_d'événements_en_ligne_ne_les_utilisez_pas_!">Les gestionnaires d'événements en ligne : ne les utilisez pas !</h3> -<p><span id="result_box" lang="fr"><span>Vous pourriez également voir un motif comme celui-ci dans votre code:</span></span></p> +<p>Vous pourriez également voir un motif comme celui-ci dans votre code:</p> <pre class="brush: html"><button onclick="bgChange()">Press me</button> </pre> @@ -154,18 +144,18 @@ btn.onclick = bgChange;</pre> }</pre> <div class="note"> -<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">le voir s'exécuter</a>).</p> +<p><strong>Note :</strong> Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">le voir s'exécuter</a>).</p> </div> -<p><span id="result_box" lang="fr"><span>La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des <strong>attributs HTML du gestionnaire d'événement</strong> (c'est-à-dire <strong>les gestionnaires d'événements en ligne</strong>) comme celui présenté ci-dessus</span></span> —<span lang="fr"><span> la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient.</span> <span>L'exemple ci-dessus appelle une fonction définie dans un</span></span> élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :</p> +<p>La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des <strong>attributs HTML du gestionnaire d'événement</strong> (c'est-à-dire <strong>les gestionnaires d'événements en ligne</strong>) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :</p> <pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> -<p><span id="result_box" lang="fr"><span>Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement;</span> <span>cependant, vous ne devriez pas les utiliser </span></span>—<span lang="fr"><span> ils sont considérés comme une mauvaise pratique.</span> <span>Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.</span><br> +<p>Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.<br> <br> - <span>Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser </span></span>— <span lang="fr"><span>garder votre JavaScript au même endroit est préférable;</span> <span>s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.</span></span></p> + Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.</p> -<p><span id="result_box" lang="fr"><span>Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée.</span> <span>Un bouton ça va, mais que faire si vous avez 100 boutons ?</span> <span>Vous devez ajouter 100 attributs au fichier;</span> <span>la maintenance se transformerait très vite en un cauchemar.</span> <span>Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :</span></span></p> +<p>Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :</p> <pre class="brush: js">var buttons = document.querySelectorAll('button'); @@ -174,12 +164,12 @@ for (var i = 0; i < buttons.length; i++) { }</pre> <div class="note"> -<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.</span></span></p> +<p><strong>Note :</strong> Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.</p> </div> <h3 id="addEventListener()_et_removeEventListener()">addEventListener() et removeEventListener()</h3> -<p>Le dernier type de mécanisme d'événement est défini dans le <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> , qui fournit aux navigateurs une nouvelle fonction: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. <span id="result_box" lang="fr"><span>Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente.</span> <span>Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:</span></span></p> +<p>Le dernier type de mécanisme d'événement est défini dans le <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> , qui fournit aux navigateurs une nouvelle fonction: <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:</p> <pre class="brush: js">var btn = document.querySelector('button'); @@ -191,65 +181,65 @@ function bgChange() { btn.addEventListener('click', bgChange);</pre> <div class="note"> -<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">le voir s'exécuter</a>).</p> +<p><strong>Note :</strong> Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">le voir s'exécuter</a>).</p> </div> -<p><span id="result_box" lang="fr"><span>Dans la fonction</span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span> , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse.</span> <span>Notez qu'il est parfaitement approprié de placer tout le code dans la fonction </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span>, dans une fonction anonyme, comme ceci:</span></span></p> +<p>Dans la fonction <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, dans une fonction anonyme, comme ceci:</p> <pre class="brush: js">btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; });</pre> -<p><span id="result_box" lang="fr"><span>Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment.</span> <span>Pour commencer, il existe une fonction réciproque, </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code><span lang="fr"><span>, qui supprime un écouteur ajouté précédemment.</span> <span>Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:</span></span></p> +<p>Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, <code><a href="/fr/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:</p> <pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> -<p><span id="result_box" lang="fr"><span>Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés.</span> <span>De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.</span><br> +<p>Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.<br> <br> - <span>D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur.</span> <span>Les deux gestionnaires suivants ne seraient pas appliqués:</span></span></p> + D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:</p> <pre class="brush: js">myElement.onclick = functionA; myElement.onclick = functionB;</pre> -<p><span id="result_box" lang="fr"><span>Comme la deuxième ligne remplacerait la valeur de </span></span><code>onclick</code><span lang="fr"><span> définie par le premier.</span> <span>Cependant, ceci fonctionnerait:</span></span></p> +<p>Comme la deuxième ligne remplacerait la valeur de <code>onclick</code> définie par le premier. Cependant, ceci fonctionnerait:</p> <pre class="brush: js">myElement.addEventListener('click', functionA); myElement.addEventListener('click', functionB);</pre> -<p><span id="result_box" lang="fr"><span>Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.</span><br> +<p>Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.<br> <br> - <span>En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement.</span> Celles<span>-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de </span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> et <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p> + En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> et <code><a href="/fr/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p> <h3 id="Quel_mécanisme_devrais-je_utiliser">Quel mécanisme devrais-je utiliser ?</h3> -<p><span id="result_box" lang="fr"><span>Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.</span><br> +<p>Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.<br> <br> - <span>Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:</span></span><br> + Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:<br> </p> <ul> - <li> <span>Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8).</span> <span>Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.</span></li> - <li><span lang="fr"> <span> Les événements</span></span> du <span lang="fr"><span>DOM Niveau 2 </span></span>(<code>addEventListener()</code>, etc.) <span id="result_box" lang="fr"><span>sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9).</span> <span>Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.</span></span></li> + <li> Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.</li> + <li> Les événements du DOM Niveau 2 (<code>addEventListener()</code>, etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.</li> </ul> -<p><span id="result_box" lang="fr"><span>Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant </span></span><code>removeEventListener()</code><span lang="fr"><span>, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire.</span> <span>Par exemple, vous pouvez appeler </span></span><code>addEventListener('click', function() { ... })</code><span lang="fr"><span> sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument.</span> <span>Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:</span></span></p> +<p>Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant <code>removeEventListener()</code>, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler <code>addEventListener('click', function() { ... })</code> sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:</p> <pre class="brush: js">element.onclick = function1; element.onclick = function2; etc.</pre> <div class="note"> -<p><span id="result_box" lang="fr"><span><strong>Note:</strong> Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements </span></span><span lang="fr"><span>différents des nouveaux navigateurs.</span> <span>Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple </span></span><code>jQuery</code><span lang="fr"><span>) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs.</span> <span>Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.</span></span></p> +<p><strong>Note:</strong> Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple <code>jQuery</code>) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.</p> </div> <h2 id="D'autres_concepts_liés_aux_événements">D'autres concepts liés aux événements</h2> -<p><span id="result_box" lang="fr"><span>Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements.</span> <span>Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.</span></span></p> +<p>Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.</p> <h3 id="L'objet_événement">L'objet événement</h3> -<p><span id="result_box" lang="fr"><span>Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que </span></span> <code>event</code>, <code>evt</code>, <span lang="fr"><span>ou simplement </span></span><code>e</code><span lang="fr"><span> .</span> <span>C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires.</span> <span>Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:</span></span></p> +<p>Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que <code>event</code>, <code>evt</code>, ou simplement <code>e</code> . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:</p> <pre class="brush: js">function bgChange(e) { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; @@ -260,16 +250,16 @@ etc.</pre> btn.addEventListener('click', bgChange);</pre> <div class="note"> -<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">le voir s'exécuter</a>).</p> +<p><strong>Note :</strong> Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">le voir s'exécuter</a>).</p> </div> -<p><span id="result_box" lang="fr"><span>Ici, vous pouvez voir que nous incluons un objet événement, <strong>e</strong>, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur </span></span><code>e.target</code><span lang="fr"><span> - qui est le bouton lui-même.</span> <span>La propriété </span></span><code>target</code><span lang="fr"><span> de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire.</span> <span>Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.</span></span></p> +<p>Ici, vous pouvez voir que nous incluons un objet événement, <strong>e</strong>, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur <code>e.target</code> - qui est le bouton lui-même. La propriété <code>target</code> de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.</p> <div class="note"> -<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements.</span> </span><code>e</code>/<code>evt</code>/<code>event</code><span lang="fr"><span> sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir.</span> <span>C'est toujours bon de s'en tenir à une norme.</span></span></p> +<p><strong>Note :</strong> Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. <code>e</code>/<code>evt</code>/<code>event</code> sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.</p> </div> -<p><code>e.target</code><span id="result_box" lang="fr"><span>est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux.</span> <span>Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus.</span> <span>Il est utile de toujours pouvoir affecter une action à </span></span> <code>e.target</code>, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> pour le code source ; et ici pour le voir <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">s'exécuter</a>), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire <code>onclick</code> <span id="result_box" lang="fr"><span>à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:</span></span></p> +<p><code>e.target</code>est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à <code>e.target</code>, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> pour le code source ; et ici pour le voir <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">s'exécuter</a>), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire <code>onclick</code> à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:</p> <pre class="brush: js">var divs = document.querySelectorAll('div'); @@ -279,12 +269,11 @@ for (var i = 0; i < divs.length; i++) { } }</pre> -<p><span id="result_box" lang="fr"><span>Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):</span></span></p> +<h4>Résultat</h4> -<div class="hidden"> -<h6 id="Hidden_example">Hidden example</h6> +<p>Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):</p> -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -324,19 +313,18 @@ for (var i = 0; i < divs.length; i++) { </script> </body> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> -<p><span id="result_box" lang="fr"><span>La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement </span></span>(voir la liste complète sur {{domxref("Event")}} ). <span id="result_box" lang="fr"><span>Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner.</span></span> Le <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, par exemple, a un événement <code>dataavailable</code> , <span id="result_box" lang="fr"><span>qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire).</span></span> <span id="result_box" lang="fr"><span>L'objet événement du gestionnaire </span></span><a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a><span lang="fr"><span> correspondant dispose d'une propriété </span></span><code>data</code><span lang="fr"><span> contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.</span></span></p> +<p>La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le <a href="/fr/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, par exemple, a un événement <code>dataavailable</code> , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire <a href="/fr/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> correspondant dispose d'une propriété <code>data</code> contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.</p> <h3 id="Éviter_le_comportement_par_défaut">Éviter le comportement par défaut</h3> -<p><span id="result_box" lang="fr"><span>Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut.</span> <span>L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé.</span> <span>Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou</span> <span>la même page, si une autre n'est pas spécifiée.)</span>.<br> +<p>Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).<br> <br> - <span>Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs.</span> <span>Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation.</span> <span>Regardons un exemple simple.</span><br> + Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.<br> <br> - <span>Tout d'abord, un simple </span></span><span lang="fr"><span>formulaire HTML qui vous oblige à entrer votre nom et votre prénom:</span></span></p> + Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:</p> <pre class="brush: html"><form> <div> @@ -353,14 +341,12 @@ for (var i = 0; i < divs.length; i++) { </form> <p></p></pre> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; } </pre> -</div> -<p><span id="result_box" lang="fr"><span>Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement </span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a><span lang="fr"><span> (l'</span></span>événement<span lang="fr"><span> submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides.</span> <span>Si c'est le cas, nous appelons la fonction </span></span> <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code><span lang="fr"><span> sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :</span></span></p> +<p>Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :</p> <pre class="brush: js">var form = document.querySelector('form'); var fname = document.getElementById('fname'); @@ -375,22 +361,19 @@ form.onsubmit = function(e) { } }</pre> -<p><span id="result_box" lang="fr"><span>Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable.</span> <span>Le résultat est le suivant :</span></span></p> +<p>Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :</p> -<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> <div class="note"> -<p><strong>Note</strong>: pour le code source, voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (et le voir s'exécuter <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ici</a>.)</p> +<p><strong>Note :</strong> pour le code source, voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (et le voir s'exécuter <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ici</a>.)</p> </div> <h3 id="Le_bouillonnement_et_la_capture">Le bouillonnement et la capture</h3> -<p><span id="result_box" lang="fr"><span>Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas.</span> <span>Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément.</span> <span>Regardons un exemple pour faciliter cela - ouvrez</span></span> l'exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> dans un nouvel onglet (et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source </a>dans un autre). C'est également disponible en live ci-dessous.</p> +<p>Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> dans un nouvel onglet (et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source </a>dans un autre). C'est également disponible en live ci-dessous.</p> -<div class="hidden"> -<h6 id="Hidden_video_example">Hidden video example</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -461,11 +444,10 @@ form.onsubmit = function(e) { </script> </body> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> -<p><span id="result_box" lang="fr"><span>Ceci est un exemple assez simple qui montre et cache</span></span> une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:</p> +<p>Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:</p> <pre class="brush: html"><button>Display video</button> @@ -477,13 +459,13 @@ form.onsubmit = function(e) { </video> </div></pre> -<p>Quand le {{htmlelement("button")}} <span id="result_box" lang="fr"><span>est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise</span></span> <code><div></code> de <code>hidden</code> à <code>showing</code> <span id="result_box" lang="fr"><span>( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement </span></span><span lang="fr"><span>la boîte hors de l'écran et sur l'écran.) :</span></span></p> +<p>Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <code><div></code> de <code>hidden</code> à <code>showing</code> ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :</p> <pre class="brush: js">btn.onclick = function() { videoBox.setAttribute('class', 'showing'); }</pre> -<p><span id="result_box" lang="fr"><span>Nous ajoutons ensuite quelques gestionnaires d'événements </span></span> <code>onclick</code> <span lang="fr"><span>supplémentaires - le premier à </span></span><code><div></code><span lang="fr"><span> et le second à </span></span><code><video></code><span lang="fr"><span>.</span> <span>L'idée est que lorsque l'on clique sur la zone du </span></span><code><div></code><span lang="fr"><span> en dehors de la vidéo, la boîte doit être masquée à nouveau;</span> <span>Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. </span></span></p> +<p>Nous ajoutons ensuite quelques gestionnaires d'événements <code>onclick</code> supplémentaires - le premier à <code><div></code> et le second à <code><video></code>. L'idée est que lorsque l'on clique sur la zone du <code><div></code> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. </p> <pre>videoBox.onclick = function() { videoBox.setAttribute('class', 'hidden'); @@ -493,29 +475,29 @@ video.onclick = function() { video.play(); };</pre> -<p><span id="result_box" lang="fr"><span>Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que </span></span><code><div></code><span lang="fr"><span> est également caché en même temps.</span> <span>C'est parce que la vidéo est dans le </span></span><code><div></code><span lang="fr"><span> - elle en fait partie - alors que cliquer sur la vidéo lance les <em>deux</em> gestionnaires d'événements ci-dessus.</span></span></p> +<p>Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <code><div></code> est également caché en même temps. C'est parce que la vidéo est dans le <code><div></code> - elle en fait partie - alors que cliquer sur la vidéo lance les <em>deux</em> gestionnaires d'événements ci-dessus.</p> <h4 id="Explication_du_bouillonnement_et_de_la_capture">Explication du bouillonnement et de la capture</h4> -<p>Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), <span id="result_box" lang="fr"><span>les navigateurs modernes utilisent deux phases différentes: la phase de <strong>capture</strong> et la phase de <strong>bouillonnement</strong></span></span><span lang="fr"><span>.</span><br> +<p>Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de <strong>capture</strong> et la phase de <strong>bouillonnement</strong>.<br> <br> - <span>Dans la phase de capture:</span></span></p> + Dans la phase de capture:</p> <ul> - <li><span lang="fr"><span>Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément </span></span>({{htmlelement("html")}}) dispose d'un gestionnaire d'événement <code>onclick</code> enregistré pendant la phase de capture et le lance si c'est le cas.</li> - <li><span id="result_box" lang="fr"><span>Ensuite, il passe à l'élément suivant à l'intérieur de </span></span><code><html></code><span lang="fr"><span> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.</span></span></li> + <li>Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement <code>onclick</code> enregistré pendant la phase de capture et le lance si c'est le cas.</li> + <li>Ensuite, il passe à l'élément suivant à l'intérieur de <code><html></code> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.</li> </ul> -<p><span id="result_box" lang="fr"><span>Dans la phase de bouillonnement, l'opposé exact se produit:</span><br> +<p>Dans la phase de bouillonnement, l'opposé exact se produit:<br> <br> - <span>Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement </span></span><code>onclick</code><span lang="fr"><span> enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.</span><br> - <span>Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément </span></span><code><html></code><span lang="fr"><span>.</span></span></p> + Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement <code>onclick</code> enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.<br> + Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <code><html></code>.</p> -<p><a href="https://mdn.mozillademos.org/files/16064/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> +<p><a href="https://mdn.mozillademos.org/files/16064/bubbling-capturing.png"><img alt="" src="bubbling-capturing.png"></a></p> <p>(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)</p> -<p><span id="result_box" lang="fr"><span>Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement.</span> <span>Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément </span></span><code><video></code><span lang="fr"><span> vers l'élément </span></span><code><html></code><span lang="fr"><span>.</span> <span>Comme ceci :</span></span></p> +<p>Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <code><video></code> vers l'élément <code><html></code>. Comme ceci :</p> <ul> <li>Il trouve d'abord le gestionnaire <code>video.onclick...</code> et le lance, de manière à ce que la vidéo soit jouée en premier.</li> @@ -524,47 +506,47 @@ video.onclick = function() { <h4 id="Régler_le_problème_avec_stopPropagation()">Régler le problème avec stopPropagation()</h4> -<p><span id="result_box" lang="fr"><span>C'est un comportement ennuyeux, mais il y a un moyen de l'éviter !</span> <span>L'objet événement standard dispose d'une fonction appelée</span></span> <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, <span id="result_box" lang="fr"><span>qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.</span><br> +<p>C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée <code><a href="/fr/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.<br> <br> - <span>Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:</span></span></p> + Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:</p> <pre class="brush: js">video.onclick = function(e) { e.stopPropagation(); video.play(); };</pre> -<p>Vous pouvez faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source show-video-box.html </a> <span id="result_box" lang="fr"><span>et le modifier vous-même ou regarder le résultat ici : </span></span> <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (ou voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">code source</a>).</p> +<p>Vous pouvez faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source show-video-box.html </a> et le modifier vous-même ou regarder le résultat ici : <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (ou voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">code source</a>).</p> <div class="note"> -<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Pourquoi s'embêter à capturer et bouillonner ?</span> <span>Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements.</span> <span>Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.</span></span></p> +<p><strong>Note :</strong> Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.</p> </div> <div class="note"> -<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps.</span> <span>Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec</span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, et en positionnant la troisième propriété, qui est optionnelle, sur<code>true</code>.</p> +<p><strong>Note :</strong> Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, et en positionnant la troisième propriété, qui est optionnelle, sur<code>true</code>.</p> </div> <h4 id="Délégation_d'événement">Délégation d'événement</h4> -<p><span id="result_box" lang="fr"><span>Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les </span></span>événement<span lang="fr"><span>, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.</span><br> +<p>Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.<br> <br> - <span>Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement </span></span><code>click</code><span lang="fr"><span> sur la balise parente </span></span><code><ul></code><span lang="fr"><span>, et il apparaîtra sur les éléments de la liste.</span></span></p> + Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement <code>click</code> sur la balise parente <code><ul></code>, et il apparaîtra sur les éléments de la liste.</p> -<p><span id="result_box" lang="fr"><span>Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir</span></span> <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p> +<p>Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p> <h2 id="Conclusion">Conclusion</h2> -<p><span id="result_box" lang="fr"><span>Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage.</span> <span>Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.</span><br> +<p>Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.<br> <br> - <span>En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur).</span> <span>Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.</span></span></p> + En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.</p> -<p><span id="result_box" lang="fr"><span>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou</span></span> <a href="/en-US/Learn#Contact_us">contactez-nous </a>pour demander de l'aide.</p> +<p>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou <a href="/fr/Learn#Contact_us">contactez-nous </a>pour demander de l'aide.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.</li> <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.</li> - <li><a href="/en-US/docs/Web/Events">Event reference</a></li> + <li><a href="/fr/docs/Web/Events">Event reference</a></li> </ul> <p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> @@ -574,13 +556,13 @@ video.onclick = function() { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code - les conditions</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">les fonctions - des blocs de code réutilisables</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construisez votre propre fonction</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">les valeurs de retour des fonction</a><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">s</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événement</a><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">s</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code - les conditions</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">les fonctions - des blocs de code réutilisables</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construisez votre propre fonction</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">les valeurs de retour des fonction</a><a href="/fr/docs/Learn/JavaScript/Building_blocks/Return_values">s</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événement</a><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">s</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> </ul> <p> </p> diff --git a/files/fr/learn/javascript/building_blocks/functions/index.html b/files/fr/learn/javascript/building_blocks/functions/index.html index f7f7cea4e1..eb804d4dcf 100644 --- a/files/fr/learn/javascript/building_blocks/functions/index.html +++ b/files/fr/learn/javascript/building_blocks/functions/index.html @@ -8,13 +8,13 @@ original_slug: Apprendre/JavaScript/Building_blocks/Fonctions <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">Les <strong>fonctions</strong> sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.</p> +<p>Les <strong>fonctions</strong> sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequis:</th> - <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> + <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> </tr> <tr> <th scope="row">Objectif:</th> @@ -27,7 +27,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Fonctions <p>En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.</p> -<p>Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — <code>()</code> — et que vous n'utilisez <strong>pas</strong> une structure usuelle et intégrée du langage telle que les boucles <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a>, <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while </a>ou<a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while"> do...while </a>, ou une déclaration <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else </a>, vous utilisez une fonction.</p> +<p>Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — <code>()</code> — et que vous n'utilisez <strong>pas</strong> une structure usuelle et intégrée du langage telle que les boucles <a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a>, <a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while </a>ou<a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while"> do...while </a>, ou une déclaration <a href="/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else </a>, vous utilisez une fonction.</p> <h2 id="Les_fonctions_intégrées_du_navigateur">Les fonctions intégrées du navigateur</h2> @@ -59,12 +59,12 @@ console.log(madeAString); <p>... nous avons utilisé une fonction !</p> <div class="note"> -<p><strong>Note </strong>: N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.</p> +<p><strong>Note :</strong> N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.</p> </div> <p>Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand<strong> invoquez</strong> (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.</p> -<p>Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">section antérieure de notre cours</a> pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.</p> +<p>Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette <a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">section antérieure de notre cours</a> pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.</p> <h2 id="Fonctions_versus_méthodes">Fonctions versus méthodes</h2> @@ -76,7 +76,7 @@ console.log(madeAString); <h2 id="Fonctions_personnalisées">Fonctions personnalisées</h2> -<p>Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html </a>tiré de l'article <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">les boucles dans le code </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">code source </a>complet), nous avons inclus une fonction personnalisée <code>draw()</code>qui ressemblait à ça :</p> +<p>Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html </a>tiré de l'article <a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">les boucles dans le code </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">code source </a>complet), nous avons inclus une fonction personnalisée <code>draw()</code>qui ressemblait à ça :</p> <pre class="brush: js">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); @@ -98,7 +98,7 @@ console.log(madeAString); return Math.floor(Math.random()*number); }</pre> -<p>Nous avions besoin de cette fonction car la fonction intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.</p> +<p>Nous avions besoin de cette fonction car la fonction intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.</p> <h2 id="Invoquer_des_fonctions">Invoquer des fonctions</h2> @@ -175,23 +175,23 @@ anotherGreeting();</pre> <p>Certaines fonctions nécessitent que l'on définisse des <strong>paramètres</strong> lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.</p> <div class="note"> -<p><strong>Note </strong>: Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.</p> +<p><strong>Note :</strong> Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.</p> </div> -<p>Par exemple, la fonction intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : </p> +<p>Par exemple, la fonction intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : </p> <pre class="brush: js">var myNumber = Math.random();</pre> -<p>La fonction de chaîne intégrée du navigateur <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :</p> +<p>La fonction de chaîne intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :</p> <pre class="brush: js">var myText = 'I am a string'; var newString = myText.replace('string', 'sausage');</pre> <div class="note"> -<p><strong>Note </strong>: Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.</p> +<p><strong>Note :</strong> Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.</p> </div> -<p>Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> a des paramètres optionnels :</p> +<p>Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> a des paramètres optionnels :</p> <pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.join(' '); @@ -199,7 +199,7 @@ var madeAString = myArray.join(' '); var madeAString = myArray.join(); // renvoie 'I,love,chocolate,frogs'</pre> -<p><span id="result_box" lang="fr"><span>Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.</span></span></p> +<p>Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.</p> <h2 id="La_portée_des_fonctions_et_les_conflits.">La portée des fonctions et les conflits.</h2> @@ -207,9 +207,9 @@ var madeAString = myArray.join(); <p>Le plus haut niveau en dehors de toutes vos fonctions est appelé la <strong>portée globale</strong>. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.</p> -<p>Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes <span id="result_box" lang="fr"><span>parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits</span></span>. Cela peut être fait de manière malveillante ou simplement par accident.</p> +<p>Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.</p> -<p><span id="result_box" lang="fr"><span>Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :</span></span></p> +<p>Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :</p> <pre class="brush: html"><!-- Excerpt from my HTML --> <script src="first.js"></script> @@ -230,17 +230,17 @@ function greeting() { alert('Our company is called ' + name + '.'); }</pre> -<p><span id="result_box" lang="fr"><span>Les deux fonctions que vous voulez appeler s'appellent</span></span> <code>greeting()</code>, <span id="result_box" lang="fr"><span>mais vous ne pouvez accéder qu'à la fonction </span></span><code>greeting()</code> du second fichier <code>second.js</code> — <span id="result_box" lang="fr"><span>car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du</span></span> premier fichier <code>first.js</code>.</p> +<p>Les deux fonctions que vous voulez appeler s'appellent <code>greeting()</code>, mais vous ne pouvez accéder qu'à la fonction <code>greeting()</code> du second fichier <code>second.js</code> — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier <code>first.js</code>.</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez voir cet exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">s'exécuter sur GitHub</a> (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">code source</a>).</p> +<p><strong>Note :</strong> Vous pouvez voir cet exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">s'exécuter sur GitHub</a> (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">code source</a>).</p> </div> <p>En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.</p> <p>C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="MDN-mozilla-zoo.png"></p> <p>Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.</p> @@ -258,20 +258,20 @@ function greeting() { <pre class="brush: js">output(y); output(z);</pre> - <p>Toutes les deux devraient vous renvoyer un message d'erreur du type : "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Pourquoi ? À cause de la portée de la fonction — <code>y</code> and <code>z</code> sont enfermées dans les fonctions <code>a()</code> et <code>b()</code>, donc <code>output()</code> ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.</p> + <p>Toutes les deux devraient vous renvoyer un message d'erreur du type : "<a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Pourquoi ? À cause de la portée de la fonction — <code>y</code> and <code>z</code> sont enfermées dans les fonctions <code>a()</code> et <code>b()</code>, donc <code>output()</code> ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.</p> </li> <li> <p>Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer <code>a()</code> et <code>b()</code> pour qu'elles aient la forme suivante :</p> - <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> y <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> - <span class="function token">output</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + <pre class="brush: js">function a() { + var y = 2; + output(y); +} -<span class="keyword token">function</span> <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> z <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span> - <span class="function token">output</span><span class="punctuation token">(</span>z<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +function b() { + var z = 3; + output(z); +}</pre> Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions <code>a()</code> et <code>b()</code> depuis la console JavaScript : <pre class="brush: js">a(); @@ -306,25 +306,20 @@ function b() { <li>Sauvegardez et rechargez à nouveau dans la console JavaScript : <pre class="brush: js">a(); b();</pre> - Cette fois l'appel de <code>a()</code> et <code>b()</code> renverra l'erreur "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" — parce que l'appel de la fonction <code>output()</code> et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.</li> + Cette fois l'appel de <code>a()</code> et <code>b()</code> renverra l'erreur "<a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" — parce que l'appel de la fonction <code>output()</code> et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.</li> </ol> <div class="note"> -<p><strong>Note </strong>: Ces règles de portée ne s'appliquent pas aux boucles (ex. <code>for() { ... }</code>) ni aux instructions conditionnelles (ex. <code>if() { ... }</code>) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.</p> +<p><strong>Note :</strong> Ces règles de portée ne s'appliquent pas aux boucles (ex. <code>for() { ... }</code>) ni aux instructions conditionnelles (ex. <code>if() { ... }</code>) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.</p> </div> <div class="note"> -<p><strong>Note </strong>: Le message d'erreur <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.</p> +<p><strong>Note :</strong> Le message d'erreur <a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.</p> </div> -<ul> -</ul> - <h3 id="Des_fonctions_à_lintérieur_de_fonctions">Des fonctions à l'intérieur de fonctions</h3> -<div id="gt-input-tool"> -<div class="cc-ctr gt-src-cc-normal" id="gt-src-cc-ctr"><span id="result_box" lang="fr"><span>Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction.</span> <span>Ceci est souvent utilisé comme un moyen de garder le code bien organisé </span></span>—<span lang="fr"><span> si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :</span></span></div> -</div> +<p>Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :</p> <pre class="brush: js">function myBigFunction() { var myValue; @@ -347,7 +342,7 @@ function subFunction3() { } </pre> -<p><span id="result_box" lang="fr"><span>Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte.</span> <span>L'exemple ci-dessus entraînerait une erreur</span></span> <code>ReferenceError: myValue is not defined</code>, car bien que la valeur <code>myValue</code> <span id="result_box" lang="fr"><span>est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées.</span> <span>Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :</span></span></p> +<p>Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur <code>ReferenceError: myValue is not defined</code>, car bien que la valeur <code>myValue</code> est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :</p> <pre class="brush: js">function myBigFunction() { var myValue = 1; @@ -371,13 +366,13 @@ function subFunction3(value) { <h2 id="Conclusion">Conclusion</h2> -<p><span id="result_box" lang="fr"><span>Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.</span></span></p> +<p>Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> — aborde<span class="short_text" id="result_box" lang="fr"><span> certaines fonctionnalités avancées non incluses ici.</span></span></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeur par défaut des arguments</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions fléchées</a> — références avancées</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> — aborde certaines fonctionnalités avancées non incluses ici.</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeur par défaut des arguments</a>, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions fléchées</a> — références avancées</li> </ul> <ul> @@ -388,11 +383,11 @@ function subFunction3(value) { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux évènements</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux évènements</a></li> + <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> </ul> diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.html b/files/fr/learn/javascript/building_blocks/image_gallery/index.html index 8f7aebd796..bc09ea1194 100644 --- a/files/fr/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.html @@ -21,7 +21,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery <p>Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript, nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en vous aidant à créer un élément assez commun que vous verrez sur de nombreux sites web. Une galerie JavaScript animée.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Conditions préalables:</th> @@ -38,15 +38,15 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery <p>Pour réaliser cette évaluation, vous devez récupérer le fichier<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true"> ZIP</a> et le décompresser quelque par sur votre ordinateur.</p> -<p>Vous pouvez également utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. <font><font>Si l'éditeur en<span> </span></font><font>ligne que<span> </span></font><font>vous utilisez ne dispose pas de<span> </span></font><font>panneaux JavaScript/CSS séparés, n'hésitez pas<span> </span></font><font>à utiliser les éléments</font><font><span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'><script></code><font><font>/</font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: 1rem; color: rgb(51, 51, 51); letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'><style></code><font><font> dans la page HTML.</font></font></p> +<p>Vous pouvez également utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <code><script></code>/<code><style></code> dans la page HTML.</p> <div class="note"> -<p><strong>Note</strong>: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.</p> +<p><strong>Note :</strong> Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> -<p><font>Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript;<span> </span></font><font>vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel.<span> </span></font><font>Le corps HTML ressemble à ceci:</font></p> +<p>Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:</p> <pre class="brush: html"><h1>Image gallery example</h1> @@ -62,24 +62,22 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery <p>L'exemple ressemble à ceci:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="gallery.png"></p> -<ul> -</ul> -<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Les parties les plus intéressantes du fichier CSS de l'exemple:</span></p> +<p>Les parties les plus intéressantes du fichier CSS de l'exemple:</p> <ul> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnez les trois éléments en absolu à l’intérieur du<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>full-img <div></code><font><font>: le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><img></code><font><font> dans lequel l’image est affichée grandeur nature, un <span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><div></code><font><font> vide</font></font> <font><font>dimensionné à la même taille que le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><img></code><font><font> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'><button></code><font><font>qui est utilisé pour contrôler l'effet d'assombrissement.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Réglez la largeur des images à l'intérieur de<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>thumb-bar <div></code><font><font>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.</font></font></li> + <li>Positionnez les trois éléments en absolu à l’intérieur du <code>full-img <div></code>: le <code><img></code> dans lequel l’image est affichée grandeur nature, un <code><div></code> vide dimensionné à la même taille que le <code><img></code> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <code><button></code>qui est utilisé pour contrôler l'effet d'assombrissement.</li> + <li>Réglez la largeur des images à l'intérieur de <code>thumb-bar <div></code>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.</li> </ul> -<p><span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;'>Votre JavaScript doit:</span></p> +<p>Votre JavaScript doit:</p> <ul> <li>Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <code><img></code> à l'intérieur de <code>thumb-bar <div></code> qui va incorporer cette image dans la page.</li> <li>Associer un gestionnaire d'événement <code>onclick</code> à chaque <code><img></code> à l'intérieur de <code>thumb-bar <div></code> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément <code>displayed-img <img></code>.</li> - <li>Associer un gestionnaire d'événement <code>onclick</code> au <code><button></code> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image <font><font>grandeur nature</font></font>. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.</li> + <li>Associer un gestionnaire d'événement <code>onclick</code> au <code><button></code> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.</li> </ul> <p>Pour vous donner une idée, regardez l'<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">exemple</a> (Ne regardez pas le code source!).</p> @@ -104,7 +102,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery <p>À chaque itération, vous devez ajouter un gestionnaire <code>onclick</code> au <code>newImage</code> courant. Il doit:</p> <ol> - <li>Trouver la valeur de l'attribut <code>src</code> de l'image courante. Cela peut être fait avec la fonction <code><a href="/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> sur <code><img></code>, en lui passant le paramètre <code>"src"</code> à chaque fois. Mais comment avoir l'image? Utiliser <code>newImage</code> ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de <code>src</code> sera toujours celle du dernier <code><img></code>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <code><img></code> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?</li> + <li>Trouver la valeur de l'attribut <code>src</code> de l'image courante. Cela peut être fait avec la fonction <code><a href="/fr/docs/Web/API/Element/getAttribute">getAttribute()</a></code> sur <code><img></code>, en lui passant le paramètre <code>"src"</code> à chaque fois. Mais comment avoir l'image? Utiliser <code>newImage</code> ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de <code>src</code> sera toujours celle du dernier <code><img></code>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <code><img></code> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?</li> <li>Exécuter une fonction, en lui passant en paramètre la fameuse valeur de <code>src</code>. Vous pouvez nommer la fonction à votre guise.</li> <li>Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut <code>src</code> de <code>displayed-img <img></code> à la valeur du <code>src</code> passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<code><img></code> concerné dans une variable nommée <code>displayedImg</code>. Notez que nous voulons une fonction nommée.</li> </ol> @@ -115,7 +113,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery <ol> <li>Vérifie la classe appliquée à <code><button></code> — à nouveau, vous pouvez utiliser <code>getAttribute()</code>.</li> - <li>Si le nom de classe est <code>"dark"</code>, changer la classe du <code><button></code> pour <code>"light"</code> (avec <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <code><div></code> par <code>"rgba(0,0,0,0.5)"</code>.</li> + <li>Si le nom de classe est <code>"dark"</code>, changer la classe du <code><button></code> pour <code>"light"</code> (avec <code><a href="/fr/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <code><div></code> par <code>"rgba(0,0,0,0.5)"</code>.</li> <li>Si le nom de classe n'est pas <code>"dark"</code>, changer la classe du <code><button></code> pour <code>"dark"</code>, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <code><div></code> par <code>"rgba(0,0,0,0)"</code>.</li> </ol> @@ -154,11 +152,11 @@ overlay.style.backgroundColor = xxx;</pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> </ul> diff --git a/files/fr/learn/javascript/building_blocks/index.html b/files/fr/learn/javascript/building_blocks/index.html index 3fab2ec928..f93cdfbd85 100644 --- a/files/fr/learn/javascript/building_blocks/index.html +++ b/files/fr/learn/javascript/building_blocks/index.html @@ -17,30 +17,30 @@ original_slug: Apprendre/JavaScript/Building_blocks <div>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.</p> +<p>Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.</p> <h2 id="Prérequis">Prérequis</h2> -<p>Avant de commencer ce module, vous devriez connaître les bases du <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">HTML </a>et du <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">CSS </a>et avoir suivi le module précédent, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">JavaScript Premiers Pas.</a></p> +<p>Avant de commencer ce module, vous devriez connaître les bases du <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">HTML </a>et du <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">CSS </a>et avoir suivi le module précédent, <a href="/fr/docs/Learn/JavaScript/First_steps">JavaScript Premiers Pas.</a></p> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> .</p> +<p><strong>Note :</strong> Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> .</p> </div> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/conditionals">Prendre des décisions dans votre code — les conditions</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/conditionals">Prendre des décisions dans votre code — les conditions</a></dt> <dd>Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.</dd> - <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles</a></dt> + <dt><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles</a></dt> <dd>Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Functions">Les fonctions — réutiliser des blocs de code</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">Les fonctions — réutiliser des blocs de code</a></dt> <dd>Un autre concept essentiel en programmation est celui de <strong>fonctions. </strong>Les<strong> fonctions</strong> permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.</dd> - <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Créez votre propre fonction</a></dt> + <dt><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Créez votre propre fonction</a></dt> <dd>L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Return_values">Les valeurs de retour des fonctions</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Return_values">Les valeurs de retour des fonctions</a></dt> <dd>Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction aux événements</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction aux événements</a></dt> <dd>Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.</dd> </dl> @@ -49,7 +49,7 @@ original_slug: Apprendre/JavaScript/Building_blocks <p>L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galerie de photos</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galerie de photos</a></dt> <dd>Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.</dd> </dl> diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.html b/files/fr/learn/javascript/building_blocks/looping_code/index.html index 22a609df6e..fcd352b560 100644 --- a/files/fr/learn/javascript/building_blocks/looping_code/index.html +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.html @@ -22,13 +22,13 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.</p> +<p>Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> + <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td> </tr> <tr> <th scope="row">Objectif :</th> @@ -44,7 +44,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code <p>Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :</p> <p><br> - <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p> + <img alt="" src="loop_js-02-farm.png"></p> <p>Une boucle a normalement un ou plusieurs des composants suivants :</p> @@ -76,10 +76,9 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code <p>Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html" title="L'élément <canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations."><code><canvas></code></a> (appuyez sur le bouton <em>Update</em> pour lancer le programme à nouveau et voir différentes dispositions aléatoires).</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> +<h4>Exemple</h4> -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -143,9 +142,10 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code </body> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Exemple', '100%', 400) }}</p> + +<h4>Principe de boucle</h4> <p>Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :</p> @@ -169,7 +169,7 @@ ctx.fill();</pre> <h2 id="La_boucle_standard">La boucle standard</h2> -<p>Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a>. Elle a la syntaxe suivante :</p> +<p>Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a>. Elle a la syntaxe suivante :</p> <pre>for (initialisation; condition de sortie; expression finale) { // code à exécuter @@ -201,12 +201,11 @@ for (let i = 0; i < chats.length; i++) { paragraphe.textContent = info;</pre> -<p>Cela nous donne la sortie suivante :</p> +<h3>Sortie</h3> -<div class="hidden"> -<h6 id="Hidden_code_2">Hidden code 2</h6> +<p>Cela nous donne la sortie suivante :</p> -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -231,12 +230,11 @@ paragraphe.textContent = info;</pre> </body> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}</p> +<p>{{ EmbedLiveSample('Sortie', '100%', 60) }}</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver aussi cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">exemple de code sur GitHub</a> (et<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html"> le voir tourner en live</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver aussi cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">exemple de code sur GitHub</a> (et<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html"> le voir tourner en live</a>).</p> </div> <p>Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :</p> @@ -255,11 +253,11 @@ paragraphe.textContent = info;</pre> </ol> <div class="note"> -<p><strong>Note</strong>: Nous avons fait sortir la condition <code>i < cats.length</code>, et pas <code>i <= cats.length</code>, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré <code>i</code> à <code>0</code>, et allons allers jusqu'à <code>i = 4</code> (l'index du dernier item de la table/tableau). <code>cats.length</code> retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à <code>i = 5</code>, cela retournerai <code>undefined</code> pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que <code>cats.length</code> (<code>i <</code>), ce n'est pas la même chose que <code>cats.length</code> (<code>i <=</code>).</p> +<p><strong>Note :</strong> Nous avons fait sortir la condition <code>i < cats.length</code>, et pas <code>i <= cats.length</code>, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré <code>i</code> à <code>0</code>, et allons allers jusqu'à <code>i = 4</code> (l'index du dernier item de la table/tableau). <code>cats.length</code> retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à <code>i = 5</code>, cela retournerai <code>undefined</code> pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que <code>cats.length</code> (<code>i <</code>), ce n'est pas la même chose que <code>cats.length</code> (<code>i <=</code>).</p> </div> <div class="note"> -<p><strong>Note</strong>: Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.</p> +<p><strong>Note :</strong> Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.</p> </div> <p>Un petit problème est que nous avons laissé la phrase de sortie mal formée :</p> @@ -279,16 +277,16 @@ paragraphe.textContent = info;</pre> }</pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">GitHub</a> (et aussi le <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">voir en ligne</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">GitHub</a> (et aussi le <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">voir en ligne</a>).</p> </div> <div class="warning"> -<p><strong>Important</strong>: Avec for — comme avec toutes les boucles — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p> +<p><strong>Attention :</strong> Avec for — comme avec toutes les boucles — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p> </div> <h2 id="Quitter_une_boucle_avec_break">Quitter une boucle avec break</h2> -<p>Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a>. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch">instructions switch </a>: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.</p> +<p>Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a>. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les <a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch">instructions switch </a>: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.</p> <p>C'est la même chose avec les boucles – un <code>break</code> quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.</p> @@ -322,10 +320,9 @@ bouton.addEventListener('click', function() { } });</pre> -<div class="hidden"> -<h6 id="Hidden_code_3">Hidden code 3</h6> +<h3>Résultat</h3> -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -363,9 +360,7 @@ bouton.addEventListener('click', function() { </body> </html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Résultat', '100%', 100) }}</p> <ol> <li>Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.</li> @@ -382,12 +377,12 @@ bouton.addEventListener('click', function() { </ol> <div class="note"> -<p><strong>Note </strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">voir en ligne</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">voir en ligne</a>).</p> </div> <h2 id="Passer_des_itérations_avec_continue">Passer des itérations avec continue</h2> -<p>L'instruction <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a> fonctionne d'une manière similaire à <code>break</code>, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).</p> +<p>L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a> fonctionne d'une manière similaire à <code>break</code>, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).</p> <p>Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :</p> @@ -404,10 +399,7 @@ for (let i = 1; i <= num; i++) { <p>Ici la sortie :</p> -<div class="hidden"> -<h6 id="Hidden_code_4">Hidden code 4</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -444,26 +436,25 @@ for (let i = 1; i <= num; i++) { </body> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}</p> <ol> <li>Dans ce cas, l'entrée doit être un nombre (<code>num</code>). La boucle <code>for</code> est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée <code>num</code>, et un itérateur ajoutera 1 au compteur à chaque fois.</li> - <li>À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i), </a><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt">, </a>puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor">Math.floor() </a>fait au nombre auquel il est passé).</li> + <li>À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i), </a><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt">, </a>puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor">Math.floor() </a>fait au nombre auquel il est passé).</li> <li>Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (<code>! ==</code>), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction <code>continue</code> pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.</li> <li>Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction <code>continue</code> ne soit pas exécutée; à la place, nous concaténons la valeur <code>i </code>actuelle plus un espace sur la fin du contenu du paragraphe.</li> </ol> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">voir en ligne</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">voir en ligne</a>).</p> </div> <h2 id="while_et_do_..._while">while et do ... while</h2> <p><code>for</code> n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.</p> -<p>D'abord, regardons la boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a>. La syntaxe de cette boucle ressemble à ceci:</p> +<p>D'abord, regardons la boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a>. La syntaxe de cette boucle ressemble à ceci:</p> <pre>initializer while (exit-condition) { @@ -491,10 +482,10 @@ while (i < cats.length) { }</pre> <div class="note"> -<p><strong>Note</strong>: Cela fonctionne toujours comme prévu regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">Voir en ligne</a> le code complet).</p> +<p><strong>Note :</strong> Cela fonctionne toujours comme prévu regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">Voir en ligne</a> le code complet).</p> </div> -<p>La boucle<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/do...while"> do...while</a> est très similaire, mais dénote une variation par rapport à la structure de la boucle while :</p> +<p>La boucle<a href="/fr/docs/Web/JavaScript/Reference/Instructions/do...while"> do...while</a> est très similaire, mais dénote une variation par rapport à la structure de la boucle while :</p> <pre>initializer do { @@ -522,14 +513,14 @@ do { } while (i < cats.length);</pre> <div class="note"> -<p><strong>Note</strong>: Encore, cela fonctionne toujours comme prévu — regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">Voir en ligne</a> le code complet).</p> +<p><strong>Note :</strong> Encore, cela fonctionne toujours comme prévu — regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">Voir en ligne</a> le code complet).</p> </div> <div class="warning"> -<p><strong>Important</strong>: Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p> +<p><strong>Attention :</strong> Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p> </div> -<h2 id="Apprentissage_actif_Lancer_le_compte_à_rebours_!">Apprentissage actif : Lancer le compte à rebours !</h2> +<h2 id="Apprentissage_actif_Lancer_le_compte_à_rebours">Apprentissage actif : Lancer le compte à rebours</h2> <p>Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :</p> @@ -554,10 +545,7 @@ do { <p>Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p> -<div class="hidden"> -<h6 id="Active_learning">Active learning</h6> - -<pre class="brush: html"><h2>Sortie en direct</h2> +<pre class="brush: html hidden"><h2>Sortie en direct</h2> <div class="output" style="height: 410px;overflow: auto;"> </div> @@ -569,8 +557,8 @@ output.innerHTML = ''; // let i = 10; -// <code>const paragraphe </code>= document.createElement('p'); -// <code>paragraphe</code>.textContent = ; +// const paragraphe = document.createElement('p'); +// paragraphe.textContent = ; // output.appendChild(para); </textarea> @@ -580,7 +568,7 @@ output.innerHTML = ''; </div> </pre> -<pre class="brush: js">const textarea = document.getElementById('code'); +<pre class="brush: js hidden">const textarea = document.getElementById('code'); const reset = document.getElementById('reset'); const solution = document.getElementById('solution'); const code = textarea.value; @@ -590,75 +578,74 @@ function updateCode() { } reset.addEventListener('click', function() { - textarea.value = code;<code class="language-js"> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span></code> + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; updateCode(); }); -solution.addEventListener('click', function() {<code class="language-js"> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span></code> +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } updateCode(); }); -<code class="language-js"> -<span class="keyword token">let</span> jsSolution <span class="operator token">=</span> <span class="string token">'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'</span><span class="punctuation token">;</span> -<span class="keyword token">let</span> solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> -</code> + +let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'; +let solutionEntry = jsSolution; + textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); -<code class="language-js"> -<span class="comment token">// empêcher la pression de la touche de tabulation</span> de cibler -<span class="comment token">// un </span>autre élément <span class="comment token">et insère une tabulation dans le textarea</span> - -textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeydown</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="parameter token">text</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">let</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> - <span class="keyword token">let</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> - - <span class="keyword token">let</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> - caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> - -textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeyup</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// We only want to save the state when the user code is being shown,</span> - <span class="comment token">// not the solution, so that solution is not saved over the user code</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code> + +// empêcher la pression de la touche de tabulation de cibler +// un autre élément et insère une tabulation dans le textarea + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + let scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; + + let front = (textarea.value).substring(0, caretPos); + let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +}; </pre> -</div> -<p>{{ EmbedLiveSample('Active_learning', '100%', 780) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}</p> <h2 id="Apprentissage_actif_remplir_une_liste_d'invités.">Apprentissage actif : remplir une liste d'invités.</h2> @@ -684,29 +671,26 @@ textarea<span class="punctuation token">.</span><span class="function function-v <li><code>admitted.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>admitted.textContent</code>.</li> </ul> -<p>Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères </a>pour obtenir de l'aide.</p> +<p>Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article <a href="/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères </a>pour obtenir de l'aide.</p> <p>Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p> -<div class="hidden"> -<h6 id="Active_learning_2">Active learning 2</h6> - -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">px</span><span class="punctuation token">;</span><span class="property token">overflow</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>admitted<span class="punctuation token">"</span></span><span class="punctuation token">>Admettre </span></span>: <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>refused<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Refuser : <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<pre class="brush: html hidden"><h2>Live output</h2> +<div class="output" style="height: 100px;overflow: auto;"> + <p class="admitted">Admettre : </p> + <p class="refused">Refuser : </p> +</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>Appuyer sur Échap pour décibler le coder<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="token unit">px</span><span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95</span><span class="token unit">%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<h2>Editable code</h2> +<p class="a11y-label">Appuyer sur Échap pour décibler le code</p> +<textarea id="code" class="playable-code" style="height: 400px;width: 95%"> const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; const admitted = document.querySelector('.admitted'); const refused = document.querySelector('.refused'); admitted.textContent = 'Admit: '; refused.textContent = 'Refuse: ' -</code> + // let i = 0; // refused.textContent += ; @@ -719,105 +703,104 @@ refused.textContent = 'Refuse: ' <input id="solution" type="button" value="Show solution"> </div></pre> -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> - <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">h2</span> <span class="punctuation token">{</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span><span class="token unit">px</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="class token">.a11y-label</span></span> <span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span><span class="token unit">rem</span><span class="punctuation token">;</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98</span><span class="token unit">%</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">body</span> <span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">const</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">const</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">let</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="keyword token">let</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">eval</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">let</span> jsSolution <span class="operator token">=</span> <span class="string token">'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'</span><span class="punctuation token">;</span> -<span class="keyword token">let</span> solutionEntry <span class="operator token">=</span> jsSolution<span class="punctuation token">;</span> - -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// stop tab key tabbing out of textarea and</span> -<span class="comment token">// make it write a tab at the caret position instead</span> - -textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeydown</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="parameter token">text</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">let</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> - <span class="keyword token">let</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> - - <span class="keyword token">let</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> - caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> - -textarea<span class="punctuation token">.</span><span class="function function-variable token">onkeyup</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// We only want to save the state when the user code is being shown,</span> - <span class="comment token">// not the solution, so that solution is not saved over the user code</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: css hidden">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js hidden">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + let scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; + + let front = (textarea.value).substring(0, caretPos); + let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> -<p>{{ EmbedLiveSample('Active_learning_2', '100%', 580) }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}</p> <h2 id="Quel_type_de_boucle_utiliser">Quel type de boucle utiliser ?</h2> @@ -850,24 +833,23 @@ do { <p>Nous recommandons <code>for</code>, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.</p> <div class="note"> -<p><strong>Note</strong>: Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itérations</a>.</p> +<p><strong>Note :</strong> Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide <a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itérations</a>.</p> </div> <h2 id="Conclusion">Conclusion</h2> <p>Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !</p> -<p>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à <a href="https://developer.mozilla.org/fr/Apprendre#Nous_contacter">nous contacter </a>pour demander de l'aide.</p> +<p>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à <a href="/fr/Apprendre#Nous_contacter">nous contacter </a>pour demander de l'aide.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itération</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for">L'instruction for</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/do...while">do...while</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a></li> - <li> - <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — quelques bonnes pratiques en matière de boucles</p> + <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itération</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">L'instruction for</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a> et <a href="/fr/docs/Web/JavaScript/Reference/Instructions/do...while">do...while</a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a> et <a href="/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a></li> + <li><p><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — quelques bonnes pratiques en matière de boucles</p> </li> </ul> diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.html b/files/fr/learn/javascript/building_blocks/return_values/index.html index d272b2fc1c..2d2b9f628e 100644 --- a/files/fr/learn/javascript/building_blocks/return_values/index.html +++ b/files/fr/learn/javascript/building_blocks/return_values/index.html @@ -18,14 +18,14 @@ original_slug: Apprendre/JavaScript/Building_blocks/Return_values <div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> -<p class="summary">Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.</p> +<p>Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> <td> - <p>Base en langage informatique, une compréhension basic de HTML et CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocks de code réutilisable</a>.</p> + <p>Base en langage informatique, une compréhension basic de HTML et CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocks de code réutilisable</a>.</p> </td> </tr> <tr> @@ -46,9 +46,9 @@ console.log(newString); // replaces one substring with another, and returns // a new string with the replacement made</pre> -<p>Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> sur la chaîne de caractères <code>myText</code> , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.</p> +<p>Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> sur la chaîne de caractères <code>myText</code> , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.</p> -<p>Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valeur retournée</a>. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.</p> +<p>Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valeur retournée</a>. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.</p> <p>Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme <code>void</code> ou <code>undefined</code> dans de tels cas). Par exemple, dans la fonction <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage() </a> construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !</p> @@ -56,7 +56,7 @@ console.log(newString); <h3 id="Utiliser_des_valeurs_de_retour_dans_vos_fonctions">Utiliser des valeurs de retour dans vos fonctions</h3> -<p>Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a> . Nous avons vu son utilisation dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Notre fonction <code>draw()</code> dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:</p> +<p>Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef <a href="/fr/docs/Web/JavaScript/Reference/Statements/return">return</a> . Nous avons vu son utilisation dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Notre fonction <code>draw()</code> dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:</p> <pre class="brush: js">function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); @@ -131,7 +131,7 @@ function factorial(num) { <p>Ici nous créons un gestionnaire d'événement <code>onchange</code> qui s'exécute chaque fois que l'événement <code>change</code> se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable <code>num</code>.</p> - <p>Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression <code>isNaN(num)</code> retourne <code>true</code>. Nous utilisons la fonction <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> pour vérifier si la valeur <code>num</code> est un nombre — si c'est le cas, elle retourne <code>false</code>, sinon <code>true</code>.</p> + <p>Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression <code>isNaN(num)</code> retourne <code>true</code>. Nous utilisons la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> pour vérifier si la valeur <code>num</code> est un nombre — si c'est le cas, elle retourne <code>false</code>, sinon <code>true</code>.</p> <p>Si le test retourne <code>false</code>, la valeur <code>num</code> est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions <code>squared()</code>, <code>cubed()</code> et <code>factorial()</code> pour obtenir les valeurs désirées.</p> </li> @@ -139,7 +139,7 @@ function factorial(num) { </ol> <div class="note"> -<p><strong>Note</strong>: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">Version final sur GitHub</a> (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">Démonstration en direct</a>), ou demandez-nous de l'aide.</p> +<p><strong>Note :</strong> Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">Version final sur GitHub</a> (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">Démonstration en direct</a>), ou demandez-nous de l'aide.</p> </div> <p>À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon <code>num</code>?</p> @@ -155,12 +155,12 @@ function factorial(num) { <p>Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.</p> -<p>Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou <a href="/en-US/Learn#Contact_us">contactez-nous</a> pour obtenir de l'aide.</p> +<p>Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou <a href="/fr/Learn#Contact_us">contactez-nous</a> pour obtenir de l'aide.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Fonctions en profondeur</a> — Un guide détaillé couvrant des information plus avancées sur les fonctions.</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Functions">Fonctions en profondeur</a> — Un guide détaillé couvrant des information plus avancées sur les fonctions.</li> <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Fonction Callback en JavaScript</a> — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction. Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.</li> </ul> @@ -171,13 +171,13 @@ function factorial(num) { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — Des blocs de code réutilisables</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — Des blocs de code réutilisables</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li> + <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li> </ul> <p> </p> diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html index 7bae8cbfe8..60cc11cd4a 100644 --- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage <div></div> -<p class="summary">Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.</p> +<p>Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -36,7 +36,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage <h2 id="Stockage_côté_client">Stockage côté client ?</h2> -<p>Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites statiques</a> et les <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dynamiques</a> — ces derniers stockent des données <a href="/fr/docs/Learn/Server-side">côté serveur</a> en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.</p> +<p>Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les <a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites statiques</a> et les <a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dynamiques</a> — ces derniers stockent des données <a href="/fr/docs/Learn/Server-side">côté serveur</a> en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.</p> <p>Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :</p> @@ -50,7 +50,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage <p>Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.</p> <div class="note"> -<p><strong>Note </strong>: La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a> pour plus d'informations.</p> +<p><strong>Note :</strong> La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a> pour plus d'informations.</p> </div> <h3 id="À_lancienne_les_cookies">À l'ancienne : les cookies</h3> @@ -59,14 +59,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage <p>De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de <a href="/fr/docs/Web/HTTP/Cookies#EU_cookie_directive">directive Cookie</a>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15734/cookies-notice.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="cookies-notice.png"></p> <p>Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les <a href="/fr/docs/Web/HTTP/Cookies#Security">problèmes de sécurité</a> qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.</p> <p>Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.</p> <div class="note"> -<p><strong>Note </strong>: Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.</p> +<p><strong>Note :</strong> Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.</p> </div> <h3 id="La_nouvelle_école_Web_Storage_et_IndexedDB">La nouvelle école : Web Storage et IndexedDB</h3> @@ -169,7 +169,7 @@ myName</pre> <p>Le HTML de l'exemple est disponible à <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="web-storage-demo.png"></p> <p>Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.</p> @@ -260,16 +260,16 @@ function nameDisplayCheck() { <p>Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">version terminée en direct ici</a> (ou le <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/index.js">code JavaScript terminé</a>).</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez trouver un exemple un peu plus complexe dans l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API de stockage web</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver un exemple un peu plus complexe dans l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API de stockage web</a>.</p> </div> <div class="note"> -<p><strong>Note </strong>: Dans la ligne <code><script src="index.js" defer></script></code> de notre version finie, l'attribut <code>defer</code> spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.</p> +<p><strong>Note :</strong> Dans la ligne <code><script src="index.js" defer></script></code> de notre version finie, l'attribut <code>defer</code> spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.</p> </div> <h2 id="Stocker_des_données_complexes_—_IndexedDB">Stocker des données complexes — IndexedDB</h2> -<p>L'<a href="/en-US/docs/Web/API/IndexedDB_API">API IndexedDB</a> (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.</p> +<p>L'<a href="/fr/docs/Web/API/IndexedDB_API">API IndexedDB</a> (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.</p> <p>Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.</p> @@ -279,7 +279,7 @@ function nameDisplayCheck() { <p>L'application ressemble à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="idb-demo.png"></p> <p>Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.</p> @@ -333,7 +333,7 @@ let request = window.indexedDB.open('notes', 1);</pre> <p>Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle <code>request</code> pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.</p> <div class="note"> - <p><strong>Note </strong>: Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement <code>onupgradeneeded</code>. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.</p> + <p><strong>Note :</strong> Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement <code>onupgradeneeded</code>. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.</p> </div> </li> <li> @@ -396,11 +396,11 @@ request.onupgradeneeded = function(e) { <p>Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :</p> -<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{ - </span><span class="nodeName">title</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Acheter du lait"</span>, - <span class="nodeName">body</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Lait de vache et de soja."</span>, - <span class="nodeName">id</span><span class="objectEqual">: </span><span class="objectBox objectBox-number">8</span></span></span></span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectRightBrace"> -}</span></span></span></span></span></pre> +<pre class="brush: js">{ + title: "Acheter du lait", + body: "Lait de vache et de soja.", + id: 8 +}</pre> <h3 id="Ajouter_des_données_à_la_base_de_données">Ajouter des données à la base de données</h3> @@ -608,7 +608,7 @@ function deleteItem(e) { <p>Et voilà ! L'exemple devrait maintenant fonctionner.</p> <div class="note"> -<p><strong>Note </strong>: Si vous rencontrez des difficultés, n'hésitez pas à consulter <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">notre exemple en direct</a> (ou voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">le code source</a>).</p> +<p><strong>Note :</strong> Si vous rencontrez des difficultés, n'hésitez pas à consulter <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">notre exemple en direct</a> (ou voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">le code source</a>).</p> </div> <h3 id="Stocker_des_données_complexes_avec_IndexedDB">Stocker des données complexes avec IndexedDB</h3> @@ -729,7 +729,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p> +<p><img alt="" src="ff-offline.png"></p> <p>C'est là qu'interviennet les <a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a> et l'API étroitement liée, <a href="/fr/docs/Web/API/Cache">Cache</a>.</p> @@ -742,7 +742,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) { <p>L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.</p> <div class="note"> -<p><strong>Note </strong>: Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.</p> +<p><strong>Note :</strong> Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.</p> </div> <h3 id="Un_exemple_service_worker">Un exemple service worker</h3> @@ -769,7 +769,7 @@ if('serviceWorker' in navigator) { </ul> <div class="note"> -<p><strong>Note </strong>: Le chemin du fichier <code>sw.js</code> est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.<br> +<p><strong>Note :</strong> Le chemin du fichier <code>sw.js</code> est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.<br> Le service worker est sur <code>https://mdn.github.io/learning-area/.../sw.js</code>. L'origine est <code>https://mdn.github.io</code>. Le chemin donné doit donc être <code>/learning-area/.../sw.js</code>.<br> Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.</p> </div> @@ -872,11 +872,11 @@ if('serviceWorker' in navigator) { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> </ul> diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html index 0af7689eaa..95c9f7f8e4 100644 --- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html @@ -16,9 +16,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</p> +<p>Le navigateur contient des outils de programmation graphique très puissants, du langage <a href="/fr/docs/Web/SVG">SVG</a> (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir <a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -50,7 +50,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics <p>Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez par la suite suivre le tutoriel <a href="/fr/Apprendre/WebGL">WebGL</a>, qui couvre le code WebGL brut.</p> <div class="note"> -<p><strong>Note</strong>: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.</p> +<p><strong>Note :</strong> Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.</p> </div> <h2 id="Apprentissage_actif_Débuter_avec_un_<canvas>">Apprentissage actif: Débuter avec un <canvas></h2> @@ -112,7 +112,7 @@ var height = canvas.height = window.innerHeight;</pre> </ol> <div class="note"> -<p><strong>Note</strong>: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.</p> +<p><strong>Note :</strong> Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.</p> </div> <h3 id="Obtenir_le_contexte_du_canvas_et_configuration_finale">Obtenir le contexte du canvas et configuration finale</h3> @@ -124,7 +124,7 @@ var height = canvas.height = window.innerHeight;</pre> <pre class="brush: js">var ctx = canvas.getContext('2d');</pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez choisir d'autres types de contexte comme <code>webgl</code> pour WebGL, <code>webgl2</code> pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.</p> +<p><strong>Note :</strong> Vous pouvez choisir d'autres types de contexte comme <code>webgl</code> pour WebGL, <code>webgl2</code> pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.</p> </div> <p>Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable <code>ctx</code> contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.</p> @@ -144,7 +144,7 @@ ctx.fillRect(0, 0, width, height);</pre> <p>De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.</p> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="display: block; height: 220px; margin: 0px auto; width: 220px;"></p> +<p><img alt="" src="Canvas_default_grid.png"></p> <p>Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.</p> @@ -208,7 +208,7 @@ ctx.strokeRect(25, 25, 175, 200);</pre> <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}</p> <div class="note"> -<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p> +<p><strong>Note :</strong> Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p> </div> <h3 id="Dessiner_des_chemins">Dessiner des chemins</h3> @@ -284,7 +284,7 @@ ctx.fill();</pre> <p> </p> - <p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p> + <p><img alt="" src="trigonometry.png"></p> <p>Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit <code>50 * Math.tan(degToRad(60))</code>. Nous utilisons notre fonction <code>degToRad()</code> pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.</p> </li> @@ -324,7 +324,7 @@ ctx.fill();</pre> </ul> <div class="note"> - <p><strong>Note</strong>: 0 degrés est horizontalement vers la droite.</p> + <p><strong>Note :</strong> 0 degrés est horizontalement vers la droite.</p> </div> </li> <li> @@ -350,11 +350,11 @@ ctx.fill();</pre> <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}</p> <div class="note"> -<p><strong>Note</strong>: Le code finit est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p> +<p><strong>Note :</strong> Le code finit est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p> </div> <div class="note"> -<p><strong>Note</strong>: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Formes_géométriques">Dessiner des formes avec le canevas</a>.</p> +<p><strong>Note :</strong> Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Formes_géométriques">Dessiner des formes avec le canevas</a>.</p> </div> <h3 id="Texte">Texte</h3> @@ -388,7 +388,7 @@ ctx.fillText('Canvas text', 50, 150);</pre> <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}</p> <div class="note"> -<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p> +<p><strong>Note :</strong> Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p> </div> <p>Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans <a href="/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte avec canvas</a>.</p> @@ -440,7 +440,7 @@ image.src = 'firefox.png';</pre> <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}</p> <div class="note"> -<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p> +<p><strong>Note :</strong> Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p> </div> <h2 id="Boucles_et_animations">Boucles et animations</h2> @@ -542,7 +542,7 @@ ctx.rotate(degToRad(5));</pre> </ul> <div class="note"> -<p><strong>Note</strong>: Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p> +<p><strong>Note :</strong> Le code terminé est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p> </div> <h3 id="Animations">Animations</h3> @@ -596,7 +596,7 @@ loop();</pre> </ol> <div class="note"> -<p><strong>Note</strong>: Nous ne couvrirons pas <code>save()</code> et <code>restore()</code> ici, mais elles sont bien expliquées dans notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a> (et ceux qui le suivent).</p> +<p><strong>Note :</strong> Nous ne couvrirons pas <code>save()</code> et <code>restore()</code> ici, mais elles sont bien expliquées dans notre tutoriel <a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a> (et ceux qui le suivent).</p> </div> <h3 id="Une_animation_simple_de_personnage">Une animation simple de personnage</h3> @@ -627,7 +627,7 @@ var posX = 0;</pre> <p>L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article <a href="http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using using CSS animation">Create a sprite sheet walk cycle using using CSS animation</a> — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:</p> - <p><img alt="" src="https://mdn.mozillademos.org/files/14847/walk-right.png" style="display: block; height: 148px; margin: 0px auto; width: 612px;"></p> + <p><img alt="" src="walk-right.png"></p> <p>Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser <code>drawImage()</code> pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.</p> </li> @@ -700,7 +700,7 @@ var posX = 0;</pre> <p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p> <div class="note"> -<p><strong>Note</strong>: Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p> +<p><strong>Note :</strong> Le code final est disponible sur GitHub, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p> </div> <h3 id="Une_application_simple_de_dessin">Une application simple de dessin</h3> @@ -753,7 +753,7 @@ canvas.onmouseup = function() { draw();</pre> <div class="note"> -<p><strong>Note</strong>: Les types d'{{htmlelement("input")}} <code>range</code> et <code>color</code> sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type <code>color</code>. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.</p> +<p><strong>Note :</strong> Les types d'{{htmlelement("input")}} <code>range</code> et <code>color</code> sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type <code>color</code>. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.</p> </div> <h2 id="WebGL">WebGL</h2> @@ -881,7 +881,7 @@ scene.add(spotLight);</pre> <p>Vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-cube">trouver le code terminé sur GitHub</a>.</p> <div class="note"> -<p><strong>Note</strong>: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">le voir en direct</a>). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!</p> +<p><strong>Note :</strong> Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">le voir en direct</a>). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!</p> </div> <h2 id="Sommaire">Sommaire</h2> @@ -913,11 +913,11 @@ scene.add(spotLight);</pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> </ul> diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html index 2c693f757b..9fe8ea07d5 100644 --- a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.</p> +<p>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -37,7 +37,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data <p>À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.</p> -<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p> +<p><img alt="A basic representation of a web site architecture" src="web-site-architechture@2x.png"></p> <p>Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.</p> @@ -48,10 +48,10 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data <p>Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>. Elles permettent de réaliser des requêtes <a href="/fr/docs/Web/HTTP">HTTP</a> pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.</p> <div class="note"> -<p><strong>Note </strong>: Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise <code>XMLHttpRequest</code> ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.</p> +<p><strong>Note :</strong> Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise <code>XMLHttpRequest</code> ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.</p> </div> -<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p> +<p><img alt="A simple modern architecture for web sites" src="moderne-web-site-architechture@2x.png"></p> <p>Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :</p> @@ -69,7 +69,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data <p>Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.</p> -<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p> +<p><img alt="A basic web app data flow architecture" src="web-app-architecture@2x.png"></p> <h2 id="Une_requête_Ajax_basique">Une requête Ajax basique</h2> @@ -130,7 +130,7 @@ var url = verse + '.txt';</pre> <li> <p>Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété <code>response</code> de l'objet XHR utilisé.</p> - <p>Ajoutez le bloc de code qui suit toujours au bas de la fonction <code>updateDisplay()</code>. Vous verrez qu'à l'intérieur du gestionnaire d'événément <code>onload</code>, nous assignons la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de <code>poemDisplay</code> (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.</p> + <p>Ajoutez le bloc de code qui suit toujours au bas de la fonction <code>updateDisplay()</code>. Vous verrez qu'à l'intérieur du gestionnaire d'événément <code>onload</code>, nous assignons la propriété <code><a href="/fr/docs/Web/API/Node/textContent">textContent</a></code> de <code>poemDisplay</code> (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.</p> <pre class="brush: js">request.onload = function() { poemDisplay.textContent = request.response; @@ -257,7 +257,7 @@ myFetch.then(function(response) { <p>L'objet <code>response</code> a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.</p> -<p>À l'intérieur de ce dernier <code>.then()</code>, nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> de l'élément {{htmlelement("pre")}} à la valeur du texte.</p> +<p>À l'intérieur de ce dernier <code>.then()</code>, nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété <code><a href="/fr/docs/Web/API/Node/textContent">textContent</a></code> de l'élément {{htmlelement("pre")}} à la valeur du texte.</p> <h4 id="Chaîner_les_then">Chaîner les then()</h4> @@ -285,7 +285,7 @@ myFetch.then(function(response) { <p>Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">exemple en direct sur GitHub</a>, et <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">voir le code source</a>.</p> -<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="can-store.png"></p> <p>Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.</p> @@ -361,7 +361,7 @@ myFetch.then(function(response) { </ul> <div class="note"> -<p><strong>Note </strong>: Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">voir le code source</a>, ou <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">voir en direct</a>).</p> +<p><strong>Note :</strong> Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">voir le code source</a>, ou <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">voir en direct</a>).</p> </div> <h2 id="Sommaire">Sommaire</h2> @@ -387,12 +387,12 @@ myFetch.then(function(response) { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> </ul> </div> diff --git a/files/fr/learn/javascript/client-side_web_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/index.html index ca24150652..b7ce9e7171 100644 --- a/files/fr/learn/javascript/client-side_web_apis/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/index.html @@ -20,16 +20,16 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs --- <div>{{LearnSidebar}}</div> -<p class="summary">Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</p> +<p>Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</p> <h2 id="Prérequis">Prérequis</h2> -<p>Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> et <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objets JavaScript</a>). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.</p> +<p>Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (<a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks">Building blocks</a> et <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.</p> -<p>Une connaissance basique de <a href="/en-US/docs/Learn/HTML">HTML</a> et <a href="/en-US/docs/Learn/CSS">CSS</a> serait aussi utile.</p> +<p>Une connaissance basique de <a href="/fr/docs/Learn/HTML">HTML</a> et <a href="/fr/docs/Learn/CSS">CSS</a> serait aussi utile.</p> <div class="note"> -<p><strong>Remarque</strong>: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> @@ -40,7 +40,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></dt> <dd>Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</dd> <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></dt> - <dd>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">API Fetch</a>.</dd> + <dd>Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>.</dd> <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></dt> <dd>Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.</dd> <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></dt> diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html index 9ac5bc56a8..ed8648ce6f 100644 --- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction <div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.</p> +<p>Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -40,15 +40,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction <p>En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.</p> -<p><img alt="" src="plug-socket.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="" src="plug-socket.png"></p> <p><em>Source de l'image : <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> par <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, sur Flickr.</em></p> <p>De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Voir aussi l'<a href="/fr/docs/Glossary/API">entrée du glossaire du terme API</a> pour plus de descriptions.</p> +<div class="note"> + <p><strong>Note :</strong> Voir aussi l'<a href="/fr/docs/Glossary/API">entrée du glossaire du terme API</a> pour plus de descriptions.</p> </div> <h3 id="apis_in_client-side_javascript">API JavaScript côté client</h3> @@ -61,7 +60,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction Par exemple: l'<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoie alors les informations demandées.</li> </ul> -<p><img alt="" src="browser.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="" src="browser.png"></p> <h3 id="relationship_between_javascript_apis_and_other_javascript_tools">Relations entre JavaScript, les API et autres outils JavaScript</h3> @@ -108,9 +107,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction <li><a href="https://docs.joinmastodon.org/api/">L'API Mastodon</a> permet de manipuler les fonctionnalités du réseau social Mastodon grâce à des programmes.</li> </ul> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le <a href="http://www.programmableweb.com/category/all/apis">répertoire Programmable Web API.</a></p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le <a href="http://www.programmableweb.com/category/all/apis">répertoire Programmable Web API.</a></p> </div> <h2 id="how_do_apis_work">Comment les API fonctionnent-elles ?</h2> @@ -121,9 +119,8 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction <p>Les API interagissent avec le code en utilisant un ou plusieurs <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a>, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a> avant de continuer.</p> +<div class="note"> + <p><strong>Note :</strong> Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module <a href="/fr/docs/Learn/JavaScript/Objects">objets JavaScript</a> avant de continuer.</p> </div> <p>Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :</p> @@ -189,8 +186,7 @@ audioElement.addEventListener('ended', function() { });</pre> <div class="note"> - <p><b>Note :</b></p> - <p>Certains d'entre vous ont peut-être remarqué que les méthodes <code>play()</code> et <code>pause()</code> utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>. qui est différente mais étroitement liée.</p> + <p><strong>Note :</strong> Certains d'entre vous ont peut-être remarqué que les méthodes <code>play()</code> et <code>pause()</code> utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>. qui est différente mais étroitement liée.</p> </div> <p>Ensuite, nous créons un objet <a href="/fr/docs/Web/API/GainNode"><code>GainNode</code></a> à l'aide de la méthode <a href="/fr/docs/Web/API/BaseAudioContext/createGain"><code>AudioContext.createGain()</code></a>, qui peut être utilisé pour ajuster le volume de l'audio qui le traverse, et nous créons un autre gestionnaire d'événements qui modifie la valeur du gain (volume) du graphique audio lorsque la valeur du curseur est modifiée :</p> @@ -233,8 +229,7 @@ const ctx = canvas.getContext('2d');</pre> };</pre> <div class="note"> - <p><b>Note :</b></p> - <p>Vous pouvez voir ce code en action dans notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">démo de balles rebondissantes</a> (voyez-le fonctionner <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">en direct</a> également).</p> + <p><strong>Note :</strong> Vous pouvez voir ce code en action dans notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">démo de balles rebondissantes</a> (voyez-le fonctionner <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">en direct</a> également).</p> </div> <h3 id="they_use_events_to_handle_changes_in_state">Elles utilisent des événements pour gérer les changements d'état</h3> @@ -261,9 +256,8 @@ request.onload = function() { showHeroes(superHeroes); }</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez voir ce code en action dans notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">voyez-le en direct</a> également).</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez voir ce code en action dans notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">voyez-le en direct</a> également).</p> </div> <p>Les cinq premières lignes spécifient l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur <code>XMLHttpRequest()</code>, ouvrent une requête HTTP <code>GET</code> pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la requête.</p> @@ -276,13 +270,12 @@ request.onload = function() { <p>En outre, certaines API Web demandent la permission d'être activées à l'utilisateur une fois que les appels à ces interfaces sont effectués dans votre code. À titre d'exemple, l'API <a href="/fr/docs/Web/API/Notifications_API">Notifications API</a> demande la permission à l'aide d'une boîte de dialogue contextuelle :</p> -<p><img alt="" src="notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="notification-permission.png"></p> <p>Les API Web Audio et <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> sont soumises à un mécanisme de sécurité appelé <a href="/fr/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy">autoplay policy</a> - cela signifie essentiellement que vous ne pouvez pas lire automatiquement l'audio lorsqu'une page se charge — vous devez permettre à vos utilisateurs de déclencher la lecture audio par le biais d'un contrôle comme un bouton. Cette mesure est prise parce que la lecture automatique de l'audio est généralement très ennuyeuse et que nous ne devrions pas y soumettre nos utilisateurs.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.</p> +<div class="note"> + <p><strong>Note :</strong> Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.</p> </div> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html index 76b8b9cfb7..8025213ac4 100644 --- a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -20,9 +20,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p> +<p>Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -41,7 +41,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents <p>Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire plein de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'œil au diagramme suivant, il représente les principaux composants du navigateur directement impliqués dans l'affichage des pages web:</p> -<p><img alt="" src="document-window-navigator.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="document-window-navigator.png"></p> <ul> <li>La <em>fenêtre</em> est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a>. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir <a href="/fr/docs/Web/API/Window/innerWidth"><code>Window.innerWidth</code></a> et <a href="/fr/docs/Web/API/Window/innerHeight"><code>Window.innerHeight</code></a>), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">gestionnaire d'événement</a> à la fenêtre en cours, et plus encore.</li> @@ -73,7 +73,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents <p>Le DOM, quant à lui, ressemble à ça :</p> -<p><img alt="" src="dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="dom-screenshot.png"></p> <div class="note"> <p><strong>Note :</strong> Ce diagramme du DOM a été créé en utilisant le <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> de Ian Hickson.</p> @@ -198,7 +198,7 @@ para.style.textAlign = 'center';</pre> </ol> <div class="note"> -<p><strong>Note</strong> : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que les versions CSS sont reliées par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.</p> +<p><strong>Note :</strong> Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en <a href="https://fr.wikipedia.org/wiki/Camel_case">lower camel case</a> tandis que les versions CSS sont reliées par des tirets (par exemple <code>backgroundColor</code> au lieu de <code>background-color</code>). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.</p> </div> <p>Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.</p> @@ -229,7 +229,7 @@ para.style.textAlign = 'center';</pre> <p>Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.</p> <div class="note"> -<p><strong>Note</strong> : Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p> +<p><strong>Note :</strong> Vous pouvez trouver la <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">version finale de dom-example.html</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">le voir en direct aussi</a>).</p> </div> <h2 id="active_learning_getting_useful_information_from_the_window_object">Apprentissage actif : Récupérer des informations utiles depuis l'objet Window</h2> @@ -262,7 +262,7 @@ para.style.textAlign = 'center';</pre> </ol> <div class="note"> -<p><strong>Note</strong> : En cas de blocage, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">exemple de redimensionnement de la fenêtre terminé</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p> +<p><strong>Note :</strong> En cas de blocage, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">exemple de redimensionnement de la fenêtre terminé</a> sur GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">voir en direct aussi</a>).</p> </div> <h2 id="active_learning_a_dynamic_shopping_list">Apprentissage actif : Une liste de courses dynamique</h2> @@ -277,7 +277,7 @@ para.style.textAlign = 'center';</pre> <p>La démo terminée doit ressembler à ça:</p> -<p><img alt="" src="shopping-list.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="shopping-list.png"></p> <p>Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.</p> @@ -296,7 +296,7 @@ para.style.textAlign = 'center';</pre> </ol> <div class="note"> -<p><strong>Note</strong> : Si vous bloquez vraiment, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p> +<p><strong>Note :</strong> Si vous bloquez vraiment, jetez un œil à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">liste de courses terminée</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">voir en direct</a>.)</p> </div> <h2 id="summary">Résumé</h2> diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html index c0d337f3d1..15dfb1c063 100644 --- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -10,9 +10,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « <em>third-party API</em> ») et nous illustrerons certains cas d'usage pour ces API tierces.</p> +<p>Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « <em>third-party API</em> ») et nous illustrerons certains cas d'usage pour ces API tierces.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -203,7 +203,7 @@ var map = L.mapquest.map('map', { <p>Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14821/nytimes-search.png" style="border-style: solid; border-width: 1px; display: block; height: 374px; margin: 0px auto; width: 700px;"></p> +<p><img alt="" src="nytimes-search.png"></p> <h3 id="Connecter_lAPI_à_son_application">Connecter l'API à son application</h3> @@ -235,7 +235,7 @@ function fetchResults(e) { e.preventDefault(); // On compose l'URL - url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value <span class="blob-code-inner"><span class="pl-s1"><span class="pl-k x">+</span><span class="x"> </span><span class="pl-s"><span class="pl-pds x">'</span><span class="x">&fq=document_type:("article")</span><span class="pl-pds x x-last">'</span></span></span></span>; + url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")'; if(startDate.value !== '') { url += '&begin_date=' + startDate.value; @@ -264,7 +264,7 @@ function fetchResults(e) { <p>Si on prend un exemple d'URL complète ainsi construite :</p> <pre>https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats -&<span class="blob-code-inner"><span class="pl-s1"><span class="pl-s"><span class="x">fq=document_type:("article")</span></span></span></span>&begin_date=20170301&end_date=20170312 </pre> +&fq=document_type:("article")&begin_date=20170301&end_date=20170312 </pre> <div class="note"> <p><strong>Note :</strong> Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter <a href="https://developer.nytimes.com/">la documentation du NYTimes</a>.</p> @@ -325,7 +325,7 @@ fetch(url).then(function(result) { link.href = current.web_url; link.textContent = current.headline.main; - para1.textContent = current.<span class="blob-code-inner"><span class="pl-s1"><span class="pl-smi x x-first x-last">snippet</span></span></span>; + para1.textContent = current.snippet; para2.textContent = 'Mots-clés : '; for(var j = 0; j < current.keywords.length; j++) { var span = document.createElement('span'); @@ -418,7 +418,7 @@ function previousPage(e) { <p>Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14823/youtube-example.png" style="border-style: solid; border-width: 1px; display: block; height: 389px; margin: 0px auto; width: 700px;"></p> +<p><img alt="" src="youtube-example.png"></p> <p>Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">consulter le code source</a> qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.</p> diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html index 6569f167d1..a091835f18 100644 --- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs <div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</div> -<p class="summary">HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</p> +<p>HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc<em>. </em>Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -460,11 +460,11 @@ clearInterval(intervalFwd); <p>À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions <code>windBackward()</code> et <code>windForward()</code>, puisqu'elles ont été ajoutées à la fonction <code>stopMedia()</code> à la place.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.</p> +<p><strong>Note :</strong> Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.</p> </div> <div class="note"> -<p><strong>Note</strong>: Le <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/video-audio/finished">code terminé</a> est disponible sur Github (le <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">voir en direct</a>).</p> +<p><strong>Note :</strong> Le <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/video-audio/finished">code terminé</a> est disponible sur Github (le <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">voir en direct</a>).</p> </div> <h2 id="Sommaire">Sommaire</h2> @@ -509,11 +509,11 @@ clearInterval(intervalFwd); <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction">Introduction aux API du Web</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipuler des documents</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data">Récupérer des données du serveur</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs">APIs tierces</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des éléments graphiques</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">APIs vidéo et audio</a></li> + <li><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a></li> </ul> diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.html b/files/fr/learn/javascript/first_steps/a_first_splash/index.html index 6be9e629d5..40c91d2fa4 100644 --- a/files/fr/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.html @@ -18,9 +18,9 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».</p> +<p>Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <p>Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !</p> <div class="note"> -<p>Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.</p> +<p><strong>Note :</strong> De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.</p> </div> <h2 id="Penser_comme_un_programmeur">Penser comme un programmeur</h2> @@ -49,12 +49,10 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <h2 id="Exemple_—_Jeu_Guess_the_number">Exemple — Jeu : Guess the number</h2> -<p><span id="result_box" lang="fr"><span>Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :</span></span></p> +<p>Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :</p> -<div class="hidden"> -<h6 id="Top_hidden_code">Top hidden code</h6> -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> @@ -160,16 +158,15 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash </script> </html></pre> -</div> -<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Exemple_—_Jeu_Guess_the_number', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> -<p><span id="result_box" lang="fr"><span>Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.</span><br> - <br> - <span>Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :</span></span></p> +<p>Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.</p> + +<p>Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :</p> <blockquote> -<p><span id="result_box" lang="fr"><span>Je vous demande de créer un jeu simple de devinette de </span><span>nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi.</span> <span>À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée.</span> Le jeu<span> doit également rappeler au joueur les nombres déjà proposés.</span> <span>Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances.</span> </span>À<span lang="fr"><span> la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.</span></span></p> +<p>Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.</p> </blockquote> <p>La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur :</p> @@ -201,12 +198,10 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash <li>Afficher un contrôle pour que le joueur puisse rejouer.</li> </ol> </li> - <li><span id="result_box" lang="fr"><span title="Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1. - -">Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.</span></span></li> + <li>Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.</li> </ol> -<p><span id="result_box" lang="fr"><span title="Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.">Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript </span></span><span lang="fr"><span title="Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.">au fur et à mesure.</span></span></p> +<p>Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.</p> <h3 id="Configuration_initiale">Configuration initiale</h3> @@ -256,7 +251,7 @@ let resetButton;</pre> </ul> <div class="note"> -<p><strong>Note </strong>: Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le <a href="/fr/docs/Learn/JavaScript/First_steps/Variables">prochain article</a>.</p> +<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le <a href="/fr/docs/Learn/JavaScript/First_steps/Variables">prochain article</a>.</p> </div> <h3 id="Fonctions">Fonctions</h3> @@ -278,7 +273,7 @@ let resetButton;</pre> <p>Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.</p> <div class="note"> -<p><strong>Note</strong> : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.</p> +<p><strong>Note :</strong> Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.</p> </div> <h3 id="Opérateurs">Opérateurs</h3> @@ -287,10 +282,7 @@ let resetButton;</pre> <p>Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les<a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs"> outils de développement et la console Javascript</a>. Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -397,9 +389,8 @@ let resetButton;</pre> </script> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code', '100%', 300,"", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }}</p> <p>Regardons d'abord les opérateurs arithmétiques, par exemple :</p> @@ -444,7 +435,7 @@ hello; let greeting = name + hello; greeting;</pre> -<p>Des raccourcis d'opérateurs sont également disponibles, appelés <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">opérateurs d'assignation</a> augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :</p> +<p>Des raccourcis d'opérateurs sont également disponibles, appelés <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">opérateurs d'assignation</a> augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :</p> <pre class="brush: js">name += ' dit bonjour !';</pre> @@ -486,11 +477,11 @@ greeting;</pre> <h3 id="Structures_conditionnelles">Structures conditionnelles</h3> -<p>Revenons à la fonction <code style="font-size: 16px !important; line-height: 24px !important;">checkGuess()</code>. Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.</p> +<p>Revenons à la fonction <code>checkGuess()</code>. Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.</p> -<p>Donc, remplacez l'actuelle fonction <code style="font-size: 16px !important; line-height: 24px !important;">checkGuess()</code> par celle-ci :</p> +<p>Donc, remplacez l'actuelle fonction <code>checkGuess()</code> par celle-ci :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">function checkGuess(){ +<pre class="brush: js">function checkGuess(){ let userGuess = Number(guessField.value); if (guessCount === 1) { guesses.textContent = 'Propositions précédentes : '; @@ -519,12 +510,12 @@ greeting;</pre> guessField.value = ''; guessField.focus(); } -</code></pre> +</pre> <p>Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.</p> <ul> - <li>La première ligne de la fonction (ligne 2) déclare une variable nommée <code>userGuess</code> et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode <code style="font-size: 16px !important; line-height: 24px !important;">Number()</code> , juste pour nous assurer que la valeur stockée dans <code>userGuess</code> est bien un nombre.</li> + <li>La première ligne de la fonction (ligne 2) déclare une variable nommée <code>userGuess</code> et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode <code>Number()</code> , juste pour nous assurer que la valeur stockée dans <code>userGuess</code> est bien un nombre.</li> <li>Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé <code>if</code>, puis parenthèses, puis des accolades <code>{ }</code>.<br> A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie <code>true</code> , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable <code>guessCount</code> est égale à <code>1</code> (c'est-à-dire s'il s'agit de la première supposition du joueur) : <pre class="brush: js">guessCount === 1</pre> diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html index f38aeee181..b201776dd1 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ b/files/fr/learn/javascript/first_steps/arrays/index.html @@ -22,9 +22,9 @@ original_slug: Learn/JavaScript/First_steps/tableaux <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.</p> +<p>Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -45,10 +45,7 @@ original_slug: Learn/JavaScript/First_steps/tableaux <p>Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés ou utiliser la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console développeur de l'explorateur</a> si vous préférez).</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -153,9 +150,8 @@ original_slug: Learn/JavaScript/First_steps/tableaux </script> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}</p> <h3 id="Créer_un_tableau">Créer un tableau</h3> @@ -188,7 +184,8 @@ let random = ['arbre', 795, [0, 1, 2]];</pre> shopping; // shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]</pre> - <div class="note"><strong>Note </strong>: Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !</div> + <div class="note"> + <p><strong>Note :</strong> Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !</p></div> </li> <li>Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau <code>random</code> (voir la section précédente), vous pouvez écrire quelque chose comme :</li> <li> @@ -228,7 +225,7 @@ for (var i = 0; i < sequence.length; i++) { <p>Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.</p> <div class="note"> -<p><strong>Note </strong>: D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.</p> +<p><strong>Note :</strong> D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.</p> </div> <ol> @@ -302,7 +299,7 @@ removedItem;</pre> </li> </ol> -<h2 id="Activité_affichons_les_produits_!">Activité : affichons les produits !</h2> +<h2 id="Activité_affichons_les_produits">Activité : affichons les produits</h2> <p>Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :</p> @@ -315,10 +312,7 @@ removedItem;</pre> <li>Nous souhaitons que vous modifiez la ligne au‑dessous de <code>// number 5</code> de sorte que la variable <code>itemText</code> soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.</li> </ol> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="output" style="min-height: 150px;"> +<pre class="brush: html hidden"><div class="output" style="min-height: 150px;"> <ul> @@ -363,7 +357,7 @@ totalBox.textContent = 'Total: $' + total.toFixed(2); </div> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -387,9 +381,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalB textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}</p> <h2 id="Activité_Top_5_des_recherches">Activité : Top 5 des recherches</h2> @@ -398,7 +391,7 @@ window.addEventListener('load', updateCode); <p>Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.</p> <div class="note"> -<p><strong>Note</strong> : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.</p> +<p><strong>Note :</strong> Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.</p> </div> <p>Pour terminer l'application, il vous faut :</p> @@ -408,10 +401,7 @@ window.addEventListener('load', updateCode); <li>Ajouter une ligne sous le commentaire <code>// number 2</code> pour supprimer la valeur en fin de liste du tableau.</li> </ol> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><div class="output" style="min-height: 150px;"> +<pre class="brush: html hidden"><div class="output" style="min-height: 150px;"> <input type="text"><button>Search</button> @@ -466,7 +456,7 @@ searchBtn.onclick = function() { </div> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -490,9 +480,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar search textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }}</p> <h2 id="Testez_vos_compétences_!">Testez vos compétences !</h2> diff --git a/files/fr/learn/javascript/first_steps/index.html b/files/fr/learn/javascript/first_steps/index.html index 70e5a0c1f0..8e093bebfb 100644 --- a/files/fr/learn/javascript/first_steps/index.html +++ b/files/fr/learn/javascript/first_steps/index.html @@ -17,26 +17,26 @@ translation_of: Learn/JavaScript/First_steps --- <div>{{LearnSidebar}}</div> -<p class="summary">Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.</p> +<p>Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.</p> <h2 id="Prérequis"><strong>Prérequis</strong></h2> <p>Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :</p> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Commencer avec le Web</a> (qui inclut une <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">présentation basique de JavaScript</a>).</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction au langage HTML</a>.</li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction au langage CSS</a>.</li> + <li><a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Commencer avec le Web</a> (qui inclut une <a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">présentation basique de JavaScript</a>).</li> + <li><a href="/fr/docs/Web/Guide/HTML/Introduction">Introduction au langage HTML</a>.</li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction au langage CSS</a>.</li> </ul> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Qu'est-ce que JavaScript ?</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Qu'est-ce que JavaScript ?</a></dt> <dd>Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage.</dd> <dt><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">Notre premier code JavaScript</a></dt> <dd> @@ -65,6 +65,6 @@ translation_of: Learn/JavaScript/First_steps <p>L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Génerateur d'histoires absurdes</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Génerateur d'histoires absurdes</a></dt> <dd>Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !</dd> </dl> diff --git a/files/fr/learn/javascript/first_steps/math/index.html b/files/fr/learn/javascript/first_steps/math/index.html index ddf396a3b7..bdfdda9e64 100644 --- a/files/fr/learn/javascript/first_steps/math/index.html +++ b/files/fr/learn/javascript/first_steps/math/index.html @@ -21,9 +21,9 @@ translation_of: Learn/JavaScript/First_steps/Math <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.</p> +<p>À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -82,7 +82,7 @@ myFloat;</pre> <li>Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.</li> <li>Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :</li> <li> - <pre class="brush: js" dir="rtl">typeof myInt; + <pre class="brush: js">typeof myInt; typeof myFloat;</pre> </li> <li><code>"number"</code> est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !</li> @@ -168,7 +168,7 @@ myNumber + 3;</pre> </table> <div class="note"> -<p><strong>Note </strong>: Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.</p> +<p><strong>Note :</strong> Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.</p> </div> <p>Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console des outils de développement JavaScript</a> ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.</p> @@ -213,7 +213,7 @@ num2 + num1 / 8 + 2;</pre> <p>Essayez-le et voyez.</p> <div class="note"> -<p><strong>Note </strong>: La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#operator_precedence">Expressions and operators</a>.</p> +<p><strong>Note :</strong> La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#operator_precedence">Expressions and operators</a>.</p> </div> <h2 id="Opérateurs_dincrémentation_et_de_décrémentation">Opérateurs d'incrémentation et de décrémentation</h2> @@ -223,7 +223,7 @@ num2 + num1 / 8 + 2;</pre> <pre class="brush: js">guessCount++;</pre> <div class="note"> -<p><strong>Note</strong> : Ces opérateurs sont couramment utilisés dans des <a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration">boucles ;</a> nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.</p> +<p><strong>Note :</strong> Ces opérateurs sont couramment utilisés dans des <a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration">boucles ;</a> nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.</p> </div> <p>Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :</p> @@ -246,7 +246,7 @@ num2--; num2;</pre> <div class="note"> -<p><strong>Note </strong>: En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable <em>puis</em> renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec <code>++num1</code> et <code>--num2</code>.</p> +<p><strong>Note :</strong> En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable <em>puis</em> renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec <code>++num1</code> et <code>--num2</code>.</p> </div> <h2 id="Opérateurs_dassignation">Opérateurs d'assignation</h2> @@ -262,11 +262,11 @@ x = y; // x contient maintenant la même valeur que y, 4</pre> <table class="standard-table"> <thead> <tr> - <th scope="col" style="width: 13%;">Opérateur</th> - <th scope="col" style="width: 17%;">Nom</th> - <th scope="col" style="width: 40%;">But</th> - <th scope="col" style="width: 12%;">Exemple</th> - <th scope="col" style="width: 18%;">Raccourci pour</th> + <th scope="col">Opérateur</th> + <th scope="col">Nom</th> + <th scope="col">But</th> + <th scope="col">Exemple</th> + <th scope="col">Raccourci pour</th> </tr> </thead> <tbody> @@ -318,7 +318,7 @@ var y = 4; // y contient la valeur 4 x *= y; // x contient maintenant la valeur 12</pre> <div class="note"> -<p><strong>Note </strong>: Il y a des tas d'<a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators">autres opérateurs d'assignation disponibles</a>, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.</p> +<p><strong>Note :</strong> Il y a des tas d'<a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators">autres opérateurs d'assignation disponibles</a>, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.</p> </div> <h2 id="Apprentissage_actif_dimensionner_une_boîte_à_canevas">Apprentissage actif : dimensionner une boîte à canevas</h2> @@ -394,7 +394,7 @@ x *= y; // x contient maintenant la valeur 12</pre> </table> <div class="note"> -<p><strong>Note </strong>: Vous verrez peut‑être certaines personnes utiliser <code>==</code> et <code>!=</code> pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de <code>===</code>/<code>!==</code>. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs <em>et</em> des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.</p> +<p><strong>Note :</strong> Vous verrez peut‑être certaines personnes utiliser <code>==</code> et <code>!=</code> pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de <code>===</code>/<code>!==</code>. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs <em>et</em> des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.</p> </div> <p>Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur <code>true</code>/<code>false</code> — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :</p> @@ -434,7 +434,7 @@ function updateBtn() { <p>Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction <code>updateBtn()</code>. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.</p> <div class="note"> -<p><strong>Note </strong>: Un contrôle qui alterne entre deux états porte généralement le nom de <strong>toggle</strong> (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.</p> +<p><strong>Note :</strong> Un contrôle qui alterne entre deux états porte généralement le nom de <strong>toggle</strong> (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -444,7 +444,7 @@ function updateBtn() { <p>Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.</p> <div class="note"> -<p><strong>Note</strong> : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux <a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a> et aux <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a>.</p> +<p><strong>Note :</strong> Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux <a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a> et aux <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a>.</p> </div> <p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p> diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html index ebc7230da3..298aef0296 100644 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html @@ -7,9 +7,9 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator <div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !</p> +<p>Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/First_steps/Silly_story_generator </ul> <div class="note"> -<p><strong>Note</strong>: Vous pouvez aussi utiliser un site tel que que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <code><script></code> au sein de la page HTML.</p> +<p><strong>Note :</strong> Vous pouvez aussi utiliser un site tel que que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <code><script></code> au sein de la page HTML.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> diff --git a/files/fr/learn/javascript/first_steps/strings/index.html b/files/fr/learn/javascript/first_steps/strings/index.html index 16cf1c51ce..457cf98379 100644 --- a/files/fr/learn/javascript/first_steps/strings/index.html +++ b/files/fr/learn/javascript/first_steps/strings/index.html @@ -1,25 +1,15 @@ --- title: Gérer du texte — les chaînes de caractères en JavaScript slug: Learn/JavaScript/First_steps/Strings -tags: - - Article - - Attacher - - Codage - - Débutant - - Guide - - Guillemets - - JavaScript - - chaînes - - concatenation translation_of: Learn/JavaScript/First_steps/Strings --- <div>{{LearnSidebar}}</div> <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.</p> +<p>Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -40,12 +30,9 @@ translation_of: Learn/JavaScript/First_steps/Strings <h2 id="Chaînes_de_caractères_—_les_bases">Chaînes de caractères — les bases</h2> -<p>À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">l'ouvrir</a> dans un onglet ou une fenêtre séparée, ou bien utiliser celle de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">l'explorateur, </a>comme vous préférez).</p> +<p>À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">l'ouvrir</a> dans un onglet ou une fenêtre séparée, ou bien utiliser celle de <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">l'explorateur, </a>comme vous préférez).</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -150,9 +137,8 @@ translation_of: Learn/JavaScript/First_steps/Strings </script> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Chaînes_de_caractères_—_les_bases', '100%', 300) }}</p> <h3 id="Créer_une_chaîne_de_texte">Créer une chaîne de texte</h3> @@ -202,7 +188,7 @@ dblSgl;</pre> <pre class="brush: js">let bigmouth = 'Je n\'ai pas eu droit à prendre place...'; bigmouth;</pre> -<p>Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. <code>\"</code>, et il y a certains codes spéciaux à côté. Voyez <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Notations d'échappement</a> pour plus de détails.</p> +<p>Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. <code>\"</code>, et il y a certains codes spéciaux à côté. Voyez <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation">Notations d'échappement</a> pour plus de détails.</p> <h2 id="Concaténation_de_chaînes">Concaténation de chaînes</h2> @@ -224,7 +210,7 @@ response;</pre> </ol> <div class="note"> -<p><strong>Note </strong>: Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle <strong>chaîne littérale</strong>.</p> +<p><strong>Note :</strong> Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle <strong>chaîne littérale</strong>.</p> </div> <h3 id="Concaténation_dans_un_contexte">Concaténation dans un contexte</h3> @@ -240,7 +226,7 @@ button.onclick = function() { alert('Hello ' + name + ', sympa de vous voir !'); }</pre> -<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}</p> +<p>{{ EmbedLiveSample('Concaténation_dans_un_contexte', '100%', 50) }}</p> <p>Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.prompt()")}}, qui demande à l'utilisateur de répondre à une question par l'intermédiaire d'une boîte de dialogue, puis qui stocke le texte entré dans une variable donnée — dans ce cas <code>name</code>. En ligne 5, nous nous servons de la fonction {{domxref("Window.alert()", "Window.alert()")}} pour afficher un dialogue contenant une chaîne assemblée à partir de deux chaînes littérales et de la variable <code>name</code>, par concaténation.</p> @@ -262,7 +248,7 @@ typeof myDate;</pre> let myNum = Number(myString); typeof myNum;</pre> </li> - <li>D'autre part, tout nombre possède une méthode nommée <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> qui le convertit en chaîne équivalente. Essayez : + <li>D'autre part, tout nombre possède une méthode nommée <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> qui le convertit en chaîne équivalente. Essayez : <pre class="brush: js">let myNum = 123; let myString = myNum.toString(); typeof myString;</pre> diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html index d41702445b..a281723a68 100644 --- a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html +++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html @@ -14,13 +14,13 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux <p>L'objectif de ce test est d'évaluer votre compréhension <a href="/fr/docs/Learn/JavaScript/First_steps/Arrays">de l'article sur les tableaux en JavaScript (<i>arrays</i>)</a>.</p> -<div class="notecard note"> -<p><strong>Note</strong> : Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a> afin de travailler sur ces tâches.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a> afin de travailler sur ces tâches.</p> <p>Si vous vous retrouvez bloqué·e, vous pouvez demander de l'aide (voir <a href="#assessment_or_further_help">la section à ce sujet en fin de page</a>).</p> </div> -<div class="notecard note"> -<p><strong>Note</strong> : Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).</p> +<div class="note"> +<p><strong>Note :</strong> Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).</p> </div> <h2 id="arrays_1">Tableaux - Exercice 1</h2> @@ -33,8 +33,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux <p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}</p> -<div class="notecard note"> -<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays1-download.html">Téléchargez le code initial pour cet exercice</a> afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays1-download.html">Téléchargez le code initial pour cet exercice</a> afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.</p> </div> <h2 id="arrays_2">Tableaux - Exercice 2</h2> @@ -51,8 +51,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux <p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}</p> -<div class="notecard note"> -<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays2-download.html">Téléchargez le code initial pour cet exercice</a> afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays2-download.html">Téléchargez le code initial pour cet exercice</a> afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.</p> </div> <h2 id="Arrays_3">Tableaux - Exercice 3</h2> @@ -70,8 +70,8 @@ original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux <p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}</p> -<div class="notecard note"> -<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays3-download.html">Téléchargez le code initial pour cet exercice</a> afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays3-download.html">Téléchargez le code initial pour cet exercice</a> afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.</p> </div> <h2 id="assessment_or_further_help">Recevoir une évaluation ou de l'aide</h2> diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html index f36b9f5cb2..f2e52aa169 100644 --- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html @@ -21,9 +21,9 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.</p> +<p>À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -38,7 +38,7 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile <h2 id="Les_chaînes_de_caractères_sont_des_objets">Les chaînes de caractères sont des objets</h2> -<p id="Useful_string_methods">Nous l'avons déjà dit, et nous le redirons — <em>tout</em> est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :</p> +<p>Nous l'avons déjà dit, et nous le redirons — <em>tout</em> est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :</p> <pre class="brush: js">let string = 'Ceci est une chaîne';</pre> @@ -46,12 +46,9 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile <p><strong>Avant que votre cervelle ne commence à bouillir, pas de panique !</strong> Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez certaines assez souvent. Nous allons les voir maintenant.</p> -<p>Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés, ou utiliser la <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console de développement du navigateur</a> si vous préférez).</p> +<p>Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés, ou utiliser la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console de développement du navigateur</a> si vous préférez).</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -152,9 +149,8 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile </script> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Les_chaînes_de_caractères_sont_des_objets', '100%', 300) }}</p> <h3 id="Trouver_la_longueur_dune_chaîne">Trouver la longueur d'une chaîne</h3> @@ -184,9 +180,6 @@ browserType.length;</pre> <pre class="brush: js">browserType.indexOf('zilla');</pre> La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».</li> -</ol> - -<ol start="2"> <li>On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : <pre class="brush: js">browserType.indexOf('vanilla');</pre> Cela doit vous donner <code>-1</code> comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.<br> @@ -206,7 +199,7 @@ browserType.length;</pre> </ol> <div class="note"> -<p><strong>Note</strong> : Le second paramètre de <code>slice()</code> est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.</p> +<p><strong>Note :</strong> Le second paramètre de <code>slice()</code> est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.</p> </div> <h3 id="Changer_la_casse">Changer la casse</h3> @@ -245,10 +238,7 @@ radData.toUpperCase();</pre> <li>Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode <em>n'est pas égal</em> à un certain résultat.</li> </ol> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="output" style="min-height: 125px;"> +<pre class="brush: html hidden"><div class="output" style="min-height: 125px;"> <ul> @@ -284,7 +274,7 @@ for (var i = 0; i < greetings.length; i++) { </div> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -308,9 +298,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.inner textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 490) }}</p> +<p>{{ EmbedLiveSample('Filtrer_des_messages_de_vœux', '100%', 490) }}</p> <h3 id="Remettre_les_majuscules">Remettre les majuscules</h3> @@ -324,13 +313,10 @@ window.addEventListener('load', updateCode); </ol> <div class="note"> -<p><strong>Note</strong>: Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.</p> +<p><strong>Note :</strong> Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.</p> </div> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><div class="output" style="min-height: 125px;"> +<pre class="brush: html hidden"><div class="output" style="min-height: 125px;"> <ul> @@ -359,7 +345,7 @@ for(var i = 0; i < cities.length; i++) { </div> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -383,9 +369,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.inner textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 450) }}</p> +<p>{{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }}</p> <h3 id="Créer_de_nouvelles_chaînes_à_partir_de_morceaux">Créer de nouvelles chaînes à partir de morceaux</h3> @@ -407,10 +392,7 @@ window.addEventListener('load', updateCode); <li>Changer la valeur de la variable <code>result</code> pour qu'elle soit égale à la chaîne finale, plutôt qu'à <code>input</code>.</li> </ol> -<div class="hidden"> -<h6 id="Playable_code_3">Playable code 3</h6> - -<pre class="brush: html"><div class="output" style="min-height: 125px;"> +<pre class="brush: html hidden"><div class="output" style="min-height: 125px;"> <ul> @@ -444,7 +426,7 @@ for (var i = 0; i < stations.length; i++) { </div> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -469,9 +451,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.inner textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_3', '100%', 485) }}</p> +<p>{{ EmbedLiveSample('Créer_de_nouvelles_chaînes_à_partir_de_morceaux', '100%', 485) }}</p> <h2 id="Conclusion">Conclusion</h2> diff --git a/files/fr/learn/javascript/first_steps/variables/index.html b/files/fr/learn/javascript/first_steps/variables/index.html index 35104fcaeb..dacd075396 100644 --- a/files/fr/learn/javascript/first_steps/variables/index.html +++ b/files/fr/learn/javascript/first_steps/variables/index.html @@ -1,34 +1,22 @@ --- title: Stocker les informations nécessaires — les variables slug: Learn/JavaScript/First_steps/Variables -tags: - - Booléens - - Declaration - - Initialisation - - JavaScript - - Mise à jour - - Nombres - - Objets - - Tableaux - - Typage faible - - Variables - - chaînes translation_of: Learn/JavaScript/First_steps/Variables --- <div>{{LearnSidebar}}</div> <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.</p> +<p>Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.</p> -<table class="learn-box"> +<table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Se familiariser avec l'usage élémentaire des variables en JavaScript.</td> </tr> </tbody> @@ -36,13 +24,13 @@ translation_of: Learn/JavaScript/First_steps/Variables <h2 id="Outils_nécessaires">Outils nécessaires</h2> -<p>Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Les outils de développement du navigateur</a> pour plus d'informations sur la manière d'accéder à ces outils).</p> +<p>Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Les outils de développement du navigateur</a> pour plus d'informations sur la manière d'accéder à ces outils).</p> <p>Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.</p> <h2 id="Quest_ce_quune_variable">Qu'est ce qu'une variable ?</h2> -<p>Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :</p> +<p>Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :</p> <pre class="brush: html"><button>Pressez moi</button></pre> @@ -53,7 +41,7 @@ button.onclick = function() { alert('Salut ' + name + ', sympa de vous voir !'); }</pre> -<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50) }}</p> +<p>{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}</p> <p>Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.</p> @@ -79,27 +67,24 @@ if (name === 'Adam') { <p>Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.</p> -<p>Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.</p> +<p>Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.</p> </div> -<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> +<p><img alt="" src="boxes.png"></p> <h2 id="Déclarer_une_variable">Déclarer une variable</h2> -<p>Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons <em>déclarer la variable</em>. Pour ce faire, nous saisissons le mot‑clé <code>var</code> ou <code>let</code> suivi du nom que vous voulez donner à la variable :</p> +<p>Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons <em>déclarer la variable</em>. Pour ce faire, nous saisissons le mot‑clé <code>var</code> ou <code>let</code> suivi du nom que vous voulez donner à la variable :</p> <pre class="brush: js">let myName; let myAge;</pre> <p>Dans ces lignes, nous venons de créer deux variables nommées respectivement <code>myName</code> et <code>myAge</code>. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrez cette console</a> soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -204,12 +189,11 @@ let myAge;</pre> </script> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}</p> <div class="note"> -<p><strong>Note </strong>: En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (<code>;</code>) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.</p> +<p><strong>Note :</strong> En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (<code>;</code>) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.</p> </div> <p>Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple</p> @@ -222,22 +206,22 @@ myAge;</pre> <pre class="brush: js">scoobyDoo;</pre> <div class="note"> -<p><strong>Note </strong>: Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, <em>ne pas exister</em> correspond à l'absence de boîte ; <em>valeur indéfinie</em> correspond à une boîte vide.</p> +<p><strong>Note :</strong> Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, <em>ne pas exister</em> correspond à l'absence de boîte ; <em>valeur indéfinie</em> correspond à une boîte vide.</p> </div> <h2 id="Initialisation_dune_variable">Initialisation d'une variable</h2> -<p>Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (<code>=</code>), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :</p> +<p>Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (<code>=</code>), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :</p> <pre class="brush: js">myName = 'Chris'; myAge = 37;</pre> -<p>Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :</p> +<p>Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :</p> <pre class="brush: js">myName; myAge;</pre> -<p>Il est possible de déclarer et initialiser une variable en même temps, comme ceci :</p> +<p>Il est possible de déclarer et initialiser une variable en même temps, comme ceci :</p> <pre class="brush: js">let myDog = 'Rover';</pre> @@ -264,11 +248,11 @@ logName(); var myName; </pre> -<div class="blockIndicator note"> -<p>Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.</p> +<div class="note"> +<p><strong>Note :</strong> l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.</p> </div> -<p>Ce processus se nomme <strong>«</strong> <strong>hoisting »</strong> <span class="st">(en français, "hissage") </span>— lisez <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> pour plus de précisions sur ce sujet.</p> +<p>Ce processus se nomme <strong>«</strong> <strong>hoisting »</strong> (en français, "hissage") — lisez <a href="/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> pour plus de précisions sur ce sujet.</p> <p>Le hissage ne fonctionne plus avec <code>let</code>. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.</p> @@ -296,7 +280,7 @@ myName = 'Bob' ;</pre> <h2 id="Mise_à_jour_dune_variable">Mise à jour d'une variable</h2> -<p>Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :</p> +<p>Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :</p> <pre class="brush: js">myName = 'Bob'; myAge = 40;</pre> @@ -316,10 +300,10 @@ myAge = 40;</pre> </ul> <div class="note"> -<p><strong>Note </strong>: Une liste exhaustive des mots réservés est proposée dans la page <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p> +<p><strong>Note :</strong> Une liste exhaustive des mots réservés est proposée dans la page <a href="/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">Lexical grammar — keywords</a>.</p> </div> -<p>Exemples de noms corrects :</p> +<p>Exemples de noms corrects :</p> <pre class="example-good">age myAge @@ -341,9 +325,9 @@ document skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman </pre> -<p>Parmi ces noms, les suivants déclenchent une <code>SyntaxError</code> :</p> +<p>Parmi ces noms, les suivants déclenchent une <code>SyntaxError</code> :</p> -<pre class="example-invalid">1 //la variable commence par un chiffre +<pre class="brush: js example-bad">1 //la variable commence par un chiffre var //mot réservé document //mot réservé </pre> @@ -370,11 +354,11 @@ document //mot réservé <h3 id="Booléens">Booléens</h3> -<p>Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: <code>true</code> ou <code>false</code>. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :</p> +<p>Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: <code>true</code> ou <code>false</code>. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :</p> <pre class="brush: js">var iAmAlive = true;</pre> -<p>Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :</p> +<p>Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :</p> <pre class="brush: js">var test = 6 < 3;</pre> @@ -382,17 +366,17 @@ document //mot réservé <h3 id="Tableaux">Tableaux</h3> -<p>Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :</p> +<p>Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :</p> <pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim']; var myNumberArray = [10,15,40];</pre> -<p>Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :</p> +<p>Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :</p> <pre class="brush: js">myNameArray[0]; // renverra 'Chris' myNumberArray[2]; // renverra 40</pre> -<p>La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.</p> +<p>La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.</p> <p>Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.</p> @@ -400,11 +384,11 @@ myNumberArray[2]; // renverra 40</pre> <p>En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.</p> -<p>Entrez la ligne suivant dans la console de votre explorateur :</p> +<p>Entrez la ligne suivant dans la console de votre explorateur :</p> <pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> -<p>Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :</p> +<p>Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :</p> <pre class="brush: js">dog.name</pre> @@ -414,11 +398,11 @@ myNumberArray[2]; // renverra 40</pre> <p>JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).</p> -<p>Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :</p> +<p>Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :</p> <pre class="brush: js">var myString = 'Hello';</pre> -<p>Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :</p> +<p>Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :</p> <pre class="brush: js">var myNumber = '500'; // oops, c'est toujours une chaîne typeof(myNumber); diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html index a3bac2d0fb..5e37499c73 100644 --- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html @@ -246,7 +246,6 @@ function updateName() { <p>Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :</p> -<div id="inline_js_example"> <pre class="brush: js example-bad">function createParagraph() { let para = document.createElement('p'); para.textContent = 'Vous avez cliqué !'; @@ -254,16 +253,17 @@ function updateName() { }</pre> <pre class="brush: html example-bad"><button onclick="createParagraph()">Cliquez-moi!</button></pre> -</div> <p>Vous pouvez essayer cette version dans la démonstration ci-dessous.</p> -<p>{{ EmbedLiveSample('inline_js_example', '100%', 150) }}</p> +<p>{{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }}</p> <p>Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l'élément {{htmlelement("button")}} a un handler <code>onclick</code> en ligne pour déclencher l'exécution de la fonction à la pression du bouton.</p> <p><strong>Évitez cependant de faire cela.</strong> C'est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d'être inefficace. Dans cette méthode, on doit inclure l'attribut <code>onclick="createParagraph()"</code> sur chaque bouton où le JavaScript doit s'appliquer.</p> +<h3 id="En_JavaScript_pur">En JavaScript pur</h3> + <p>Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge :</p> <pre class="brush: js">let buttons = document.querySelectorAll('button'); @@ -311,13 +311,10 @@ document.addEventListener("DOMContentLoaded", function() { <p>Les scripts asynchrones téléchargeront le script sans bloquer le rendu de la page et l'exécuteront dès que le téléchargement du script sera terminé. Vous n'obtenez aucune garantie que les scripts s'exécutent dans un ordre spécifique, mais seulement qu'ils n'empêcheront pas le reste de la page de s'afficher. Il est préférable d'utiliser <code>async</code> lorsque les scripts de la page s'exécutent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.</p> -<figure> - <img src="async-defer.jpg" alt="async vs defer" > - <figcaption>Image de <a href="https://html.spec.whatwg.org/images/asyncdefer.svg" target="_blank" >la spécification HTML</a>, copiée et rognée selon les termes de la licence <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>. - </figcaption> -</figure> +<img src="async-defer.jpg" alt="async vs defer" > -<br> +<p>Image de <a href="https://html.spec.whatwg.org/images/asyncdefer.svg" target="_blank" >la spécification HTML</a>, copiée et rognée selon les termes de la licence <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>. +</p> <p>Par exemple, si vous avez les éléments de script suivants :</p> diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html index 004d4a67a7..f8ec006003 100644 --- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html +++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html @@ -18,9 +18,9 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.</p> +<p>Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.</p> -<table class="learn-box standard-table" style="height: 148px; width: 672px;"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -58,7 +58,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong </ol> <div class="note"> -<p><strong>Note </strong>: Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.</p> +<p><strong>Note :</strong> Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.</p> </div> <p>À ce stade, consultons la <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">console du développeur</a> pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous.</p> @@ -68,7 +68,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">console JavaScript</a> <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">des outils de développement</a> (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !</p> <ol> - <li>Allez à l'onglet dans lequel est affiché <code>number-game-errors.html</code>, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent : <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>Allez à l'onglet dans lequel est affiché <code>number-game-errors.html</code>, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent : <img alt="" src="not-a-function.png"></li> <li>C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons : <ul> <li>Une croix rouge indiquant que c'est une erreur.</li> @@ -81,23 +81,25 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <li>En examinant la ligne 86 dans l'éditeur de code, nous voyons : <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre> </li> - <li>Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour "mdn <em>nom-de-fonctionnalité</em>" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li> + <li>Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour "mdn <em>nom-de-fonctionnalité</em>" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li> <li>Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer <code>addeventListener</code> par <code>addEventListener</code> corrigera cela. Faisons‑le maintenant.</li> </ol> <div class="note"> -<p><strong>Note</strong> : Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> pour plus de précisions à propos de cette erreur.</p> +<p><strong>Note :</strong> Voyez la page relative à <a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> pour plus de précisions à propos de cette erreur.</p> </div> <h3 id="Erreurs_de_syntaxe_deuxième_tour">Erreurs de syntaxe : deuxième tour</h3> <ol> <li>Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.</li> - <li>Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur ! <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur ! <img alt="" src="variable-is-null.png"></li> <li>Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78. - <div class="note"><strong>Note</strong> : <code><a href="/en-US/docs/Glossary/Null">Null</a></code> est une valeur spéciale signifiant "rien" ou "aucune valeur". Or <code>lowOrHi</code> a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.</div> + <div class="note"> + <p><strong>Note :</strong> <code><a href="/fr/docs/Glossary/Null">Null</a></code> est une valeur spéciale signifiant "rien" ou "aucune valeur". Or <code>lowOrHi</code> a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.</p></div> - <div class="note"><strong>Note </strong>: Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans <code>checkGuess() { ... }</code>). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction <code>checkGuess()</code> soit lancée à la ligne 86.</div> + <div class="note"> + <p><strong>Note :</strong> Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans <code>checkGuess() { ... }</code>). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction <code>checkGuess()</code> soit lancée à la ligne 86.</p></div> </li> <li>Regardez à la ligne 78, vous verrez ce code : <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre> @@ -109,11 +111,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <pre class="brush: js">console.log(lowOrHi);</pre> <div class="note"> - <p><strong>Note </strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de <code>lowOrHi</code> que nous avons essayé de définir à la ligne 48.</p> + <p><strong>Note :</strong> <code><a href="/fr/docs/Web/API/Console/log">console.log()</a></code> est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de <code>lowOrHi</code> que nous avons essayé de définir à la ligne 48.</p> </div> </li> - <li>Enregistrez et actualisez la page, et vous verrez le résultat de <code>console.log()</code> sur la console. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> C'est sûr, la valeur de <code>lowOrHi</code> est <code>null</code> à ce niveau ; il y a bien un problème à la ligne 48.</li> - <li>Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question : + <li>Enregistrez et actualisez la page, et vous verrez le résultat de <code>console.log()</code> sur la console. <img alt="" src="console-log-output.png"> C'est sûr, la valeur de <code>lowOrHi</code> est <code>null</code> à ce niveau ; il y a bien un problème à la ligne 48.</li> + <li>Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode <code><a href="/fr/docs/Web/API/Document/querySelector">document.querySelector()</a></code> pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question : <pre class="brush: js"><p class="lowOrHi"></p></pre> </li> <li>Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode <code>querySelector()</code> en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons <code>lowOrHi</code> en <code>.lowOrHi</code> à la ligne 48.</li> @@ -121,7 +123,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong </ol> <div class="note"> -<p><strong>Note</strong> : Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> pour plus de précisions à propos de cette erreur.</p> +<p><strong>Note :</strong> Voyez la page relative à <a href="/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> pour plus de précisions à propos de cette erreur.</p> </div> <h3 id="Erreurs_de_syntaxe_troisième_tour">Erreurs de syntaxe : troisième tour</h3> @@ -154,11 +156,11 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <h3 id="Travaillons_la_logique">Travaillons la logique</h3> -<p>Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.</p> +<p>Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.</p> <pre class="brush: js">Math.random()</pre> -<p>Puis, nous passons le résultat de l'appel de <code>Math.random()</code> à <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :</p> +<p>Puis, nous passons le résultat de l'appel de <code>Math.random()</code> à <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :</p> <pre>Math.floor(Math.random()) + 1</pre> @@ -189,7 +191,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation (<code>=</code>) — qui fixe une valeur donnée à une variable — avec l'opérateur (<code>===</code>) qui teste la stricte égalité de deux valeurs, et renvoie un résultat <code>true</code>/<code>false</code> (vrai/faux).</p> <div class="note"> -<p><strong>Note</strong> : Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> pour plus de précisions à propos de cette erreur.</p> +<p><strong>Note :</strong> Voyez la page relative à <a href="/fr/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> pour plus de précisions à propos de cette erreur.</p> </div> <h3 id="Le_programme_dit_que_vous_avez_gagné_quelle_que_soit_votre_suggestion.">Le programme dit que vous avez gagné quelle que soit votre suggestion.</h3> @@ -209,7 +211,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>Cette erreur est triviale — elle indique en général que vous avez oublié une parenthèse fermante à la fin de l'appel d'une fonction ou d'une méthode.</p> <div class="note"> -<p><strong>Note</strong>: Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> pour plus de précisions à ce propos.</p> +<p><strong>Note :</strong> Voyez la page relative à <a href="/fr/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> pour plus de précisions à ce propos.</p> </div> <h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> @@ -235,7 +237,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <p>Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut !</p> <div class="note"> -<p><strong>Note </strong>: Voyez les pages relatives à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> et <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> pour plus de précisions à ce propos.</p> +<p><strong>Note :</strong> Voyez les pages relatives à <a href="/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> et <a href="/fr/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> pour plus de précisions à ce propos.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -246,7 +248,7 @@ translation_of: Learn/JavaScript/First_steps/What_went_wrong <div> <ul> - <li>Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li> + <li>Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez <a href="/fr/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li> <li>Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide ! Demandez‑la sur le fil de discussion <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> ou par le canal IRC de <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile.</li> </ul> </div> diff --git a/files/fr/learn/javascript/index.html b/files/fr/learn/javascript/index.html index cc1ac2b10b..77f8f6f168 100644 --- a/files/fr/learn/javascript/index.html +++ b/files/fr/learn/javascript/index.html @@ -12,16 +12,16 @@ original_slug: Apprendre/JavaScript --- <p>{{LearnSidebar}}</p> -<p class="summary">{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.</p> +<p>{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.</p> <h2 id="Parcours_d'apprentissage">Parcours d'apprentissage</h2> -<p>JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que <a href="https://developer.mozilla.org/fr/Apprendre/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a>. <span>Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :</span></p> +<p>JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que <a href="/fr/Apprendre/HTML">HTML</a> et <a href="/fr/Apprendre/CSS">CSS</a>. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :</p> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a></li> + <li><a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a></li> + <li><a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a></li> </ul> <p>Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.</p> @@ -29,8 +29,8 @@ original_slug: Apprendre/JavaScript <p>Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :</p> <ul> - <li>JavaScript en profondeur, comme enseigné dans notre <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API">API web</a></li> + <li>JavaScript en profondeur, comme enseigné dans notre <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li> + <li><a href="/fr/docs/Web/API">API web</a></li> </ul> <h2 id="Modules">Modules</h2> @@ -38,24 +38,24 @@ original_slug: Apprendre/JavaScript <p>Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a></dt> <dd>Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.</dd> - <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks">JavaScript les blocs</a></dt> + <dt><a href="/fr/Apprendre/JavaScript/Building_blocks">JavaScript les blocs</a></dt> <dd>Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets JavaScript</a></dt> <dd>En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Client-side_web_APIs">API Web côté client</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs">API Web côté client</a></dt> <dd>Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.</dd> </dl> <h2 id="Résoudre_les_problèmes_JavaScript_courants">Résoudre les problèmes JavaScript courants</h2> -<p><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a> fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.</p> +<p><a href="/fr/Apprendre/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a> fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.</p> <h2 id="Voir_aussi">Voir aussi</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">JavaScript sur MDN</a></dt> + <dt><a href="/fr/docs/Web/JavaScript">JavaScript sur MDN</a></dt> <dd>Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.</dd> <dt><a href="https://www.youtube.com/user/codingmath">Codage des mathématiques</a></dt> <dd>Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html index 5bd3866baa..70f35b3642 100644 --- a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -18,9 +18,9 @@ original_slug: >- <div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.</p> +<p>Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -38,7 +38,7 @@ original_slug: >- <p>Pour commencer, faite une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> de l'article précédent, dans un nouveau dossier.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <code><script></code>/<code><style></code> dans votre code HTML.</p> +<p><strong>Note :</strong> Vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <code><script></code>/<code><style></code> dans votre code HTML.</p> </div> <h2 id="Le_projet_en_bref">Le projet en bref</h2> @@ -47,7 +47,7 @@ original_slug: >- <p>Ce screenshot vous donne une idée du résultat final:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="bouncing-evil-circle.png"></p> <ul> </ul> @@ -102,8 +102,8 @@ original_slug: >- <p>Cette méthode doit avoir la même fonction que celle de <code>Ball()</code>: soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction <code>Ball.prototype.draw</code>. Puis appliquez les modifications suivantes:</p> <ul> - <li>On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> et <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> pour <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> et <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li> - <li>On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> à ctx après l'appel à la fonction <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (avec une valeur de 3).</li> + <li>On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> et <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> pour <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> et <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li> + <li>On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> à ctx après l'appel à la fonction <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (avec une valeur de 3).</li> </ul> <h4 id="checkBounds()"><code>checkBounds()</code></h4> @@ -132,7 +132,7 @@ window.onkeydown = function(e) { } }</pre> -<p>Quand une touche est enfoncée, la propriété <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.</p> +<p>Quand une touche est enfoncée, la propriété <a href="/fr/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.</p> <ul> <li>Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé.</li> @@ -199,11 +199,11 @@ window.onkeydown = function(e) { <h2 id="Dans_ce_Module">Dans ce Module</h2> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> </ul> diff --git a/files/fr/learn/javascript/objects/basics/index.html b/files/fr/learn/javascript/objects/basics/index.html index 6d7276b7b1..483ebba0fc 100644 --- a/files/fr/learn/javascript/objects/basics/index.html +++ b/files/fr/learn/javascript/objects/basics/index.html @@ -15,9 +15,9 @@ translation_of: Learn/JavaScript/Objects/Basics <div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.</p> +<p>Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -38,15 +38,15 @@ translation_of: Learn/JavaScript/Objects/Basics <p>Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :</p> -<pre class="brush: js notranslate">var personne = {};</pre> +<pre class="brush: js">var personne = {};</pre> <p>Désormais ouvrez la <a href="/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur">console JavaScript</a> de votre navigateur, saisissez <code>personne</code> à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant :</p> -<pre class="brush: js notranslate">[object Object]</pre> +<pre class="brush: js">[object Object]</pre> <p>Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :</p> -<pre class="brush: js notranslate">var personne = { +<pre class="brush: js">var personne = { nom: ['Jean', 'Martin'], age: 32, sexe: 'masculin', @@ -62,7 +62,7 @@ translation_of: Learn/JavaScript/Objects/Basics <p>Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie <code>input</code> :</p> -<pre class="brush: js notranslate">personne.nom +<pre class="brush: js">personne.nom personne.nom[0] personne.age personne.interets[1] @@ -79,7 +79,7 @@ personne.salutation()</pre> <p>Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :</p> -<pre class="brush: js notranslate">var monObjet = { +<pre class="brush: js">var monObjet = { nomDuMembre1: valeurDuMembre1, nomDuMembre2: valeurDuMembre2, nomDuMembre3: valeurDuMembre3 @@ -99,7 +99,7 @@ personne.salutation()</pre> <p>Le nom de l'objet (<code>personne</code>) agit comme un <strong>espace de noms</strong> (ou <em>namespace</em> en anglais) — il doit être entré en premier pour accéder aux membres <strong>encapsulés</strong> dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :</p> -<pre class="brush: js notranslate">personne.age +<pre class="brush: js">personne.age personne.interets[1] personne.bio()</pre> @@ -107,28 +107,28 @@ personne.bio()</pre> <p>Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété <code>nom</code> du membre et la faire passer de</p> -<pre class="brush: js notranslate">nom: ['Jean', 'Martin'],</pre> +<pre class="brush: js">nom: ['Jean', 'Martin'],</pre> <p>à</p> -<pre class="brush: js notranslate">nom : { +<pre class="brush: js">nom : { prenom: 'Jean', nomFamille: 'Martin' },</pre> <p>Ici, nous avons bien créé un <strong>sous-espace de noms</strong>. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :</p> -<pre class="brush: js notranslate">personne.nom.prenom +<pre class="brush: js">personne.nom.prenom personne.nom.nomFamille</pre> <p><strong>Important </strong>: à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :</p> -<pre class="brush: js notranslate">nom[0] +<pre class="brush: js">nom[0] nom[1]</pre> <p>en</p> -<pre class="brush: js notranslate">nom.prenom +<pre class="brush: js">nom.prenom nom.nomFamille</pre> <p>sinon vos méthodes ne fonctionneront plus.</p> @@ -137,12 +137,12 @@ nom.nomFamille</pre> <p>Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :</p> -<pre class="brush: js notranslate">personne.age +<pre class="brush: js">personne.age personne.nom.prenom</pre> <p>Vous pouvez utiliser :</p> -<pre class="brush: js notranslate">personne['age'] +<pre class="brush: js">personne['age'] personne['nom']['prenom']</pre> <p>Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.</p> @@ -151,42 +151,42 @@ personne['nom']['prenom']</pre> <p>Jusqu'ici, nous avons vu comment <strong>accéder</strong> aux membres d'un objet. Vous pouvez aussi <strong>modifier</strong> la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :</p> -<pre class="brush: js notranslate">personne.age = 45 +<pre class="brush: js">personne.age = 45 personne['nom']['nomFamille'] = 'Rabuchon'</pre> <p>Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :</p> -<pre class="brush: js notranslate">personne.age +<pre class="brush: js">personne.age personne['nom']['nomFamille']</pre> <p>Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; <strong>vous pouvez aussi créer de nouveaux membres</strong>. Essayez ceci :</p> -<pre class="brush: js notranslate">personne['yeux'] = 'noisette' +<pre class="brush: js">personne['yeux'] = 'noisette' personne.auRevoir = function() { alert("Bye bye tout le monde !"); }</pre> <p>Vous pouvez maintenant tester vos nouveaux membres :</p> -<pre class="brush: js notranslate">personne['yeux'] +<pre class="brush: js">personne['yeux'] personne.auRevoir()</pre> <p>Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs <code>input</code>. On pourrait avoir ses valeurs comme ceci :</p> -<pre class="brush: js notranslate">var monNomDeDonnee = nomInput.value +<pre class="brush: js">var monNomDeDonnee = nomInput.value var maValeurDeDonnee = valeurNom.value</pre> <p>On peut alors ajouter le nom et la valeur du nouveau membre de l'objet <code>personne</code> comme ceci :</p> -<pre class="brush: js notranslate">personne[monNomDeDonnee] = maValeurDeDonnee</pre> +<pre class="brush: js">personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet <code>personne</code> :</p> -<pre class="brush: js notranslate">var monNomDeDonnee = 'hauteur' +<pre class="brush: js">var monNomDeDonnee = 'hauteur' var maValeurDeDonnee = '1.75m' personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément <code>input</code>) :</p> -<pre class="brush: js notranslate">personne.hauteur</pre> +<pre class="brush: js">personne.hauteur</pre> <p>Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.</p> @@ -194,7 +194,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :</p> -<pre class="brush: js notranslate">salutation: function() { +<pre class="brush: js">salutation: function() { alert('Bonjour! Je suis ' + this.nom.prenom + '.'); }</pre> @@ -202,7 +202,7 @@ personne[monNomDeDonnee] = maValeurDeDonnee</pre> <p>Essayons d'illustrer nos propos par une paire d'objet <code>personne</code> simplifiée :</p> -<pre class="brush: js notranslate">var personne1 = { +<pre class="brush: js">var personne1 = { nom: 'Christophe', salutation: function() { alert('Bonjour ! Je suis ' + this.nom + '.'); @@ -224,13 +224,13 @@ var personne2 = { <p>Ainsi, quand vous utilisez une méthode comme :</p> -<pre class="brush: js notranslate">maChaineDeCaracteres.split(',');</pre> +<pre class="brush: js">maChaineDeCaracteres.split(',');</pre> <p>Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de <code>String</code> et possède donc plusieurs méthodes/propriétés communes.</p> <p>Quand vous accédez au DOM (<em>Document Object Model</em> ou « modèle objet du document ») avec <code>document</code> et des lignes telles que :</p> -<pre class="brush: js notranslate">var monDiv = document.createElement('div'); +<pre class="brush: js">var monDiv = document.createElement('div'); var maVideo = document.querySelector('video');</pre> <p>Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de <code>Document</code> est créée, appelée <code>document</code> et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.</p> @@ -239,12 +239,12 @@ var maVideo = document.querySelector('video');</pre> <p>On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, <a href="/fr/docs/Web/API/Notifications_API">l'API Notifications</a> — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :</p> -<pre class="brush: js notranslate">var maNotification = new Notification('Bonjour !');</pre> +<pre class="brush: js">var maNotification = new Notification('Bonjour !');</pre> <p>Nous verrons les constructeurs dans un prochain article.</p> <div class="note"> -<p><strong>Note</strong> : On peut voir le mode de communication des objets comme un <strong>envoi de message</strong>. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.</p> +<p><strong>Note :</strong> On peut voir le mode de communication des objets comme un <strong>envoi de message</strong>. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.</p> </div> <h2 id="Résumé">Résumé</h2> diff --git a/files/fr/learn/javascript/objects/index.html b/files/fr/learn/javascript/objects/index.html index c388ee3b62..5c7aed54cd 100644 --- a/files/fr/learn/javascript/objects/index.html +++ b/files/fr/learn/javascript/objects/index.html @@ -18,52 +18,52 @@ translation_of: Learn/JavaScript/Objects <div>{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}</div> </div> -<p class="summary">En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets. </p> +<p>En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets. </p> <h2 id="Prérequis">Prérequis</h2> -<p>Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a> et <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction au CSS</a> avant de commencer avec le JavaScript.</p> +<p>Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a> et <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction au CSS</a> avant de commencer avec le JavaScript.</p> -<p>Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas avec JavaScript</a> et <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks">Les blocs de construction en JavaScript</a>.</p> +<p>Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas avec JavaScript</a> et <a href="/fr/Apprendre/JavaScript/Building_blocks">Les blocs de construction en JavaScript</a>.</p> <div class="note"> -<p><strong>Remarque</strong>: Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics">Les bases de JavaScript orienté objet</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases de JavaScript orienté objet</a></dt> <dd>Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.</dd> </dl> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet">JavaScript orienté objet pour les débutants</a><u> </u></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet">JavaScript orienté objet pour les débutants</a></dt> <dd> - <p style="margin-left: 36.0pt;">Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.</p> + <p>Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.</p> </dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Prototypes_Objet">Objets prototypes</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects/Prototypes_Objet">Objets prototypes</a></dt> <dd> - <p style="margin-left: 36.0pt;">Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.</p> + <p>Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.</p> </dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Heritage">L’héritage au sein de JavaScript</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects/Heritage">L’héritage au sein de JavaScript</a></dt> <dd> - <p style="margin-left: 36.0pt;">Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.</p> + <p>Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.</p> </dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JSON">Manipuler des données JSON</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects/JSON">Manipuler des données JSON</a></dt> <dd> - <p style="margin-left: 36.0pt;">JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.</p> + <p>JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.</p> </dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Object_building_practice">Pratiques sur la construction d’objet</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">Pratiques sur la construction d’objet</a></dt> <dd> - <p style="margin-left: 36.0pt;">Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.</p> + <p>Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.</p> </dd> </dl> <h2 id="Auto-évaluation">Auto-évaluation</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajoutez des fonctionnalités à notre démo des ballons bondissants</a></dt> + <dt><a href="/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajoutez des fonctionnalités à notre démo des ballons bondissants</a></dt> <dd>Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.</dd> </dl> diff --git a/files/fr/learn/javascript/objects/inheritance/index.html b/files/fr/learn/javascript/objects/inheritance/index.html index b54af2f529..ededf06c2e 100644 --- a/files/fr/learn/javascript/objects/inheritance/index.html +++ b/files/fr/learn/javascript/objects/inheritance/index.html @@ -106,19 +106,19 @@ original_slug: Learn/JavaScript/Objects/Heritage <p>Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction <code>call()</code>. Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :</p> -<pre><code>function Brick() { +<pre class="brush: js">function Brick() { this.width = 10; this.height = 20; -}</code></pre> +}</pre> <p>Vous pouvez hériter des propriétés <code>width</code> et <code>height</code> en procédant comme ceci (Mais également en suivant bien sûr les différentes étapes décrites ci dessous) :</p> -<pre><code>function BlueGlassBrick() { +<pre class="brush: js">function BlueGlassBrick() { Brick.call(this); this.opacity = 0.5; this.color = 'blue'; -}</code></pre> +}</pre> <p>Notez que nous n'avons spécifié que <code>this</code> au sein de <code>call()</code> — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres. </p> @@ -187,7 +187,7 @@ professeur1.saluer();Ffa</pre> <p>La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.</p> -<p>Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en charge les navigateurs moins récents.</p> +<p>Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir <a href="/fr/docs/Web/JavaScript/Reference/Classes">Classes</a>). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en charge les navigateurs moins récents.</p> <p>Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.</p> @@ -195,7 +195,7 @@ professeur1.saluer();Ffa</pre> <h2 id="Un_exercice_plus_complexe.">Un exercice plus complexe.</h2> -<p>Dans notre <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">section sur la programmation orientée objet</a> nous avons également inclus une classe <code>Etudiant</code> comme un concept qui hérite de toutes les fonctionnalités de la classe <code>Personne</code>, et qui a également une méthode <code>saluer()</code> differente de celle de <code>Personne</code> qui est beaucoup moins formelle que la méthode <code>saluer()</code> de <code>Professeur()</code>. Jetez un oeil à ce à quoi ressemble la méthode <code>saluer()</code> de la classe <code>Etudiant</code> dans cette section et essayez d'implémenter votre propre constructeur <code>Etudiant()</code> qui hérite de toutes les fonctionnalités de <code>Personne()</code> et la fonction <code>saluer()</code> différente.</p> +<p>Dans notre <a href="/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">section sur la programmation orientée objet</a> nous avons également inclus une classe <code>Etudiant</code> comme un concept qui hérite de toutes les fonctionnalités de la classe <code>Personne</code>, et qui a également une méthode <code>saluer()</code> differente de celle de <code>Personne</code> qui est beaucoup moins formelle que la méthode <code>saluer()</code> de <code>Professeur()</code>. Jetez un oeil à ce à quoi ressemble la méthode <code>saluer()</code> de la classe <code>Etudiant</code> dans cette section et essayez d'implémenter votre propre constructeur <code>Etudiant()</code> qui hérite de toutes les fonctionnalités de <code>Personne()</code> et la fonction <code>saluer()</code> différente.</p> <p><strong>Note</strong>: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">version finalisée</a> (Ou regarder tourner <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">notre demo en ligne</a>).</p> @@ -205,7 +205,7 @@ professeur1.saluer();Ffa</pre> <ol> <li>Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme <code>this.x = x</code> ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé <code>new</code>, exemple : <code>var myInstance = new myConstructor()</code>).</li> - <li>Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li> + <li>Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li> <li>Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : <code>myConstructor.prototype.x()</code>.</li> </ol> @@ -246,13 +246,13 @@ professeur1.saluer();Ffa</pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">Les bases de l'Objet</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript Orienté Objet pour débutants</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes d'Objet</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance">L'héritage en JavaScript</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON">Travailler avec les données JSON</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Construire les Objets dans la pratique</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajouter des fonctionnalités à la démo de nos balles bondissantes</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases de l'Objet</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript Orienté Objet pour débutants</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes d'Objet</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Inheritance">L'héritage en JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/JSON">Travailler avec les données JSON</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">Construire les Objets dans la pratique</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajouter des fonctionnalités à la démo de nos balles bondissantes</a></li> </ul> <p> </p> diff --git a/files/fr/learn/javascript/objects/json/index.html b/files/fr/learn/javascript/objects/json/index.html index b06c79006d..8fa5a7e935 100644 --- a/files/fr/learn/javascript/objects/json/index.html +++ b/files/fr/learn/javascript/objects/json/index.html @@ -16,13 +16,13 @@ translation_of: Learn/JavaScript/Objects/JSON <div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.</p> +<p>Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Les blocs</a>) et en Javascript orienté objets (voir <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>).</td> + <td>Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Les blocs</a>) et en Javascript orienté objets (voir <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -35,10 +35,10 @@ translation_of: Learn/JavaScript/Objects/JSON <p>{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.</p> -<p>Le JSON se présente sous la forme d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> disposant des méthodes pour assurer la conversion entre les deux.</p> +<p>Le JSON se présente sous la forme d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> disposant des méthodes pour assurer la conversion entre les deux.</p> <div class="note"> -<p><strong>Note </strong>: Convertir une chaîne de caractères en un objet natif se nomme <strong>analyse syntaxique (parsage)</strong> tandis que le contraire porte le nom de la <strong>linéarisation (stringification)</strong>.</p> +<p><strong>Note :</strong> Convertir une chaîne de caractères en un objet natif se nomme <strong>analyse syntaxique (parsage)</strong> tandis que le contraire porte le nom de la <strong>linéarisation (stringification)</strong>.</p> </div> <p>Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension <code>.json</code> et le {{glossary("MIME type")}} <code>application/json</code>.</p> @@ -107,7 +107,7 @@ superHeroes['active']</pre> </ol> <div class="note"> -<p><strong>Note </strong>: L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">code source</a>). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.</p> +<p><strong>Note :</strong> L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">code source</a>). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.</p> </div> <h3 id="Des_tableaux_en_tant_que_JSON">Des tableaux en tant que JSON</h3> @@ -172,7 +172,7 @@ var section = document.querySelector('section');</pre> <p>Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="json-superheroes.png"></p> <h3 id="Chargeons_notre_JSON">Chargeons notre JSON</h3> @@ -185,17 +185,17 @@ var section = document.querySelector('section');</pre> <li>Afin de créer une requête, nous avons besoin d'instancier un nouvel objet <code>XMLHttpRequest</code> à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : <pre class="brush: js">var request = new XMLHttpRequest();</pre> </li> - <li>Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code>. Ajoutez la ligne suivante : + <li>Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/open">open()</a></code>. Ajoutez la ligne suivante : <pre class="brush: js">request.open('GET', requestURL);</pre> <p>Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles. Deux suffiront pour notre exemple :</p> <ul> - <li>La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> est appropriée dans la mesure où nous voulons simplement récupérer quelques données.</li> + <li>La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode <code><a href="/fr/docs/Web/HTTP/Methods/GET">GET</a></code> est appropriée dans la mesure où nous voulons simplement récupérer quelques données.</li> <li>L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.</li> </ul> </li> - <li>Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur <code>'json'</code><strong> </strong>à <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code>, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> : + <li>Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur <code>'json'</code><strong> </strong>à <code><a href="/fr/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code>, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/send">send()</a></code> : <pre class="brush: js">request.responseType = 'json'; request.send();</pre> </li> @@ -208,9 +208,9 @@ request.send();</pre> </li> </ol> -<p>Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) dans la variable <code>superHeroes</code> ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <<code>header></code> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <code><section></code>.</p> +<p>Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété <code><a href="/fr/docs/Web/API/XMLHttpRequest/response">response</a></code>) dans la variable <code>superHeroes</code> ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <<code>header></code> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <code><section></code>.</p> -<p>Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété <code>request.response</code> sera disponible au moment où nous essayerons d'en faire quelque chose.</p> +<p>Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir <code><a href="/fr/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété <code>request.response</code> sera disponible au moment où nous essayerons d'en faire quelque chose.</p> <h3 id="Remplissage_de_len-tête">Remplissage de l'en-tête</h3> @@ -226,7 +226,7 @@ request.send();</pre> header.appendChild(myPara); }</pre> -<p>Nous avons appelé le paramètre de cette fonction <code>jsonObj</code> afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, nous fixons son <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> à la valeur de la propriété <code>squadName</code> de l'objet, puis nous l'ajoutons à l'en-tête en utilisant <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère <code>homeTown</code> et la propriété <code>formed</code> de l'objet.</p> +<p>Nous avons appelé le paramètre de cette fonction <code>jsonObj</code> afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de <code><a href="/fr/docs/Web/API/Document/createElement">createElement()</a></code>, nous fixons son <code><a href="/fr/docs/Web/API/Node/textContent">textContent</a></code> à la valeur de la propriété <code>squadName</code> de l'objet, puis nous l'ajoutons à l'en-tête en utilisant <code><a href="/fr/docs/Web/API/Node/appendChild">appendChild()</a></code>. Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère <code>homeTown</code> et la propriété <code>formed</code> de l'objet.</p> <h3 id="Création_des_fiches_des_héros">Création des fiches des héros</h3> @@ -279,11 +279,11 @@ request.send();</pre> </ol> <div class="note"> -<p><strong>Note </strong>: Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (ou regardez-le <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">en action</a>.)</p> +<p><strong>Note :</strong> Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (ou regardez-le <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">en action</a>.)</p> </div> <div class="note"> -<p><strong>Note </strong>: Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article <a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases du JavaScript orienté objet</a> pour obtenir plus de détails sur la notation avec un point et avec une accolade.</p> +<p><strong>Note :</strong> Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article <a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases du JavaScript orienté objet</a> pour obtenir plus de détails sur la notation avec un point et avec une accolade.</p> </div> <h2 id="Conversion_entre_objets_et_textes">Conversion entre objets et textes</h2> @@ -295,8 +295,8 @@ request.send();</pre> <p>Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON">JSON</a> interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :</p> <ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code> qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.</li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code> qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.</li> + <li><code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code> qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.</li> + <li><code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code> qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.</li> </ul> <p>Vous pouvez voir la première méthode en action dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">code source</a>) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode <code>parse()</code> pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :</p> @@ -328,10 +328,10 @@ myString</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">La page de référence sur l'objet JSON</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest">La page de référence sur l'objet XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/HTTP/Methods">Les méthodes de requêtes HTTP </a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON">La page de référence sur l'objet JSON</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest">La page de référence sur l'objet XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/HTTP/Methods">Les méthodes de requêtes HTTP </a></li> <li><a href="http://json.org">Le site web officiel avec un lien vers les normes de l' ECMA</a></li> </ul> diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.html b/files/fr/learn/javascript/objects/object-oriented_js/index.html index 1671769acb..a264d9063b 100644 --- a/files/fr/learn/javascript/objects/object-oriented_js/index.html +++ b/files/fr/learn/javascript/objects/object-oriented_js/index.html @@ -16,9 +16,9 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet <div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.</p> +<p>Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis :</th> @@ -43,7 +43,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet <p>Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre <a href="/fr/docs/Learn/JavaScript/Objects/Basics">premier article</a>, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'<strong>abstraction </strong>: créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.</p> -<p><img alt="Classe Personne avec attributs élémentaires" src="https://mdn.mozillademos.org/files/14867/ClassePersonne.png" style="height: 216px; width: 604px;"></p> +<p><img alt="Classe Personne avec attributs élémentaires" src="ClassePersonne.png"></p> <p>Dans plusieurs langages de POO, la définition d'un objet est appelé une <strong>classe </strong>(comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.</p> @@ -51,7 +51,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet <p>À partir de notre classe, nous pouvons créer des objets, on parle alors d'<strong>instancier des objets</strong>, une classe objet a alors <strong>une instance</strong>. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :</p> -<p><img alt="Instantiation on a Personn Class for JS examples (fr)" src="https://mdn.mozillademos.org/files/14869/InstancePersonne.png" style="height: 716px; width: 699px;"></p> +<p><img alt="Instantiation on a Personn Class for JS examples (fr)" src="InstancePersonne.png"></p> <p>Lorsque l'instance d'un objet est créée, on appelle la <strong>fonction</strong> <strong>constructeur </strong>de la classe pour la créer. On parle d'<strong>instanciation</strong> d'un objet — l'objet ainsi créé est <strong>instancié</strong> à partir de la classe.</p> @@ -59,17 +59,17 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet <p>Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces <strong>classes filles</strong> nouvellement créées peuvent <strong>hériter</strong> des propriétés et des attributs de leur <strong>classe mère</strong>. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.</p> -<p><img alt="Inheritance principle with French text for JS example" src="https://mdn.mozillademos.org/files/14887/HeritageClasse.PNG" style="height: 709px; width: 696px;"></p> +<p><img alt="Inheritance principle with French text for JS example" src="HeritageClasse.PNG"></p> <p>Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».</p> <div class="note"> -<p><strong>Note </strong>: On parle de <strong>polymorphisme</strong>, lorsque des objets réutilisent la même propriété, mais c'est juste pour info, vous embêtez pas.</p> +<p><strong>Note :</strong> On parle de <strong>polymorphisme</strong>, lorsque des objets réutilisent la même propriété, mais c'est juste pour info, vous embêtez pas.</p> </div> <p>Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :</p> -<p><img alt="Professor instantiation example for JS fr" src="https://mdn.mozillademos.org/files/14889/InstanceProf.png" style="height: 703px; width: 696px;"></p> +<p><img alt="Professor instantiation example for JS fr" src="InstanceProf.png"></p> <p>Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.</p> @@ -80,7 +80,7 @@ original_slug: Learn/JavaScript/Objects/JS_orienté-objet <p>Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir <a href="/fr/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes Objet</a>). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.</p> <div class="note"> -<p><strong>Note</strong> : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.</p> +<p><strong>Note :</strong> Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.</p> </div> <p>Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> que nous avons vu dans notre premier article sur les objets.</p> @@ -116,7 +116,7 @@ salva.salutation();</pre> <p>Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé <code>this</code>, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode <code>salutation</code><code>()</code> retournera elle aussi le nom passé en argument de la fonction constructrice.</p> <div class="note"> -<p><strong>Note </strong>: Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.</p> +<p><strong>Note :</strong> Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.</p> </div> <p>Comment pouvons-nous utiliser un constructeur ?</p> @@ -203,7 +203,7 @@ personne1.bio() // etc.</pre> <div class="note"> -<p><strong>Note</strong> : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (vous pouvez aussi jeter un œil à la <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">démo</a>)</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (vous pouvez aussi jeter un œil à la <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">démo</a>)</p> </div> <h3 id="Exercices">Exercices</h3> @@ -213,7 +213,7 @@ personne1.bio() <p>D'autre part, il y a quelques améliorations possibles pour notre méthode <code>bio().</code> En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.</p> <div class="note"> -<p><strong>Note</strong>: Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub </a>(<a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">la démo</a>) —tentez d'abord l'aventure avant d'aller regarder la réponse !</p> +<p><strong>Note :</strong> Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub </a>(<a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">la démo</a>) —tentez d'abord l'aventure avant d'aller regarder la réponse !</p> </div> <h2 id="Dautres_manières_dinstancier_des_objets">D'autres manières d'instancier des objets</h2> diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.html b/files/fr/learn/javascript/objects/object_building_practice/index.html index 33cf718b63..7028077f88 100644 --- a/files/fr/learn/javascript/objects/object_building_practice/index.html +++ b/files/fr/learn/javascript/objects/object_building_practice/index.html @@ -17,14 +17,14 @@ original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique <div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.</p> +<p>Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis :</th> <td> - <p>Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec les bases du JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Les blocs de construction</a>) et les bases de la programmation objet en JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>). </p> + <p>Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec les bases du JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Les blocs de construction</a>) et les bases de la programmation objet en JavaScript (voir <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>). </p> </td> </tr> <tr> @@ -40,12 +40,12 @@ original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique <p>Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : </p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="bouncing-balls.png"></p> <ol> </ol> -<p>Cet exemple utilise l'<a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">API Canvas </a> pour dessiner les balles sur l'écran, et l'API <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation <strong>détection de collision</strong>).</p> +<p>Cet exemple utilise l'<a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">API Canvas </a> pour dessiner les balles sur l'écran, et l'API <a href="/fr/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation <strong>détection de collision</strong>).</p> <p>Pour commencer, faites des copies locales de nos fichiers <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code>, et <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code>. Ces fichiers contiennent respectivement :</p> @@ -64,7 +64,7 @@ const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight;</pre> -<p>Ce script prend une référence à l'élément <code><canvas></code> et ensuite invoque la méthode <code><a href="/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante (<code>ctx</code>) est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. </p> +<p>Ce script prend une référence à l'élément <code><canvas></code> et ensuite invoque la méthode <code><a href="/fr/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante (<code>ctx</code>) est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. </p> <p>Après, nous configurons les variables <code>width</code> (largeur) et <code>height</code>(hauteur), et la largeur et la hauteur de l'élément canvas (représentés par les propriétés <code>canvas.width</code> et <code>canvas.height</code> ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).</p> @@ -117,16 +117,16 @@ const height = canvas.height = window.innerHeight;</pre> <p>En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt (<code>ctx</code>). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :</p> <ul> - <li>Premièrement, nous utilisons <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> pour spécifier que nous voulons dessiner une forme sur le papier.</li> - <li>Ensuite, nous utilisons <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété <code>color</code> de notre balle.</li> - <li>Après, nous utilisons la méthode <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> pour tracer une forme en arc sur le papier. Ses paramètres sont : + <li>Premièrement, nous utilisons <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> pour spécifier que nous voulons dessiner une forme sur le papier.</li> + <li>Ensuite, nous utilisons <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété <code>color</code> de notre balle.</li> + <li>Après, nous utilisons la méthode <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> pour tracer une forme en arc sur le papier. Ses paramètres sont : <ul> <li>Les positions <code>x</code> et <code>y</code> du centre de l'arc — nous specifions donc les propriétés <code>x</code> et <code>y </code>de notre balle.</li> <li>Le rayon de l'arc — nous specifions la propriété <code>size</code> de notre balle.</li> <li>Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et <code>2 * PI </code>qui est l'équivalent de 360 degrés en radians (malheureusement vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement <code>1 * PI</code>, vous auriez eu un demi-cercle (180 degrés).</li> </ul> </li> - <li>En dernière position nous utilisons la méthode <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec <code>beginPath()</code>, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec <code>fillStyle</code>.</li> + <li>En dernière position nous utilisons la méthode <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec <code>beginPath()</code>, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec <code>fillStyle</code>.</li> </ul> <p>Vous pouvez déjà commencer à tester votre objet.</p> @@ -186,14 +186,14 @@ testBall.draw()</pre> <p>Les deux dernières lignes ajoutent la valeur <code>velX</code> à la coordonnée <code>x</code> et la valeur <code>velY</code> à la coordonnée <code>y</code> — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.</p> -<p><span class="short_text" id="result_box" lang="fr"><span>Cela suffira pour l'instant,</span> <span>passons à l'animation !</span></span></p> +<p>Cela suffira pour l'instant, passons à l'animation !</p> <h2 id="Animer_la_balle">Animer la balle</h2> -<p><span id="result_box" lang="fr"><span>Maintenant, rendons cela amusant.</span> <span>Nous allons commencer à ajouter des balles au canvas et à les animer.</span></span></p> +<p>Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.</p> <ol> - <li><span id="result_box" lang="fr"><span>Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles.</span> <span>Le tableau suivant fera ce travail </span></span>— <span lang="fr"><span>ajoutez-le au bas de votre code maintenant :</span></span> + <li>Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : <pre class="brush: js">let balls = []; </pre> @@ -213,8 +213,8 @@ testBall.draw()</pre> balls.push(ball); }</pre> - <span>Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation.</span> <span>C'est la base de la plupart des jeux et autres programmes similaires.</span></li> - <li><span id="result_box" lang="fr"><span>Ajoutez ce qui suit au bas de votre code maintenant :</span></span> + Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.</li> + <li>Ajoutez ce qui suit au bas de votre code maintenant : <pre class="brush: js">function loop() { ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillRect(0, 0, width, height); @@ -230,10 +230,10 @@ testBall.draw()</pre> <p>Notre fonction <code>loop()</code> fonctionne comme suit :</p> <ul> - <li><span id="result_box" lang="fr"><span>On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant <code>fillRect()</code> (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné</span> <span>).</span> <span>Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée.</span> <span>Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent !</span> <span>La couleur du remplissage est définie sur semi-transparent, <code>rgba (0,0,0,.25)</code>, pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent.</span> <span>Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout.</span> <span>Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.</span></span></li> - <li><span id="result_box" lang="fr"><span>On crée un nouvel objet <code>Ball()</code> avec des attributs générées aléatoirement grâce à la fonction <code>random()</code>, puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc</span> <span>quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît.</span> <span>Vous pouvez essayer de faire varier le nombre dans <code>balls.length <25</code> pour obtenir plus, ou moins de balles à l'écran.</span> <span>En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !</span></span></li> - <li><span id="result_box" lang="fr"><span>Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction <code>draw()</code> et <code>update()</code> pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.</span></span></li> - <li><span id="result_box" lang="fr"><span>Exécute à nouveau la fonction à l'aide de la méthode <code>requestAnimationFrame()</code> </span></span>—<span lang="fr"><span> lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide.</span> <span>Cela se fait généralement de manière récursive </span></span>—<span lang="fr"><span> ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.</span></span></li> + <li>On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant <code>fillRect()</code> (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, <code>rgba (0,0,0,.25)</code>, pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.</li> + <li>On crée un nouvel objet <code>Ball()</code> avec des attributs générées aléatoirement grâce à la fonction <code>random()</code>, puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans <code>balls.length <25</code> pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !</li> + <li>Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction <code>draw()</code> et <code>update()</code> pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.</li> + <li>Exécute à nouveau la fonction à l'aide de la méthode <code>requestAnimationFrame()</code> — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.</li> </ul> </li> <li>Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. @@ -241,14 +241,14 @@ testBall.draw()</pre> </li> </ol> -<p>Voilà pour les bases — <span id="result_box" lang="fr"><span>essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!</span></span></p> +<p>Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!</p> <h2 id="Ajouter_la_détection_de_collision">Ajouter la détection de collision</h2> -<p><span id="result_box" lang="fr"><span>Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.</span></span></p> +<p>Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.</p> <ol> - <li><span id="result_box" lang="fr"><span>Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode <code>update()</code> (c'est-à-dire le bloc <code>Ball.prototype.update</code>).</span></span> + <li>Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode <code>update()</code> (c'est-à-dire le bloc <code>Ball.prototype.update</code>). <pre class="brush: js">Ball.prototype.collisionDetect = function() { for (let j = 0; j < balls.length; j++) { @@ -264,40 +264,40 @@ testBall.draw()</pre> } }</pre> - <p><span id="result_box" lang="fr"><span>Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment.</span> Regardons cela pas-à-pas<span> :</span></span></p> + <p>Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :</p> <ul> - <li><span id="result_box" lang="fr"><span>Pour chaque balle <em>b</em>, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec <em>b</em>.</span> <span>Pour ce faire, on inspecte toutes les balles du tableau</span></span> <code>balls[]</code> dans une boucle <code>for</code>.</li> - <li><span id="result_box" lang="fr"><span>Immédiatement à l'intérieur de cette boucle <code>for</code>, une instruction <code>if</code> vérifie si la balle courante <em>b'</em> , inspectée dans la boucle, n'est égale à la balle <em>b. Le code correspondant est : </em><code><em>b</em>'!== <em>b</em></code></span></span><span lang="fr"><span><em>. </em>En effet,</span> n<span>ous ne voulons pas vérifier si une balle <em>b</em> est entrée en collision avec elle-même !</span> N<span>ous contrôlons donc si la balle actuelle <em>b</em></span></span>—<span lang="fr"><span>dont la méthode <code>collisionDetect()</code> est invoquée</span></span>—<span lang="fr"><span>est distincte de la balle <em>b' </em>inspectée dans la boucle<em>. </em>Ainsi</span> <span>le bloc de code venant après l'instruction <code>if</code> ne s'exécutera que si les balles <em>b</em> et <em>b'</em> ne sont pas identiques.</span></span></li> - <li><span id="result_box" lang="fr"><span>Un algorithme classique permet ensuite de vérifier la superposition de deux disques</span><span>.</span> <span>Ceci est expliqué plus loin dans</span></span> <a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li> - <li><span id="result_box" lang="fr"><span>Si une collision est détectée, le code à l'intérieur de l'instruction interne <code>if</code> est exécuté.</span> <span>Dans ce cas, nous définissons simplement la propriété <code>color</code> des deux cercles à une nouvelle couleur aléatoire.</span> <span>Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre.</span> <span>Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que</span></span> <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a>, etc.</li> + <li>Pour chaque balle <em>b</em>, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec <em>b</em>. Pour ce faire, on inspecte toutes les balles du tableau <code>balls[]</code> dans une boucle <code>for</code>.</li> + <li>Immédiatement à l'intérieur de cette boucle <code>for</code>, une instruction <code>if</code> vérifie si la balle courante <em>b'</em> , inspectée dans la boucle, n'est égale à la balle <em>b. Le code correspondant est : </em><code><em>b</em>'!== <em>b</em></code><em>. </em>En effet, nous ne voulons pas vérifier si une balle <em>b</em> est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle <em>b</em>—dont la méthode <code>collisionDetect()</code> est invoquée—est distincte de la balle <em>b' </em>inspectée dans la boucle<em>. </em>Ainsi le bloc de code venant après l'instruction <code>if</code> ne s'exécutera que si les balles <em>b</em> et <em>b'</em> ne sont pas identiques.</li> + <li>Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans <a href="/fr/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li> + <li>Si une collision est détectée, le code à l'intérieur de l'instruction interne <code>if</code> est exécuté. Dans ce cas, nous définissons simplement la propriété <code>color</code> des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a>, etc.</li> </ul> </li> - <li><span id="result_box" lang="fr"><span>Vous devez également appeler cette méthode dans chaque image de l'animation.</span> <span>Ajouter le code ci-dessous</span></span> juste après la ligne <code>balls[i].update();</code>: + <li>Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous juste après la ligne <code>balls[i].update();</code>: <pre class="brush: js">balls[i].collisionDetect();</pre> </li> - <li><span id="result_box" lang="fr"><span>Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !</span></span></li> + <li>Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !</li> </ol> <div class="note"> -<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">version finale</a> (voir également la <a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">démo en ligne</a>).</span></span></p> +<p><strong>Note :</strong> Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">version finale</a> (voir également la <a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">démo en ligne</a>).</p> </div> <h2 id="Résumé">Résumé</h2> -<p><span id="result_box" lang="fr"><span>Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module !</span> Nous espérons vous avoir offert un aperçu<span> utile de l'utilisation des objets.</span><br> - <br> - <span>C'est tout pour les articles sur les objets </span></span>—<span lang="fr"><span> il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.</span></span></p> +<p>Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.</p> + +<p>C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Didacticiel sur canvas</a> — <span id="result_box" lang="fr"><span>un guide pour débutants sur l'utilisation de canvas 2D.</span></span></li> - <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li> - <li><span id="result_box" lang="fr"><span><a href="/en-US/docs/Games/Techniques/2D_collision_detection">Détection de collision 2D</a> </span></span></li> - <li><span id="result_box" lang="fr"><span><a href="/en-US/docs/Games/Techniques/3D_collision_detection">Détection de collision 3D</a> </span></span></li> - <li><a href="/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Jeu d'évasion 2D utilisant du JavaScript pu</a> —<span id="result_box" lang="fr"><span>un excellent tutoriel pour débutant montrant comment construire un jeu en 2D.</span></span></li> - <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">Jeu d'évasion 2D utilisant phaser</a> — <span id="result_box" lang="fr"><span>explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript.</span></span></li> + <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial">Didacticiel sur canvas</a> — un guide pour débutants sur l'utilisation de canvas 2D.</li> + <li><a href="/fr/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li> + <li><a href="/fr/docs/Games/Techniques/2D_collision_detection">Détection de collision 2D</a> </li> + <li><a href="/fr/docs/Games/Techniques/3D_collision_detection">Détection de collision 3D</a> </li> + <li><a href="/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Jeu d'évasion 2D utilisant du JavaScript pu</a> —un excellent tutoriel pour débutant montrant comment construire un jeu en 2D.</li> + <li><a href="/fr/docs/Games/Tutorials/2D_breakout_game_Phaser">Jeu d'évasion 2D utilisant phaser</a> — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript.</li> </ul> <p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p> @@ -307,11 +307,11 @@ testBall.draw()</pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Les bases de l'objet</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript orienté objet pour les débutants</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes d'objets</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Héritage en JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Travailler avec des données JSON</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Pratique de construction d'objets</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajout de fonctionnalités à notre démo de balles bondissantes</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases de l'objet</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript orienté objet pour les débutants</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes d'objets</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Inheritance">Héritage en JavaScript</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/JSON">Travailler avec des données JSON</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Object_building_practice">Pratique de construction d'objets</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajout de fonctionnalités à notre démo de balles bondissantes</a></li> </ul> diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.html b/files/fr/learn/javascript/objects/object_prototypes/index.html index 9cf87e30ad..95663a0f7b 100644 --- a/files/fr/learn/javascript/objects/object_prototypes/index.html +++ b/files/fr/learn/javascript/objects/object_prototypes/index.html @@ -12,9 +12,9 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet <div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> -<p class="summary">Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.</p> +<p>Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis :</th> @@ -36,7 +36,7 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet <p>En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.</p> <div class="note"> -<p><strong>Note:</strong> Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code>, ou via la propriété dépréciée <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> ) et l' attribut <code>prototype</code>d'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, <code>Object.getPrototypeOf(new Foobar())</code> renvoie au même object que<code>Foobar.prototype</code>.</p> +<p><strong>Note:</strong> Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code>, ou via la propriété dépréciée <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> ) et l' attribut <code>prototype</code>d'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, <code>Object.getPrototypeOf(new Foobar())</code> renvoie au même object que<code>Foobar.prototype</code>.</p> </div> <p>Prenons un exemple afin de rendre cela un peu plus clair.</p> @@ -59,11 +59,11 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet <p>Si vous entrez « <code>personne1</code> » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14907/autocomplete_Personne.png" style="height: 304px; width: 288px;"><img alt="" src="https://mdn.mozillademos.org/files/14919/autocomplete_Personne.png" style="height: 288px; width: 303px;"></p> +<p><img alt="" src="autocomplete_Personne.png"><img alt="" src="autocomplete_Personne.png"></p> <p>Dans cette liste vous verrez les membres définis au niveau du constructeur de <code>personne1</code> qui n'est autre <code>Personne()</code>. On y trouve les valeurs suivantes : <code>nom</code>, <code>age</code>, <code>genre</code>, <code>interets</code>, <code>bio</code>, et <code>salutation</code>. On peut voir aussi d'autres membres tels que <code>watch</code>, <code>valueOf</code> … Ces membres particuliers sont définis au niveau du prototype objet du constructeur <code>Personne()</code>, qui est <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>. On voit ici une mise en œuvre de la chaine de prototypage.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14921/prototype_chaine.PNG" style="height: 137px; width: 703px;"></p> +<p><img alt="" src="prototype_chaine.PNG"></p> <p>Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour <code>Object</code> en l'appliquant à <code>Personne</code>1 ? Par exemple :</p> @@ -78,11 +78,11 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet </ul> <div class="note"> -<p><strong>Note </strong>: Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont <strong>pas</strong> copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.</p> +<p><strong>Note :</strong> Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont <strong>pas</strong> copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.</p> </div> <div class="note"> -<p><strong>Note</strong> : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée <code>[[prototype]]</code> définie dans la spécification de JavaScript. (voir <a href="fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a>). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (deux tirets soulignés ou <em>underscore</em> de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter <code>personne1.__proto__</code> et <code>personne1.__proto__.__proto__</code> pour voir à quoi ressemble une chaine de prototypage dans la console !</p> +<p><strong>Note :</strong> Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée <code>[[prototype]]</code> définie dans la spécification de JavaScript. (voir <a href="fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a>). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (deux tirets soulignés ou <em>underscore</em> de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter <code>personne1.__proto__</code> et <code>personne1.__proto__.__proto__</code> pour voir à quoi ressemble une chaine de prototypage dans la console !</p> </div> <h2 id="Lattribut_prototype_là_où_lon_définit_les_éléments_héritables">L'attribut prototype : là où l'on définit les éléments héritables</h2> @@ -96,7 +96,7 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet <p><code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>, ainsi que d'autres membres non définis dans <code>prototype</code> ne sont pas hérités par les instances d'objet ou les objets qui héritent de <code>Object.prototype</code>. Ces méthodes et attributs sont disponibles uniquement pour le constructeur <code>Object()</code>.</p> <div class="note"> -<p><strong>Note</strong> : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un œil à la documentation du constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> si vous ne nous croyez pas.</p> +<p><strong>Note :</strong> Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un œil à la documentation du constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> si vous ne nous croyez pas.</p> </div> <ol> @@ -117,7 +117,7 @@ original_slug: Learn/JavaScript/Objects/Prototypes_Objet <p><code>maChaine </code>possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>…</p> <div class="warning"> -<p><strong>Important </strong>: L'attribut <code>prototype</code> est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via <code>__proto__</code>). L'attribut <code>prototype </code>est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.</p> +<p><strong>Attention :</strong> L'attribut <code>prototype</code> est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via <code>__proto__</code>). L'attribut <code>prototype </code>est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.</p> </div> <h2 id="Revenons_sur_create">Revenons sur create()</h2> @@ -203,7 +203,7 @@ Personne.prototype.aurevoir= function() { <p>Même si nous l'avons déclaré après, la méthode <code>aurevoir()</code> est disponible pour l'instance <code>personne1</code>. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.</p> <div class="note"> -<p><strong>Note </strong>: Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a>, voir la <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">démo</a>)</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a>, voir la <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">démo</a>)</p> </div> <p>Vous verrez peu d'attributs définis au sein de l'attribut <code>prototype</code>, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :</p> diff --git a/files/fr/learn/performance/html/index.html b/files/fr/learn/performance/html/index.html index 268d602662..2c6ae834d6 100644 --- a/files/fr/learn/performance/html/index.html +++ b/files/fr/learn/performance/html/index.html @@ -7,7 +7,7 @@ translation_of: Learn/Performance/HTML <p>HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/performance/index.html b/files/fr/learn/performance/index.html index 0e1191edae..56b6ccb0f0 100644 --- a/files/fr/learn/performance/index.html +++ b/files/fr/learn/performance/index.html @@ -14,13 +14,13 @@ translation_of: Learn/Performance --- <p>{{LearnSidebar}}</p> -<p class="summary">La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de <strong>performance web</strong>, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants.</p> +<p>La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de <strong>performance web</strong>, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants.</p> -<p class="summary">Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'<a href="/fr/docs/Apprendre/a11y">accessibilité</a>,cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien.</p> +<p>Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'<a href="/fr/docs/Apprendre/a11y">accessibilité</a>,cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien.</p> <h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2> -<p>Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en <span class="tlid-translation translation" lang="fr"><span title="">œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web.</span></span> Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module <a href="/fr/docs/Apprendre/Commencer_avec_le_web">Commencer avec le web</a>.</p> +<p>Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module <a href="/fr/docs/Apprendre/Commencer_avec_le_web">Commencer avec le web</a>.</p> <p>Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que:</p> @@ -39,9 +39,9 @@ translation_of: Learn/Performance <dl> <dt><a href="/fr/docs/Learn/Performance/pourquoi_performance_web">Le "pourquoi" des performances Web</a></dt> <dd>Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux.</dd> - <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que la performance Web ?</a></dt> + <dt><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que la performance Web ?</a></dt> <dd>Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances.</dd> - <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">Comment les utilisateurs perçoivent-ils les performances ?</a></dt> + <dt><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les utilisateurs perçoivent-ils les performances ?</a></dt> <dd>La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels.</dd> </dl> diff --git a/files/fr/learn/performance/measuring_performance/index.html b/files/fr/learn/performance/measuring_performance/index.html index 8ac486bdab..402e218d4c 100644 --- a/files/fr/learn/performance/measuring_performance/index.html +++ b/files/fr/learn/performance/measuring_performance/index.html @@ -11,7 +11,7 @@ translation_of: 'Learn/Performance/Measuring_performance' <p>Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis :</th> @@ -59,7 +59,7 @@ translation_of: 'Learn/Performance/Measuring_performance' <p>Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :</p> -<p><img alt="Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla." src="pagespeed-insight-mozilla-homepage.png" style="border-style: solid; border-width: 1px;"></p> +<p><img alt="Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla." src="pagespeed-insight-mozilla-homepage.png"></p> <p>Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.</p> @@ -71,11 +71,11 @@ translation_of: 'Learn/Performance/Measuring_performance' <p>La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.</p> -<p><img alt="" src="network-monitor.png" style="border-style: solid; border-width: 1px;"></p> +<p><img alt="" src="network-monitor.png"></p> <p>Vous pouvez aussi utiliser le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.</p> -<p><img alt="" src="perf-monitor.png" style="border-style: solid; border-width: 1px;"></p> +<p><img alt="" src="perf-monitor.png"></p> <h2 id="conclusion">Conclusion</h2> diff --git a/files/fr/learn/performance/multimedia/index.html b/files/fr/learn/performance/multimedia/index.html index 8df0dc44e2..56b98c3888 100644 --- a/files/fr/learn/performance/multimedia/index.html +++ b/files/fr/learn/performance/multimedia/index.html @@ -20,8 +20,8 @@ translation_of: Learn/Performance/Multimedia </tbody> </table> -<div class="notecard note"> - <p><b>Note :</b> Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que <a href="https://images.guide">https://images.guide (en anglais)</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que <a href="https://images.guide">https://images.guide (en anglais)</a>.</p> </div> <h2 id="why_optimize_your_multimedia">Pourquoi optimiser vos éléments multimédia ?</h2> @@ -52,8 +52,8 @@ translation_of: Learn/Performance/Multimedia <p>Le format de fichier le plus optimisé dépend directement du type d'image à charger.</p> -<div class="notecard note"> - <p><b>Note :</b> Pour obtenir des informations plus générales sur les types d'images, consultez le <a href="/fr/docs/Web/Media/Formats/Image_types">guide des types d'images et de formats d'images</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Pour obtenir des informations plus générales sur les types d'images, consultez le <a href="/fr/docs/Web/Media/Formats/Image_types">guide des types d'images et de formats d'images</a>.</p> </div> <p>Le format <a href="/fr/docs/Web/Media/Formats/Image_types#svg">SVG</a> est le plus approprié pour les images qui ne comprennent que quelques couleurs et qui n'ont pas la complexité d'une photographie. Cela nécessite la mise à disposition d'une source dans un format vectoriel. Si cette image n'est disponible qu'en format bitmap, alors le format <a href="/fr/docs/Web/Media/Formats/Image_types#png">PNG</a> sera la solution de repli idéale. De bons exemples d'images idéalement fournies en SVG sont les logos, les illustrations, les graphiques ou les icônes (veuillez noter qu'il vaut mieux utiliser des images au format SVG que des polices d'icônes !). Qu'il s'agisse de SVG ou de PNG, les deux formats prennent en charge la transparence.</p> @@ -74,8 +74,8 @@ translation_of: Learn/Performance/Multimedia <ul> <li><a href="/fr/docs/Web/Media/Formats/Image_types#webp">WebP</a> : un choix excellent pour les images, qu'elles soient fixes ou animées. WebP offre une meilleure compression que PNG ou JPEG et prend en charge les grandes profondeurs de couleurs, les animations, la transparence et de nombreuses autres fonctionnalités, à l'exception de l'affichage progressif. WebP est pris en charge par tous les navigateurs les plus utilisés à l'exception de Safari 14 sur macOS 14 sur ordinateur. - <div class="notecard note"> - <p><b>Note :</b> en dépit de <a href="https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174">la prise en charge annoncée de WebP sur Safari 14</a>, les images <code>.webp</code> ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile.</p> + <div class="note"> + <p><strong>Note :</strong> en dépit de <a href="https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174">la prise en charge annoncée de WebP sur Safari 14</a>, les images <code>.webp</code> ne s'affiche pas bien sur macOS sur ordinateur, alors qu'elles s'affichent bien sur iOS 14 sur mobile.</p> </div> </li> <li><a href="/fr/docs/Web/Media/Formats/Image_types#avif">AVIF</a> : un bon choix pour les images fixes ou animées, du fait du haut niveau de performances et du fait qu'il est libre de droits. AVIF est encore plus efficient que WebP, mais il n'est pas aussi bien pris en charge : il est actuellement pris en charge sur Chrome, Opera et Firefox (à l'aide des <a href="/fr/docs/Mozilla/Firefox/Experimental_features#avif_av1_image_file_format_support">réglages de préférences</a>). <br />Vous pouvez utiliser cet <a href="https://avif-converter.online">outil en ligne pour convertir différents formats d'images en AVIF</a>.</li> diff --git a/files/fr/learn/performance/why_web_performance/index.html b/files/fr/learn/performance/why_web_performance/index.html index 8cb054da54..30d21bd82a 100644 --- a/files/fr/learn/performance/why_web_performance/index.html +++ b/files/fr/learn/performance/why_web_performance/index.html @@ -18,7 +18,7 @@ original_slug: Learn/Performance/pourquoi_performance_web <p>La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -35,23 +35,21 @@ original_slug: Learn/Performance/pourquoi_performance_web <h2 id="Pourquoi_se_soucier_de_la_performance">Pourquoi se soucier de la performance?</h2> -<p class="summary">Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'<a href="/fr/docs/Apprendre/a11y">accessibilité web</a>. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.</p> +<p>Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'<a href="/fr/docs/Apprendre/a11y">accessibilité web</a>. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.</p> -<p class="summary">À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article, avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.</p> +<p>À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article, avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.</p> <ul> - <li class="summary">Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.</li> - <li class="summary">Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.</li> - <li class="summary">Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge.</li> + <li>Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.</li> + <li>Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.</li> + <li>Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge.</li> </ul> -<p class="summary">Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec <code><a href="/en-US/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code> (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.</p> +<p>Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec <code><a href="/fr/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code> (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.</p> -<p class="summary">Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir <a href="https://whatdoesmysitecost.com/">combien coûte le téléchargement de votre site</a>.)</p> +<p>Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir <a href="https://whatdoesmysitecost.com/">combien coûte le téléchargement de votre site</a>.)</p> -<p dir="ltr"></p> - -<h3 dir="ltr" id="Améliorer_les_taux_de_conversion">Améliorer les taux de conversion</h3> +<h3 id="Améliorer_les_taux_de_conversion">Améliorer les taux de conversion</h3> <p>La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs.</p> @@ -61,20 +59,20 @@ original_slug: Learn/Performance/pourquoi_performance_web <p>La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site.</p> -<p dir="ltr">Voici quelques exemples concrets d'améliorations des performances:</p> +<p>Voici quelques exemples concrets d'améliorations des performances:</p> <ul> - <li dir="ltr"> - <p dir="ltr"><a href="https://wpostats.com/2018/05/30/tokopedia-new-users.html">Tokopedia a réduit le temps de rendu de 14s à 2s pour les connexions 3G et a vu une augmentation de 19% des visiteurs, 35% d'augmentation du nombre total de sessions, 7% d'augmentation des nouveaux utilisateurs, 17% d'augmentation des utilisateurs actifs et 16% d'augmentation des sessions par utilisateur.</a></p> + <li> + <p><a href="https://wpostats.com/2018/05/30/tokopedia-new-users.html">Tokopedia a réduit le temps de rendu de 14s à 2s pour les connexions 3G et a vu une augmentation de 19% des visiteurs, 35% d'augmentation du nombre total de sessions, 7% d'augmentation des nouveaux utilisateurs, 17% d'augmentation des utilisateurs actifs et 16% d'augmentation des sessions par utilisateur.</a></p> </li> - <li dir="ltr"> - <p dir="ltr"><a href="https://wpostats.com/2017/03/10/pinterest-seo.html">La reconstruction des pages Pinterest pour les performances a entraîné une réduction de 40% du temps d'attente, une augmentation de 15% du trafic SEO et d'une augmentation de 15% du taux de conversion pour l'inscription.</a></p> + <li> + <p><a href="https://wpostats.com/2017/03/10/pinterest-seo.html">La reconstruction des pages Pinterest pour les performances a entraîné une réduction de 40% du temps d'attente, une augmentation de 15% du trafic SEO et d'une augmentation de 15% du taux de conversion pour l'inscription.</a></p> </li> </ul> -<p class="summary">Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.</p> +<p>Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.</p> -<p class="summary">Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir <a href="/fr/docs/Web/Performance/Budgets_de_performance">performance budgets</a>).</p> +<p>Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir <a href="/fr/docs/Web/Performance/Budgets_de_performance">performance budgets</a>).</p> <p>Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur!</p> @@ -87,16 +85,16 @@ original_slug: Learn/Performance/pourquoi_performance_web <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Performance/why_web_performance">The "why" of web performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></li> - <li><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></li> - <li><a href="/en-US/docs/Learn/Performance/Measuring_performance">Measuring performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> - <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> - <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> - <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/fr/docs/Learn/Performance/why_web_performance">The "why" of web performance</a></li> + <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></li> + <li><a href="/fr/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></li> + <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Measuring performance</a></li> + <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/fr/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/fr/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/fr/docs/Learn/Performance/HTML">HTML performance features</a></li> <li><a href="/fr/docs/Learn/Performance/CSS">Optimisation des performances en CSS</a></li> - <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> - <li><a href="/en-US/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></li> + <li><a href="/fr/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/fr/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></li> </ul> diff --git a/files/fr/learn/server-side/django/admin_site/index.html b/files/fr/learn/server-side/django/admin_site/index.html index b93f0d8475..af9b0309f9 100644 --- a/files/fr/learn/server-side/django/admin_site/index.html +++ b/files/fr/learn/server-side/django/admin_site/index.html @@ -15,9 +15,9 @@ translation_of: Learn/Server-side/Django/Admin_site <div>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</div> -<p class="summary">Nous avons créé le modèle de données pour le site web de la <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">bibliothèque locale</a>. Dans ce chapitre nous allons utiliser le site d'administration pour introduire des données réelles pour les livres. Dans un premier temps, nous aborderons la manière d'enregistrer les données des objets sur le site d'administration et comment se connecter au site et créer des données. La fin de ce chapitre sera dédié à des éléments d'amélioration possible du site d'administration.</p> +<p>Nous avons créé le modèle de données pour le site web de la <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">bibliothèque locale</a>. Dans ce chapitre nous allons utiliser le site d'administration pour introduire des données réelles pour les livres. Dans un premier temps, nous aborderons la manière d'enregistrer les données des objets sur le site d'administration et comment se connecter au site et créer des données. La fin de ce chapitre sera dédié à des éléments d'amélioration possible du site d'administration.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis:</th> @@ -57,9 +57,10 @@ admin.site.register(Genre) admin.site.register(BookInstance) </pre> -<div class="note"><strong>Note</strong>: Si vous avez répondu au défi de la modelisation des langues des livres (<a href="/fr/docs/Learn/Server-side/Django/Models">voir le chapitre précédent sur les modèles de données</a>), vous pouvez aussi importer cet objet !<br> -<br> -Cela devrait être de la forme : <code>admin.site.register(Language)</code> et n'oubliez pas d'importer l'objet.</div> +<div class="note"> + <p><strong>Note :</strong> Si vous avez répondu au défi de la modelisation des langues des livres (<a href="/fr/docs/Learn/Server-side/Django/Models">voir le chapitre précédent sur les modèles de données</a>), vous pouvez aussi importer cet objet !</p> + <p>Cela devrait être de la forme : <code>admin.site.register(Language)</code> et n'oubliez pas d'importer l'objet.</p> +</div> <p>C'est la méthode la plus rapide et la plus simple pour enregistrer un ou plusieurs modèles. Le site d'administration est très adaptable et nous aborderons plus loin ces questions.</p> @@ -82,41 +83,41 @@ Cela devrait être de la forme : <code>admin.site.register(Language)</code> et n <p>Pour vous authentifier au site, ouvrez l'URL <em>/admin </em>du site local (concrètement, <a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin</a>) et identifiez vous avec votre compte de super-utilisateur.</p> -<div class="blockIndicator note"> -<p>Vous serez redirigez vers l'application interne à Django de gestion de l'authentification et la pages de demande d'authentitification avant d'accéder réellement au site d'administration.</p> +<div class="note"> +<p><strong>Note :</strong> Vous serez redirigé⋅e vers l'application interne à Django de gestion de l'authentification et la pages de demande d'authentitification avant d'accéder réellement au site d'administration.</p> <p>Si vous accéder au site local sans /admin, vous aurez un message d'erreur car les routages d'URL n'ont pas encore été traité. ne vous en inquiétez pas cela va venir...</p> </div> <p>Cet partie du site affiche tous les modèles définis et déclarés dans le fichier de contrôle de l'administration du site. Les objets sont regroupés par application (pour notre cas, uniquement l'application Catalog à cette étape des travaux). Vous pouvez cliquez sur chacun des noms d'objet publiés pour accéder à l'écran qui gère les informations sur les objets de ce type contenu en base de données et vous pouvez les éditer et les modifier. Vous pouvez aussi cliquer sur le lien <strong>+ Ajouter</strong> pour créer un nouvel enregistrement.</p> -<p><img alt="Admin Site - Home page" src="https://mdn.mozillademos.org/files/13975/admin_home.png" style="display: block; height: 634px; margin: 0px auto; width: 998px;"></p> +<p><img alt="Admin Site - Home page" src="admin_home.png"></p> <p>Cliquez sur le lien <strong>+ Ajouter</strong> à la droite de l'objet Books pour créer un nouveau livre. Le site va afficher une page de saisie de données (analogue à celle ci-dessous). Notez que Django prend en compte le type de champs définit dans le modèle pour utiliser le widget associé ainsi que le champs <code>help_text</code> quand vous l'aviez défini. </p> <p>Entrez les valeurs des champs. Pour les champs qui relèvent de relations entre objet, vous pouvez utiliser le bouton + pour accéder en cascade au formulaire de saisie des informations nécessaires à la créarion de cette objet. Vous pouvez aussi sélectionner un objet si d'autres avaient été créés précédement. Ne pas oublier de cliquer sur <strong>Enregistrer et ajouter un nouveau</strong> ou <strong>Enregistrer et continuer les modification</strong> pour sauvegarder en base de données les informations saisies.</p> -<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p> +<p><img alt="Admin Site - Book Add" src="admin_book_add.png"></p> <div class="note"> -<p><strong>Note</strong>: À ce stade, prenez le temps d'enregistrer plusieurs livres, genres et auteurs. Assurez-vous que chacun est associé à plusieurs autres éléments cela rendra vos listes à venir plus riches et intéressantes quand nous aborderons ces sujets.</p> +<p><strong>Note :</strong> À ce stade, prenez le temps d'enregistrer plusieurs livres, genres et auteurs. Assurez-vous que chacun est associé à plusieurs autres éléments cela rendra vos listes à venir plus riches et intéressantes quand nous aborderons ces sujets.</p> </div> <p>Après avoir saisie les informations et ajouté vos livres, cliquez sur le lien <strong>Accueil</strong> pour revenir à la page principale du site d'administration. Cliquez sur le lien <strong>Books</strong> pour afficher la liste des livres enregistrés (ou sur d'autres liens pour voir les autres objets présents en base). Après avoir ajouter quelques livres, votre page devrait ressembler à celle ci-dessous. La liste des livres est affichée par titre ; c'est, en fait, la valeur délivrée par la méthode <code>__str__()</code> du modèle d'objet Book comme cela a été codé dans le précédent chapitre.</p> -<p><img alt="Admin Site - List of book objects" src="https://mdn.mozillademos.org/files/13935/admin_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 407px; margin: 0px auto; width: 1000px;"></p> +<p><img alt="Admin Site - List of book objects" src="admin_book_list.png"></p> <p>À partir de la liste affichée, vous pouvez supprimer des instances en selectionnant les items par les cases à cocher à gauche du titre puis <em>supprimer...</em> dans la liste des actions proposée puis en cliquant sur <strong>Envoyer</strong>. Vous pouvez aussi ajouter des livres en cliquant sur <strong>AJOUTER BOOK</strong>.</p> <p>Vous pouvez editer un livre en cliquant son nom sur la liste des ouvrages. La page d'édition, image ci-dessous, est proche de celle d'ajout d'un livre. Les principales différences sont le titre de la page (Modification de book, au lieu d'ajout de bbok), l'ajout en rouge du bouton supprimer, l'historique des modifications et voir sur le site. Ce dernier bouton est visible car nous créer la méthode <code>get_absolute_url()</code> dans la définition du modèle de données (à ce stade, une erreur sera provoquée si vous cliquez sur ce bouton).</p> -<p><img alt="Admin Site - Book Edit" src="https://mdn.mozillademos.org/files/13977/admin_book_modify.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p> +<p><img alt="Admin Site - Book Edit" src="admin_book_modify.png"></p> <p>Revenez à la page d'accueil (à l'aide du lien <strong>Accueil</strong> du fil d'Ariane), puis affichez les listes des <strong>Authors</strong> et des <strong>Genres</strong>. Vous devriez déjà en avoir créé un certain nombre à partir de l'ajout des nouveaux livres, mais n'hésitez pas à en ajouter d'autres.</p> <p>Ce qui manque actuellement ce sont des <em>Book Instances</em>. Vous n'en avez pas car elles ne sont pas créées à partir des objets Books (bien que vous pourriez créer un objet <code>Book</code> à partir d'un objet <code>BookInstance</code> car c'est la nature de la relation <code>ForeignKey</code>). Retournez à la page d'acceuil et cliquez sur le bouton <strong>Ajouter</strong> associé aux objets Book Instance et accéder à l'écran de création. Vous pouvez noter le très grand identifiant unique global utilisé pour identifier séparelment les ouvrages.</p> -<p><img alt="Admin Site - BookInstance Add" src="https://mdn.mozillademos.org/files/13981/admin_bookinstance_add.png" style="border-style: solid; border-width: 1px; display: block; height: 514px; margin: 0px auto; width: 863px;"></p> +<p><img alt="Admin Site - BookInstance Add" src="admin_bookinstance_add.png"></p> <p>Créez plusieurs de ces enregistrements pour chacun de vos livres. Définissez un statut <strong>Available</strong> (<em>Disponible</em>) pour certains d'entre eux et <strong>On loan</strong> (<em>Prêt</em>) pour d’autres. Pour un statut différent de <em>Available</em>, vous devrez préciser une date d'échéance à venir.</p> @@ -141,10 +142,10 @@ Cela devrait être de la forme : <code>admin.site.register(Language)</code> et n <li>Ajouter des options supplémentaires au menu Actions dans les vues de liste et choisir l'emplacement où ce menu est affiché dans le formulaire.</li> </ul> </li> - <li><span class="tlid-translation translation" lang="fr"><span title="">Vues détaillées</span></span> + <li>Vues détaillées <ul> - <li><span class="tlid-translation translation" lang="fr"><span title="">Choisir les champs à afficher (ou à exclure), ainsi que leur ordre, leur groupement, leur caractère modifiable, le widget utilisé, leur orientation, etc.</span></span></li> - <li><span class="tlid-translation translation" lang="fr"><span title="">Ajouter des champs associés à un enregistrement pour permettre la modification en ligne (par exemple, ajoutez la possibilité d'ajouter et de modifier des enregistrements de livre lors de la création de leur auteur).</span></span></li> + <li>Choisir les champs à afficher (ou à exclure), ainsi que leur ordre, leur groupement, leur caractère modifiable, le widget utilisé, leur orientation, etc.</li> + <li>Ajouter des champs associés à un enregistrement pour permettre la modification en ligne (par exemple, ajoutez la possibilité d'ajouter et de modifier des enregistrements de livre lors de la création de leur auteur).</li> </ul> </li> </ul> @@ -195,7 +196,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>La liste des auteurs (objet <code>Author</code>) est affichée dans l'application <em>LocalLibrary</em> à l'aide du nom généré par la méthode <code>__str__()</code>. Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive <a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin">list_display</a> pour ajouter d'autres champs de l'objet <code>Author</code>.</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Modifiez votre classe <code>AuthorAdmin</code> comme décrit ci-dessous (vous pouvez copier et coller le code).</span> <span title="">Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à </span></span><span class="tlid-translation translation" lang="fr"><span title="">ceux spécifiés dans votre modèle d'objet <code>Author</code>.</span></span></p> +<p>Modifiez votre classe <code>AuthorAdmin</code> comme décrit ci-dessous (vous pouvez copier et coller le code). Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à ceux spécifiés dans votre modèle d'objet <code>Author</code>.</p> <pre class="brush: python">class AuthorAdmin(admin.ModelAdmin): list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death') @@ -203,7 +204,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir une page équivalente à celle ci-dessous :</p> -<p><img alt="Admin Site - Improved Author List" src="https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png" style="border-style: solid; border-width: 1px; display: block; height: 302px; margin: 0px auto; width: 941px;"></p> +<p><img alt="Admin Site - Improved Author List" src="admin_improved_author_list.png"></p> <p>Pour les livres, nous allons visulaiser les objets <code>Book</code> en affichant les champs <code>author</code> and <code>genre</code>. Le champs <code>author</code> est de type <code>ForeignKey</code> décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode <code>__str__()</code> de l'objet <code>Author</code> pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe <code>BookAdmin</code> comme suit :</p> @@ -211,10 +212,10 @@ class BookInstanceAdmin(admin.ModelAdmin): list_display = ('title', 'author', 'display_genre') </pre> -<p>Le champ <font face="Consolas, Liberation Mono, Courier, monospace">genre </font>représente une relation n à n (<code>ManyToManyField</code>) qui ne peut pas être prise en charge par la directive <code>list_display</code>. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(<code>display_genre</code>) qui permettra de traiter l'affichage des informations souhaitées pour le genre.</p> +<p>Le champ genre représente une relation n à n (<code>ManyToManyField</code>) qui ne peut pas être prise en charge par la directive <code>list_display</code>. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(<code>display_genre</code>) qui permettra de traiter l'affichage des informations souhaitées pour le genre.</p> <div class="note"> -<p><strong>Note</strong>: C'est dans un but pédagogique que nous recherchons ici l'affichage du <code>genre</code> qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.</p> +<p><strong>Note :</strong> C'est dans un but pédagogique que nous recherchons ici l'affichage du <code>genre</code> qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.</p> </div> <p>Ajoutez le code ci-dessous dans votre modèle d'objet <code>Book</code> (concrètement dans le fichier <strong>locallibrary/catalog/models.py</strong>). Cette fonction génère une chaîne de caractère contenant les trois premières valeurs de tous les genres (s'ils existent) et créer une courte destription (<code>short_description</code>) qui sera utilisé par le site d'administration avec cette méthode.</p> @@ -228,12 +229,12 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>Après avoir sauvegardé vos fichiers models.py et admin.py, vous pouvez accéder à la page web d'administration des livres et vous y découvrirez une page semblable à celle ci-dessous :</p> -<p><img alt="Admin Site - Improved Book List" src="https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 337px; margin: 0px auto; width: 947px;"></p> +<p><img alt="Admin Site - Improved Book List" src="admin_improved_book_list.png"></p> <p>Les champs <code>Genre</code> <code>Language</code> ne dispose que d'une seule valeur. Il n'est donc pas utile de créer une page d'affichage spélicale.</p> <div class="note"> -<p><strong>Note</strong>: Vous trouverez en fin d'article dans la défis personnel des propositions pour améliorer les ouvrages en prêt <code>BookInstance</code> !</p> +<p><strong>Note :</strong> Vous trouverez en fin d'article dans la défis personnel des propositions pour améliorer les ouvrages en prêt <code>BookInstance</code> !</p> </div> <h3 id="Ajouter_des_filtres">Ajouter des filtres</h3> @@ -246,14 +247,14 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>La page de la vue en liste des ouvrages à consultation (BookInstance) est désormais agrémentée d'un bloc de filtrage par statut (champs status) et date de retour (due back). Vous pouvez sélectionner la valeur de ces deux critères de filtrage (remarquez la manière avec laquelle les valeurs des critères est proposée).</p> -<p><img alt="Admin Site - BookInstance List Filters" src="https://mdn.mozillademos.org/files/14037/admin_improved_bookinstance_list_filters.png" style="height: 528px; width: 960px;"></p> +<p><img alt="Admin Site - BookInstance List Filters" src="admin_improved_bookinstance_list_filters.png"></p> <h3 id="Organiser_la_vue_d'affichage_d'un_modèle">Organiser la vue d'affichage d'un modèle</h3> <p>La vue est agencée, par défaut, en affichant verticalement dans l'ordre de déclaration des champs de l'objet modèle. Cette règle d'affichage peut être modifiée en indiquant quels champs afficher (ou exclure) et organiser les informations en sections avec un affichage horizontal ou vertical et les widgets à utiliser.</p> <div class="note"> -<p><strong>Note</strong>: Les modèles de l'application <em>LocalLibrary</em> ne sont pas très compliqués sans énormément d'information à traiter. Il n'y a pas un grand besoin de changement d'affichage ; les éléments ci-dessous sont données pour avoir une idée des possibilités et savoir, le moment venu, comment faire.</p> +<p><strong>Note :</strong> Les modèles de l'application <em>LocalLibrary</em> ne sont pas très compliqués sans énormément d'information à traiter. Il n'y a pas un grand besoin de changement d'affichage ; les éléments ci-dessous sont données pour avoir une idée des possibilités et savoir, le moment venu, comment faire.</p> </div> <h4 id="Contrôler_l'affichage_et_la_dispostion_des_champs">Contrôler l'affichage et la dispostion des champs</h4> @@ -269,10 +270,10 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>La page web de votre application locale devrait ressembler à celle ci-dessous :</p> -<p><img alt="Admin Site - Improved Author Detail" src="https://mdn.mozillademos.org/files/14027/admin_improved_author_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 282px; margin: 0px auto; width: 928px;"></p> +<p><img alt="Admin Site - Improved Author Detail" src="admin_improved_author_detail.png"></p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez aussi utiliser l'attribut <code>exclude</code> pour identifier des attributs du modèle que vous souhaitez exclure de l'affichage (les autres attributs seront alors affichés). Pour plus de détails vous pouvez consulter la documentation Django sur l'attribut <a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin.exclude">exclude</a>.</p> +<p><strong>Note :</strong> Vous pouvez aussi utiliser l'attribut <code>exclude</code> pour identifier des attributs du modèle que vous souhaitez exclure de l'affichage (les autres attributs seront alors affichés). Pour plus de détails vous pouvez consulter la documentation Django sur l'attribut <a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin.exclude">exclude</a>.</p> </div> <h4 id="Organiser_des_sections_dans_votre_vue_de_détail">Organiser des sections dans votre vue de détail</h4> @@ -298,7 +299,7 @@ class BookInstanceAdmin(admin.ModelAdmin): <p>Le résultat de cette description devrait vous apparaître de manière analogue à celle présente ci-dessous :</p> -<p><img alt="Admin Site - Improved BookInstance Detail with sections" src="https://mdn.mozillademos.org/files/14029/admin_improved_bookinstance_detail_sections.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 947px;"></p> +<p><img alt="Admin Site - Improved BookInstance Detail with sections" src="admin_improved_bookinstance_detail_sections.png"></p> <h3 id="Publier_des_enregistrements_associés">Publier des enregistrements associés</h3> @@ -317,12 +318,12 @@ class BookAdmin(admin.ModelAdmin): <p>Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées :</p> -<p><img alt="Admin Site - Book with Inlines" src="https://mdn.mozillademos.org/files/14033/admin_improved_book_detail_inlines.png" style="border-style: solid; border-width: 1px; display: block; height: 889px; margin: 0px auto; width: 937px;"></p> +<p><img alt="Admin Site - Book with Inlines" src="admin_improved_book_detail_inlines.png"></p> <p>Dans le cas présent nous avons juste décidé d'afficher toutes les informations des copies associées à un livre. Si vous consultez sur la documentation Django les informations relatives au type <a href="https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> vous aurez accès à l'ensemble des éléments qui permettent de filtrer et afficher les éléments dont vous aurez besoin. </p> <div class="note"> -<p><strong>Note</strong>: Il y a quelques limitations pénibles à ces outils. Si vous observez bien la liste des copies pour un ouvrage, vous decouvrirez des copies fantômes sans nom et informations pré-reservées pour de futures instances à enregistrer. Il serait préférable de ne pas les avoir et vous devriez alors appliquer un filtre pour éliminer de l'affichage ces copies. Vous pourriez aussi ajouter une section particulière pour permettre d'ajouter de nouvelles copies dans les rayonnages... La première solution est assez rapide à traiter en utilisant l'attribut <code>extra</code> à 0 dans la définition de l'objet <code>BooksInstanceInline</code> ... essayez !</p> +<p><strong>Note :</strong> Il y a quelques limitations pénibles à ces outils. Si vous observez bien la liste des copies pour un ouvrage, vous decouvrirez des copies fantômes sans nom et informations pré-reservées pour de futures instances à enregistrer. Il serait préférable de ne pas les avoir et vous devriez alors appliquer un filtre pour éliminer de l'affichage ces copies. Vous pourriez aussi ajouter une section particulière pour permettre d'ajouter de nouvelles copies dans les rayonnages... La première solution est assez rapide à traiter en utilisant l'attribut <code>extra</code> à 0 dans la définition de l'objet <code>BooksInstanceInline</code> ... essayez !</p> </div> <h2 id="Défi">Défi</h2> @@ -354,18 +355,18 @@ class BookAdmin(admin.ModelAdmin): <ul> <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Didactique: Site web "Bibliothèque locale"</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django didactique Section 2: Créer le squelette du site web</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django didactique Section 3: Utilisation des modèles de données</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django didactique Section 4 : Site d'administration de Django</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django didactique Section 5: Créer la page d'accueil</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a> </li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a> </li> </ul> diff --git a/files/fr/learn/server-side/django/development_environment/index.html b/files/fr/learn/server-side/django/development_environment/index.html index 4ba256c3a7..326bce1716 100644 --- a/files/fr/learn/server-side/django/development_environment/index.html +++ b/files/fr/learn/server-side/django/development_environment/index.html @@ -7,9 +7,9 @@ translation_of: Learn/Server-side/Django/development_environment <div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div> -<p class="summary">Maintenant que vous savez à quoi sert Django, nous allons vous montrer comment mettre en place et tester un environnement de développement Django sous Windows, Linux (Ubuntu) et macOS — Peu importe votre système d'exploitation, cet article devrait vous fournir de quoi commencer à développer des applications Django.</p> +<p>Maintenant que vous savez à quoi sert Django, nous allons vous montrer comment mettre en place et tester un environnement de développement Django sous Windows, Linux (Ubuntu) et macOS — Peu importe votre système d'exploitation, cet article devrait vous fournir de quoi commencer à développer des applications Django.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -48,7 +48,7 @@ translation_of: Learn/Server-side/Django/development_environment <p>Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.</p> <div class="note"> -<p><strong>Note</strong>: D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la <a href="/fr/docs/Learn/Server-side/Django/development_environment">documentation appropriée peuvent-être trouvés ci-dessous</a>.</p> +<p><strong>Note :</strong> D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la <a href="/fr/docs/Learn/Server-side/Django/development_environment">documentation appropriée peuvent-être trouvés ci-dessous</a>.</p> </div> <h4 id="Quels_systèmes_dexploitation_sont_supportés">Quels systèmes d'exploitation sont supportés ?</h4> @@ -64,7 +64,7 @@ translation_of: Learn/Server-side/Django/development_environment <p>Si besoin, les versions de Python 3.5 et ultérieures peuvent être utilisées (le support pour Python 3.5 sera abandonné lors de la sortie des prochaines versions).</p> <div class="note"> -<p><strong>Note</strong>: Python 2.7 ne peut pas être utilisé avec Django 2.1 (la série Django 1.11.x est la dernière à supporter Python 2.7).</p> +<p><strong>Note :</strong> Python 2.7 ne peut pas être utilisé avec Django 2.1 (la série Django 1.11.x est la dernière à supporter Python 2.7).</p> </div> <h4 id="Où_peut-on_télécharger_Django">Où peut-on télécharger Django ?</h4> @@ -86,7 +86,7 @@ translation_of: Learn/Server-side/Django/development_environment <p>Dans cet article (et quasiment tout le module), nous utiliserons la base <em>SQLite</em>, qui sauvegarde ses données dans des fichiers. SQLite a été conçu pour être utilisé comme une base de données légère, mais elle ne peut pas supporter un haut niveau de compétition. Elle est cependant un excellent choix pour des applications qui sont prioritairement en lecture seule.</p> <div class="note"> -<p><strong>Note</strong>: Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (<em>django-admin</em>). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.</p> +<p><strong>Note :</strong> Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (<em>django-admin</em>). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.</p> </div> <h4 id="Installation_globale_ou_dans_un_environnement_virtuel_Python">Installation globale ou dans un environnement virtuel Python ?</h4> @@ -94,7 +94,7 @@ translation_of: Learn/Server-side/Django/development_environment <p>Lorsque vous installez Python3, vous obtenez un environnement global unique partagé par tout le code Python3. Bien que vous puissiez installer n'importe quel package Python souhaité dans cet environnement, vous ne pouvez disposer que d'une seule version d'un package donné à la fois.</p> <div class="note"> -<p><strong>Note</strong>: Les applications installées dans l'environnement global peuvent potentiellement entrer en conflit avec les autres (i.e. si elles dépendent de versions différentes d'un même package).</p> +<p><strong>Note :</strong> Les applications installées dans l'environnement global peuvent potentiellement entrer en conflit avec les autres (i.e. si elles dépendent de versions différentes d'un même package).</p> </div> <p>Si vous installez Django dans l'environnement par défaut/global, vous ne pourrez alors cibler qu'une seule version de Django sur votre machine. Cela peut devenir un problème si vous souhaitez créer de nouveaux sites web (utilisant la dernière version de Django) tout en maintenant d'autres sites web dépendant de versions antérieures.</p> @@ -110,15 +110,15 @@ translation_of: Learn/Server-side/Django/development_environment <p>Cette section décrit brièvement comment vérifier quelle version de Python sont disponibles, et comment installer de nouvelles versions si nécessaire, sur Ubuntu Linux 18.04, macOS et Windows 10.</p> <div class="note"> -<p><strong>Note</strong>: En fonction de votre plateforme, vous aurez probablement aussi besoin d'installer Python/pip depuis le gestionnaire de packages de votre système d'exploitation, ou via d'autre moyens. Pour la plupart des plateformes, vous pouvez télécharger les fichiers d'installation requis depuis <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> et les installer en utilisant la méthode appropriée à votre plateforme.</p> +<p><strong>Note :</strong> En fonction de votre plateforme, vous aurez probablement aussi besoin d'installer Python/pip depuis le gestionnaire de packages de votre système d'exploitation, ou via d'autre moyens. Pour la plupart des plateformes, vous pouvez télécharger les fichiers d'installation requis depuis <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> et les installer en utilisant la méthode appropriée à votre plateforme.</p> </div> <h3 id="Ubuntu_18.04">Ubuntu 18.04</h3> <p>Ubuntu Linux 18.04 LTS inclut par défaut Python 3.6.6. Vous pouvez vous en assurer en exécutant les commandes suivantes depuis le terminal bash :</p> -<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V - Python 3.6.6</span></pre> +<pre class="brush: bash">python3 -V + Python 3.6.6</pre> <p>Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est <strong>pas </strong>disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :</p> @@ -128,8 +128,8 @@ translation_of: Learn/Server-side/Django/development_environment <p>macOS "El Capitan"et les versions plus récentes n'incluent pas Python 3. Vous pouvez vous en assurer en exécutant les commandes suivantes dans votre terminal bash :</p> -<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V - </span>-bash: python3: command not found</pre> +<pre class="brush: bash">python3 -V + -bash: python3ommand not found</pre> <p>Vous pouvez facilement installer Python 3 (ainsi que l'outil <em>pip3</em>) sur <a href="https://www.python.org/">python.org</a>:</p> @@ -145,8 +145,8 @@ translation_of: Learn/Server-side/Django/development_environment <p>Vous pouvez désormais confirmer la bonne installation en vérifiant votre version de Python 3 comme indiqué ci-dessous :</p> -<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V - Python 3.7.2</span> +<pre class="brush: bash">python3 -V + Python 3.7.2 </pre> <p>Vous pouvez aussi vérifier que pip3 est correctement installé en listant les packages disponibles :</p> @@ -170,17 +170,17 @@ translation_of: Learn/Server-side/Django/development_environment <p>Vous pouvez ensuite vérifier que Python s'est correctement installé en tapant le texte suivant dans votre invite de commande :</p> -<pre class="brush: bash"><span style="line-height: 1.5;">py -3 -V - Python 3.7.2</span> +<pre class="brush: bash">py -3 -V + Python 3.7.2 </pre> <p>L'installeur Windows inclut <em>pip3</em> (le gestionnaire de packages Python) par défaut. Vous pouvez lister les packages installés de la manière suivante :</p> -<pre class="brush: bash"><span style="line-height: 1.5;">pip3 list</span> +<pre class="brush: bash">pip3 list </pre> <div class="note"> -<p><strong>Note</strong>: L'installeur devrait configurer tout ce dont vous avez besoin pour que les commandes ci-dessus fonctionnent. Toutefois, si vous obtenez un message vous indiquant que Python ne peut pas être trouvé (Python cannot be found), il est possible que vous ayez oublié de l'ajouter à votre PATH système. Vous pouvez faire cela en réexécutant l'installeur, sélectionnez "Modifier", puis cochez la case intitulée "Ajouter Python aux variables d'environnement" sur le deuxième page.</p> +<p><strong>Note :</strong> L'installeur devrait configurer tout ce dont vous avez besoin pour que les commandes ci-dessus fonctionnent. Toutefois, si vous obtenez un message vous indiquant que Python ne peut pas être trouvé (Python cannot be found), il est possible que vous ayez oublié de l'ajouter à votre PATH système. Vous pouvez faire cela en réexécutant l'installeur, sélectionnez "Modifier", puis cochez la case intitulée "Ajouter Python aux variables d'environnement" sur le deuxième page.</p> </div> <h2 id="Utiliser_Django_dans_un_environnement_virtuel_Python">Utiliser Django dans un environnement virtuel Python</h2> @@ -206,7 +206,7 @@ export PROJECT_HOME=$HOME/Devel source /usr/local/bin/virtualenvwrapper.sh</pre> <div class="note"> -<p><strong>Note</strong>: Les variables <code>VIRTUALENVWRAPPER_PYTHON</code> et <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>pointent vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).<br> +<p><strong>Note :</strong> Les variables <code>VIRTUALENVWRAPPER_PYTHON</code> et <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>pointent vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).<br> <br> Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes <code>which virtualenvwrapper.sh</code> et <code>which python3</code>.</p> </div> @@ -242,7 +242,7 @@ export PROJECT_HOME=$HOME/Devel source /usr/local/bin/virtualenvwrapper.sh</pre> <div class="note"> -<p><strong>Note</strong>: La variable <code>VIRTUALENVWRAPPER_PYTHON</code> pointe vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).</p> +<p><strong>Note :</strong> La variable <code>VIRTUALENVWRAPPER_PYTHON</code> pointe vers l'emplacement d'installation par défaut de Python3, et <code>source /usr/local/bin/virtualenvwrapper.sh</code> pointe vers l'emplacement par défaut du script <code>virtualenvwrapper.sh</code>. Si le <em>virtualenv</em> ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).</p> <p>Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :</p> @@ -257,7 +257,7 @@ source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.s <p>Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : <strong>.bash_profile</strong> dans votre répertoire home.</p> <div class="note"> -<p><strong>Note</strong>: Si vous n'arrivez pas à trouver le fichier <strong>.bash_profile</strong> depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.</p> +<p><strong>Note :</strong> Si vous n'arrivez pas à trouver le fichier <strong>.bash_profile</strong> depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.</p> <p>La commande sera la suivante :</p> @@ -298,7 +298,7 @@ virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get <p>Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.</p> <div class="note"> -<p><strong>Note</strong>: A partir de ce point dans l'article (et donc dans le module), vous pourrez considérer que toutes les commandes seront exécutées dans un environnement virtuel Python comme celui que nous avons mis en place plus haut.</p> +<p><strong>Note :</strong> A partir de ce point dans l'article (et donc dans le module), vous pourrez considérer que toutes les commandes seront exécutées dans un environnement virtuel Python comme celui que nous avons mis en place plus haut.</p> </div> <h3 id="Utiliser_un_environnement_virtuel">Utiliser un environnement virtuel</h3> @@ -329,7 +329,7 @@ py -3 -m django --version 2.1.5</pre> <div class="note"> -<p><strong>Note</strong>: Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :</p> +<p><strong>Note :</strong> Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :</p> <pre class="brush: bash">py -m django --version</pre> @@ -337,7 +337,7 @@ py -3 -m django --version </div> <div class="warning"> -<p><strong>Important</strong>: Le reste de ce <strong>module </strong>utilise les commandes <em>Linux</em> pour invoquer Python 3 (<code>python3</code>) . . Si vous travaillez sous <em>Windows </em>, remplacez simplement ce préfixe avec : <code>py -3</code></p> +<p><strong>Attention :</strong> Le reste de ce <strong>module </strong>utilise les commandes <em>Linux</em> pour invoquer Python 3 (<code>python3</code>) . . Si vous travaillez sous <em>Windows </em>, remplacez simplement ce préfixe avec : <code>py -3</code></p> </div> <h2 id="Tester_votre_installation">Tester votre installation</h2> @@ -369,7 +369,7 @@ Quit the server with CONTROL-C. </pre> <div class="note"> -<p><strong>Note </strong>: La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !</p> +<p><strong>Note :</strong> La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !</p> </div> <p>Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : <code>http://127.0.0.1:8000/</code>. Vous devriez voir un site ressemblant à celui-ci :</p> diff --git a/files/fr/learn/server-side/django/forms/index.html b/files/fr/learn/server-side/django/forms/index.html index 0c877c8946..2d63644055 100644 --- a/files/fr/learn/server-side/django/forms/index.html +++ b/files/fr/learn/server-side/django/forms/index.html @@ -17,13 +17,13 @@ translation_of: Learn/Server-side/Django/Forms <div>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</div> -<p class="summary">Dans cette formation nous allons vous montrer comment travailler avec les formulaires HTML sous Django afin de créer, modifier et supprimer des instances de modèle. Pour illustrer le raisonnement, nous allons étendre le site web <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> pour permettre aux bibliothécaires d'utiliser nos formulaires (plutôt que l'application d'administration par défaut) pour prolonger la durée de prêt des livres, et également pour ajouter, mettre à jour et supprimer des auteurs. </p> +<p>Dans cette formation nous allons vous montrer comment travailler avec les formulaires HTML sous Django afin de créer, modifier et supprimer des instances de modèle. Pour illustrer le raisonnement, nous allons étendre le site web <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> pour permettre aux bibliothécaires d'utiliser nos formulaires (plutôt que l'application d'administration par défaut) pour prolonger la durée de prêt des livres, et également pour ajouter, mettre à jour et supprimer des auteurs. </p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Avoir terminé les formations précédentes, y compris <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">Django Tutorial Part 8: User authentication and permissions</a>.</td> + <td>Avoir terminé les formations précédentes, y compris <a href="/fr/docs/Learn/Server-side/Django/authentication_and_sessions">Django Tutorial Part 8: User authentication and permissions</a>.</td> </tr> <tr> <th scope="row">Objectifs:</th> @@ -34,11 +34,11 @@ translation_of: Learn/Server-side/Django/Forms <h2 id="Vue_densemble">Vue d'ensemble</h2> -<p>Un <a href="/en-US/docs/Web/Guide/HTML/Forms">formulaire HTML</a> regroupe au moins un champ remplissable et des composants élémentaires d'interface web. Il peut être utilisé pour réunir des saisies de la part des utilisateurs avant envoi vers un serveur. Les formulaires sont souples: ils s'adaptent à plusieurs modes de saisie. En effet, Il existe des composants élementaires d'interfaces graphique pour des modes de saisie non contrainte avec une zone de saisie de texte, ou resteinte au type date avec un date picker, la saisie d'un variable optionnelle via une boîte à cocher, d'un choix à faire parmi plusieurs valeurs possibles avec les boutons radio etc... . Les formulaires permettent de partager des informations avec le serveur de manière relativement sécurisée car ils permettent d'envoyer des requêtes de type <code>POST</code> protégeant de la falsification des requêtes inter-site.</p> +<p>Un <a href="/fr/docs/Web/Guide/HTML/Forms">formulaire HTML</a> regroupe au moins un champ remplissable et des composants élémentaires d'interface web. Il peut être utilisé pour réunir des saisies de la part des utilisateurs avant envoi vers un serveur. Les formulaires sont souples: ils s'adaptent à plusieurs modes de saisie. En effet, Il existe des composants élementaires d'interfaces graphique pour des modes de saisie non contrainte avec une zone de saisie de texte, ou resteinte au type date avec un date picker, la saisie d'un variable optionnelle via une boîte à cocher, d'un choix à faire parmi plusieurs valeurs possibles avec les boutons radio etc... . Les formulaires permettent de partager des informations avec le serveur de manière relativement sécurisée car ils permettent d'envoyer des requêtes de type <code>POST</code> protégeant de la falsification des requêtes inter-site.</p> -<p>Bien que nous n'ayons pas encore créé de formulaire au cours de cette formation, nous en avons déjà rencontré sur l'interface d'administration Django Admin — par exemple la capture d'écran ci-dessous montre un formulaire d'édition de l'un de nos modèle de <a href="/en-US/docs/Learn/Server-side/Django/Models">Book</a> (livre), comprenant des composants élémentaires d'interface graphique de chois de valeur parmi une liste proposée, et des zones des saisie de texte.</p> +<p>Bien que nous n'ayons pas encore créé de formulaire au cours de cette formation, nous en avons déjà rencontré sur l'interface d'administration Django Admin — par exemple la capture d'écran ci-dessous montre un formulaire d'édition de l'un de nos modèle de <a href="/fr/docs/Learn/Server-side/Django/Models">Book</a> (livre), comprenant des composants élémentaires d'interface graphique de chois de valeur parmi une liste proposée, et des zones des saisie de texte.</p> -<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="Admin Site - Book Add" src="admin_book_add.png"></p> <p>Travailler avec des formulaires peut s'avérer compliqué ! Les développeurs doivent non seulement écrire le code HTML pour le formulaire, mais aussi vérifier et corriger sur le serveur les données saisies (et éventuellement aussi dans le navigateur), renvoyer le formulaire avec des messages d'erreur pour informer les usagers de tout champ invalide, prendre en charge les données quand elles passent l'étape de vérification, et finalement renvoyer une information à l'utilisateur d'une manière ou d'une autre pour indiquer ce succès. Les formulaires sous Django enlèvent beaucoup de travail à chacune de ces étapes, grâce à un cadriciel qui permet de déclarer des formulaires et leurs champs à travers un langage de programmation, puis d'utiliser ces objets non seulement pour générer le code HTML, mais aussi une grosse partie de la vérification des données et du retour d'information à l'utilisateur.</p> @@ -46,9 +46,9 @@ translation_of: Learn/Server-side/Django/Forms <h2 id="Formulaires_HTML">Formulaires HTML</h2> -<p>D'abord, un premier aperçu des formulaires HTML (<a href="/en-US/docs/Learn/HTML/Forms" style='background-color: rgb(255, 255, 255); font-family: "Open Sans", arial, x-locale-body, sans-serif;'>HTML Forms</a>). <span style='background-color: #ffffff; color: #333333; font-family: "Open Sans",arial,x-locale-body,sans-serif;'>Soit un formulaire HTML simple, composé d'un unique champ de saisie texte , présent pour y entrer le nom d'une "équipe" quelconque, et son sa description dans l'étiquette associée :</span></p> +<p>D'abord, un premier aperçu des formulaires HTML (<a href="/fr/docs/Learn/HTML/Forms">HTML Forms</a>). Soit un formulaire HTML simple, composé d'un unique champ de saisie texte , présent pour y entrer le nom d'une "équipe" quelconque, et son sa description dans l'étiquette associée :</p> -<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p> +<p><img alt="Simple name field example in HTML form" src="form_example_name_field.png"></p> <p>Le formulaire est défini en HTML comme une collection d'éléments enfermés entre deux balises <form> ... </form> contenant au moins une balise <input> dont la valeur d'attribut 'type' doit valoir "submit":</p> @@ -61,7 +61,7 @@ translation_of: Learn/Server-side/Django/Forms <p>Bien qu'ici nous n'ayons qu'un champ de saisie texte destiné à recevoir le nom d'équipe, une formulaire <em>pourrait</em> avoir un nombre quelconque d'autres champs de saisie et leurs étiquettes de description associées. La valeur de l'attribut 'type' définit la sorte de composant élementaire d'interface graphique affichée. Les attributs 'id' et 'name' permettent d'identifier le champ en JavaScript/CSS/HTML alors que l'attribut 'value' définit la valeur initiale du champ lorsqu'il est affiché pour la première fois. La description associée est déclarée par la balise <label> (voir "Enter Name" au dessus) , avec un attribut 'for' devant contenir la valeur de l'attribut 'id' du champ imput à laquelle on souhaite l'associer. </p> -<p>La balise <code><input></code> dont l'attribut <code>'type'</code> vaut <code>submit</code> sera affichée (par défaut) comme un bouton qui peut être cliqué par l'utilisateur pour envoyer vers le serveur les données figurant dans tous les autres éléments de formulaire <input> (dans le cas présent, la valeur actuelle de <code>'team name'</code>. Les attributs de<font face="consolas, Liberation Mono, courier, monospace"> formulaire déterminent d'une part la méthode HTTP (attribut method) utilisée pour envoyer les donnnées et d'autre part la destination des données sur le serveur (attribut <code>action </code>):</font></p> +<p>La balise <code><input></code> dont l'attribut <code>'type'</code> vaut <code>submit</code> sera affichée (par défaut) comme un bouton qui peut être cliqué par l'utilisateur pour envoyer vers le serveur les données figurant dans tous les autres éléments de formulaire <input> (dans le cas présent, la valeur actuelle de <code>'team name'</code>. Les attributs de formulaire déterminent d'une part la méthode HTTP (attribut method) utilisée pour envoyer les donnnées et d'autre part la destination des données sur le serveur (attribut <code>action </code>):</p> <ul> <li><code>action</code> : Il s'agit de la destination (ressource ou URL) où sont envoyées les données lorsque le formulaire est soumis. Si la valeur de cet attribut n'est pas initialisée (ou la chaine vide est affectée à cet attribut), alors le formulaire sera renvoyé à l' URL de la page courante.</li> @@ -83,7 +83,7 @@ translation_of: Learn/Server-side/Django/Forms <p>Voici ci-dessous un diagramme représentant les étapes de gestion d'un formulaire de requêtes, commencant par la demande par le navigateur d'une page, dont le code HTML se trouve contenir un formulaire (en vert).</p> -<p><img alt="Updated form handling process doc." src="https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png" style="display: block; height: 569px; margin: 0px auto; width: 800px;"></p> +<p><img alt="Updated form handling process doc." src="Form%20Handling%20-%20Standard.png"></p> <p>En se basant sur la lecture du diagramme ci-dessus, les tâches principales dont s'aquitte Django à l'occasion de la gestion d'un formulaire sont : </p> @@ -209,12 +209,12 @@ class RenewBookForm(forms.Form): <p>La configuration d'URL va rediriger les URLs ayant le format <strong>/catalog/book/<em><bookinstance id></em>/renew/</strong> vers la fonction appelée <code>renew_book_librarian()</code> dans <strong>views.py</strong>, et envoyer l'id de <code>BookInstance</code> comme paramètre sous le nom <code>pk</code>. Le pattern ne fonctionnera que si <code>pk</code> est un <code>uuid</code> correctement formaté.</p> <div class="note"> -<p><strong>Note </strong>: Nous pouvons appeler comme bon nous semble la donnée d'URL "<code>pk</code>" que nous avons capturée, car nous contrôlons complètement la fonction de notre <em>view</em> (nous n'utilisons pas une vue générique <em>detail</em>, laquelle attendrait des paramètres avec un certain nom). Cependant, le raccourci <code>pk</code>, pour "primary key", est une convention qu'il est raisonnable d'utiliser !</p> +<p><strong>Note :</strong> Nous pouvons appeler comme bon nous semble la donnée d'URL "<code>pk</code>" que nous avons capturée, car nous contrôlons complètement la fonction de notre <em>view</em> (nous n'utilisons pas une vue générique <em>detail</em>, laquelle attendrait des paramètres avec un certain nom). Cependant, le raccourci <code>pk</code>, pour "primary key", est une convention qu'il est raisonnable d'utiliser !</p> </div> <h3 id="Vue">Vue</h3> -<p>Comme nous l'avons expliqué ci-dessus dans <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms#django_form_handling_process">Django form handling process</a>, la vue doit retourner le formulaire par défaut s'il est appelé pour la première fois, et ensuite soit le retourner à nouveau avec les messages d'erreur si les données sont invalides, soit gérer les données et rediriger vers une nouvelle page si elles sont valides. Pour effectuer ces différentes actions, la vue doit être en mesure de savoir si elle est appelée pour la première fois (et retourner le formulaire par défaut) ou pour la deuxième fois ou plus (et valider les données).</p> +<p>Comme nous l'avons expliqué ci-dessus dans <a href="/fr/docs/Learn/Server-side/Django/Forms#django_form_handling_process">Django form handling process</a>, la vue doit retourner le formulaire par défaut s'il est appelé pour la première fois, et ensuite soit le retourner à nouveau avec les messages d'erreur si les données sont invalides, soit gérer les données et rediriger vers une nouvelle page si elles sont valides. Pour effectuer ces différentes actions, la vue doit être en mesure de savoir si elle est appelée pour la première fois (et retourner le formulaire par défaut) ou pour la deuxième fois ou plus (et valider les données).</p> <p>Pour les formulaires qui utilisent une requête <code>POST</code> pour envoyer une information au serveur, la manière la plus commune de procéder pour la vue est de tester le type de requête <code>POST</code> (<code>if request.method == 'POST':</code>) pour repérer des requêtes de type validation de formulaire, et <code>GET</code> (en utilisant une condition <code>else</code>) pour identifer une requête initiale de création de formulaire. Si vous voulez utiliser une requête <code>GET</code> pour envoyer vos données, alors une approche classique pour savoir si la vue est invoquée pour la première fois ou non est de lire les données du formulaire (p. ex. lire une valeur cachée dans le formulaire).</p> @@ -301,10 +301,10 @@ def renew_book_librarian(request, pk): <p>Si le formulaire est valide, alors nous pouvons commencer à utiliser les données, en y accédant à travers l'attribut <code>form.cleaned_data</code> (p. ex. <code>data = form.cleaned_data['renewal_date']</code>). Ici nous ne faisons que sauvegarder dans la valeur <code>due_back</code> de l'objet <code>BookInstance</code> associé les données reçues.</p> <div class="warning"> -<p><strong>Important </strong>: Alors que vous pouvez accéder aussi aux données de formulaire directement à travers la requête (par exemple <code>request.POST['renewal_date']</code>, ou <code>request.GET['renewal_date']</code> si vous utilisez une requête GET), ce n'est PAS recommandé. Les données nettoyées sont assainies, validées et converties en types standard Python.</p> +<p><strong>Attention :</strong> Alors que vous pouvez accéder aussi aux données de formulaire directement à travers la requête (par exemple <code>request.POST['renewal_date']</code>, ou <code>request.GET['renewal_date']</code> si vous utilisez une requête GET), ce n'est PAS recommandé. Les données nettoyées sont assainies, validées et converties en types standard Python.</p> </div> -<p>L'étape finale dans la partie "gestion de formulaire" de la vue est de rediriger vers une autre page, habituellement une page "success". Dans ce cas, nous utilisons <code>HttpResponseRedirect</code> et <code>reverse()</code> pour rediriger vers la vue appelée <code>'all-borrowed'</code> (qui a été créée dans la partie "challenge" de <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a>. Si vous n'avez pas créé cette page, vous pouvez rediriger vers la page d'accueil à l'URL '/').</p> +<p>L'étape finale dans la partie "gestion de formulaire" de la vue est de rediriger vers une autre page, habituellement une page "success". Dans ce cas, nous utilisons <code>HttpResponseRedirect</code> et <code>reverse()</code> pour rediriger vers la vue appelée <code>'all-borrowed'</code> (qui a été créée dans la partie "challenge" de <a href="/fr/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a>. Si vous n'avez pas créé cette page, vous pouvez rediriger vers la page d'accueil à l'URL '/').</p> <p>C'est tout ce qui est requis pour la gestion du formulaire lui-même, mais il nous faut encore restreindre l'accès à la vue aux seuls libraires. Nous devrions sans doute créer un nouveau réglage de permission dans <code>BookInstance</code> ("<code>can_renew</code>"), mais, pour ne pour ne pas compliquer les choses ici, nous allons simplement utiliser le décorateur de fonction <code>@permission_required</code> avec notre permission existante <code>can_mark_returned</code>.</p> @@ -372,7 +372,7 @@ def renew_book_librarian(request, pk): <p>La majeure partie de ce code devrait vous être familière si vous avez suivi les tutoriels précédents. Nous étendons le template de base et ensuite redéfinissons le block "content". Nous sommes en mesure de référencer <code>\{{ book_instance }}</code> (et ses variables), puisqu'il a été passé dans l'objet context par la fonction <code>render()</code>, et nous utilisons tout cela pour lister le titre du livre, son emprunteur et la date originale de retour.</p> -<p>Le code du formulaire est relativement simple. Nous déclarons d'abord les tags <code>form</code>, en précisant où le formulaire doit être adressé (<code>action</code>) et la <code>method</code> utilisée pour soumettre les donées (ici un "HTTP POST"). Si vous vous rappelez ce qui a été dit en haut de cette page (aperçu sur les <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms#HTML_forms">HTML Forms</a>), une <code>action</code> vide comme ici signifie que les données de formulaire seront postées à nouveau à l'URL actuelle (ce qui est le comportement que nous voulons !). À l'intérieur des tags, nous définissons le bouton , sur lequel l'utilisateur peut appuyer pour envoyer les données. Le <code>{% csrf_token %}</code> ajouté juste à l'intérieur des tags "form" est un des éléments de protection utilisés par Django contre les "cross-site forgery".</p> +<p>Le code du formulaire est relativement simple. Nous déclarons d'abord les tags <code>form</code>, en précisant où le formulaire doit être adressé (<code>action</code>) et la <code>method</code> utilisée pour soumettre les donées (ici un "HTTP POST"). Si vous vous rappelez ce qui a été dit en haut de cette page (aperçu sur les <a href="/fr/docs/Learn/Server-side/Django/Forms#HTML_forms">HTML Forms</a>), une <code>action</code> vide comme ici signifie que les données de formulaire seront postées à nouveau à l'URL actuelle (ce qui est le comportement que nous voulons !). À l'intérieur des tags, nous définissons le bouton , sur lequel l'utilisateur peut appuyer pour envoyer les données. Le <code>{% csrf_token %}</code> ajouté juste à l'intérieur des tags "form" est un des éléments de protection utilisés par Django contre les "cross-site forgery".</p> <div class="note"> <p><strong>Note :</strong> Ajoutez le <code>{% csrf_token %}</code> à tout template Django que vous créeez et qui utilise <code>POST</code> pour soumettre les données. Cela réduira les risques qu'un utilisateur mal intentionné pirate vos formulaires.</p> @@ -426,12 +426,12 @@ def renew_book_librarian(request, pk): <h3 id="Tester_la_page">Tester la page</h3> -<p>Si vous avez accepté le "challenge" dans <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a>, vous avez une liste de tous les livres empruntés dans la bibliothèque, ce qui n'est visible que pour le staff de la bibliothèque. Nous pouvons ajouter un lien vers notre page de renouvellement après chaque élément, en utilisant le code de template suivant.</p> +<p>Si vous avez accepté le "challenge" dans <a href="/fr/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a>, vous avez une liste de tous les livres empruntés dans la bibliothèque, ce qui n'est visible que pour le staff de la bibliothèque. Nous pouvons ajouter un lien vers notre page de renouvellement après chaque élément, en utilisant le code de template suivant.</p> <pre class="brush: html">{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}</pre> <div class="note"> -<p><strong>Note </strong>: Souvenez-vous que votre login de test devra avoir la permission "<code>catalog.can_mark_returned</code>" pour pouvoir accéder la page de renouvellement de livre (utilisez peut-être votre compte superuser).</p> +<p><strong>Note :</strong> Souvenez-vous que votre login de test devra avoir la permission "<code>catalog.can_mark_returned</code>" pour pouvoir accéder la page de renouvellement de livre (utilisez peut-être votre compte superuser).</p> </div> <p>Vous pouvez aussi construire manuellement une URL de test comme ceci : <a class="external" href="http://127.0.0.1:8000/catalog/book/<bookinstance id>/renew/" rel="noopener">http://127.0.0.1:8000/catalog/book/<em><bookinstance_id></em>/renew/</a> (un id de bookinstance valide peut être obtenu en navigant vers une page de détail de livre dans votre bibliothèque, et en copiant le champ <code>id</code>).</p> @@ -440,15 +440,15 @@ def renew_book_librarian(request, pk): <p>Si tout a bien marché, le formulaire par défaut ressemblera à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14209/forms_example_renew_default.png" style="border-style: solid; border-width: 1px; display: block; height: 292px; margin: 0px auto; width: 680px;"></p> +<p><img alt="" src="forms_example_renew_default.png"></p> <p>Le formulaire avec valeur erronée ressemblera à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14211/forms_example_renew_invalid.png" style="border-style: solid; border-width: 1px; display: block; height: 290px; margin: 0px auto; width: 658px;"></p> +<p><img alt="" src="forms_example_renew_invalid.png"></p> <p>La liste de tous les livres avec les liens vers le renouvellement ressemblera à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14207/forms_example_renew_allbooks.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 613px;"></p> +<p><img alt="" src="forms_example_renew_allbooks.png"></p> <h2 id="ModelForms">ModelForms</h2> @@ -468,7 +468,7 @@ class RenewBookModelForm(ModelForm): </pre> <div class="note"> -<p><strong>Note </strong>: Cela peut ne pas sembler beaucoup plus simple que d'utiliser un simple <code>Form</code>, et ça ne l'est effectivement pas dans ce cas, parce que nous n'avons qu'un seul champ. Cependant, si vous avez beaucoup de champs, cela peut réduire notablement la quantité de code !</p> +<p><strong>Note :</strong> Cela peut ne pas sembler beaucoup plus simple que d'utiliser un simple <code>Form</code>, et ça ne l'est effectivement pas dans ce cas, parce que nous n'avons qu'un seul champ. Cependant, si vous avez beaucoup de champs, cela peut réduire notablement la quantité de code !</p> </div> <p>Le reste de l'information vient des définitions de champ données par le modèle (par ex. les labels, les widgets, le texte d'aide, les messages d'erreur). S'ils ne sont pas suffisamment satisfaisants, nous pouvons les réécrire dans notre <code>class Meta</code>, en précisant un dictionnaire contenant le champ à modifier et sa nouvelle valeur. Par exemple, dans ce formulaire, nous pourrions souhaiter, pour notre champ, un label tel que "<em>Renewal date</em>" (plutôt que celui par défaut, basé sur le nom du champ : <em>Due Back</em>), et nous voulons aussi que notre texte d'aide soit spécifique à ce cas d'utilisation. La classe <code>Meta</code> ci-dessous vous montre comment réécrire ces champs, et vous pouvez pareillement définir <code>widgets</code> et <code>error_messages</code> si les valeurs par défaut ne sont pas suffisantes.</p> @@ -514,7 +514,7 @@ class RenewBookModelForm(ModelForm): <p>L'algorithme de gestion des formulaires que nous avons utilisé ci-dessus dans notre exemple de vue basée sur une fonction, représente un processus extrêmement commun dans vues destinées à éditer un formulaire. Django abstrait pour vous la plus grande partie de ce processus répétitif ("boilerplate") en proposant des <a class="external" href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/" rel="noopener">generic editing views</a> pour les vues de création, éditition et suppression basées sur des modèles. Ces vues génériques non seulement assument le comportement d'une vue, mais elles créent automatiquement la classe de formulaire (un <code>ModelForm</code>) pour vous à partir du modèle.</p> <div class="note"> -<p><strong>Note : </strong>En plus des vues d'édition décrites ici, il existe aussi une classe <a class="external" href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/#formview" rel="noopener">FormView</a>, qui se tient, en termes de rapport "flexibilité"/"effort codage", à mi-chemin entre notre vue basée sur une fonction et les autres vues génériques. En utilisant <code>FormView</code>, vous avez encore besoin de créer votre <code>Form</code>, mais vous n'avez pas besoin d'implémenter tous les éléments d'une gestion standard de formulaire. À la place, vous n'avez qu'à fournir une implémentation de la fonction qui sera appelée une fois que les données envoyées sont reconnues valides.</p> +<p><strong>Note :</strong> En plus des vues d'édition décrites ici, il existe aussi une classe <a class="external" href="https://docs.djangoproject.com/en/2.1/ref/class-based-views/generic-editing/#formview" rel="noopener">FormView</a>, qui se tient, en termes de rapport "flexibilité"/"effort codage", à mi-chemin entre notre vue basée sur une fonction et les autres vues génériques. En utilisant <code>FormView</code>, vous avez encore besoin de créer votre <code>Form</code>, mais vous n'avez pas besoin d'implémenter tous les éléments d'une gestion standard de formulaire. À la place, vous n'avez qu'à fournir une implémentation de la fonction qui sera appelée une fois que les données envoyées sont reconnues valides.</p> </div> <p>Dans cette section, nous allons utiliser des vues génériques d'édition pour créer des pages afin de pouvoir ajouter les fonctionnalités de création, d'édition et de suppression des enregistrements de type <code>Author</code> de notre bibliothèque, en fournissant efficacement une réimplémentation basique de certaines parties du site Admin (cela peut être intéressant si vous avez besoin d'offrir une fonctionnalité admin d'une manière plus flexible que ce qui peut être présenté par le site admin).</p> @@ -601,7 +601,7 @@ class AuthorDelete(DeleteView): <p>Les pages de création, modification et suppression d'auteur sont maintenant prêtes à être testées (nous ne nous mettons pas en peine pour cette fois, bien que vous puissiez le faire si vous le souhaiter, de les accrocher dans la barre latérale du site).</p> <div class="note"> -<p><strong>Note </strong>: Les utilisateurs observateurs auront remarqué que nous n'avons rien fait pour empêcher les utilisateurs non autorisés d'accéder ces pages ! Nous laissons cela comme exercice pour vous (suggestion : vous pourriez utiliser le <code>PermissionRequiredMixin</code>, et soit créer une nouvelle permission, soit réutiliser notre permission<code>can_mark_returned</code> ).</p> +<p><strong>Note :</strong> Les utilisateurs observateurs auront remarqué que nous n'avons rien fait pour empêcher les utilisateurs non autorisés d'accéder ces pages ! Nous laissons cela comme exercice pour vous (suggestion : vous pourriez utiliser le <code>PermissionRequiredMixin</code>, et soit créer une nouvelle permission, soit réutiliser notre permission<code>can_mark_returned</code> ).</p> </div> <h3 id="Test_de_la_page">Test de la page</h3> @@ -610,7 +610,7 @@ class AuthorDelete(DeleteView): <p>Ensuite naviguez à la page de création d'auteur : <a class="external" href="http://127.0.0.1:8000/catalog/author/create/" rel="noopener">http://127.0.0.1:8000/catalog/author/create/</a>, ce qui devrait ressembler à la capture d'écran ci-dessous.</p> -<p><img alt="Form Example: Create Author" src="https://mdn.mozillademos.org/files/14223/forms_example_create_author.png" style="border-style: solid; border-width: 1px; display: block; height: 184px; margin: 0px auto; width: 645px;"></p> +<p><img alt="Form Example: Create Author" src="forms_example_create_author.png"></p> <p>Entrez des valeurs pour les champs et ensuite cliquez sur <strong>Submit</strong> pour sauvegarder l'enregistrement de cet auteur. Vous devriez maintenant être conduit à une vue "détail" pour votre nouvel auteur, avec une URL du genre <em>http://127.0.0.1:8000/catalog/author/10</em>.</p> @@ -618,13 +618,13 @@ class AuthorDelete(DeleteView): <p>Enfin, nous pouvons effacer l'enregistrement en ajoutant "delete" à la fin de l'URL de détail (par exemple <em>http://127.0.0.1:8000/catalog/author/10/delete/</em>). Django devrait vous afficher la page de suppression montrée ci-dessous. Cliquez sur "<strong>Yes, delete</strong>" pour supprimer l'enregistrement et être reconduit à la liste des auteurs.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14221/forms_example_delete_author.png" style="border-style: solid; border-width: 1px; display: block; height: 194px; margin: 0px auto; width: 561px;"></p> +<p><img alt="" src="forms_example_delete_author.png"></p> <h2 id="Mettez-vous_au_défi">Mettez-vous au défi</h2> <p>Créez des formulaires pour créer, modifier et effacer des enregistrements de type <code>Book</code>. Vous pouvez utiliser exactement la même structure que pour les <code>Authors</code>. Si votre template <strong>book_form.html</strong> est simplement copié-renommé à partir du template <strong>author_form.html</strong>, alors la nouvelle page "create book" va ressembler à quelque chose comme ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14225/forms_example_create_book.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 595px;"></p> +<p><img alt="" src="forms_example_create_book.png"></p> <ul> </ul> @@ -633,7 +633,7 @@ class AuthorDelete(DeleteView): <p>Créer et gérer des formulaires peut être un processus compliqué ! Django le rend bien plus aisé en fournissant des mécanismes de programmation pour déclarer, rendre et valider des formulaires. Django fournit de plus des vues génériques d'édition de formulaires, qui peuvent faire presque tout le travail si vous voulez définir des pages pour créer, modifier et supprimer des enregistrements associés à une instance d'un modèle unique.</p> -<p>Il y a bien d'autres choses qui peuvent être faites avec les formulaires (regardez notre liste <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms#See_also">See also</a> ci-dessous), mais vous devez être maintenant en mesure de comprendre comment ajouter des formulaires basiques et un code de gestion de formulaire à vos propres sites web.</p> +<p>Il y a bien d'autres choses qui peuvent être faites avec les formulaires (regardez notre liste <a href="/fr/docs/Learn/Server-side/Django/Forms#See_also">See also</a> ci-dessous), mais vous devez être maintenant en mesure de comprendre comment ajouter des formulaires basiques et un code de gestion de formulaire à vos propres sites web.</p> <h2 id="See_also">See also</h2> diff --git a/files/fr/learn/server-side/django/generic_views/index.html b/files/fr/learn/server-side/django/generic_views/index.html index 3f87155e82..8917b2d6fc 100644 --- a/files/fr/learn/server-side/django/generic_views/index.html +++ b/files/fr/learn/server-side/django/generic_views/index.html @@ -17,14 +17,14 @@ original_slug: Learn/Server-side/Django/Vues_generiques <div>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</div> -<div>Ce tutoriel améliore notre site web <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.</div> +<div>Ce tutoriel améliore notre site web <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> <td> - <p>Avoir terminé tous les tutoriels précédents, y compris <a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a>.</p> + <p>Avoir terminé tous les tutoriels précédents, y compris <a href="/fr/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a>.</p> </td> </tr> <tr> @@ -38,7 +38,7 @@ original_slug: Learn/Server-side/Django/Vues_generiques <h2 id="Aperçu">Aperçu</h2> -<p>Dans ce tutoriel, nous allons terminer la première version du site web <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).</p> +<p>Dans ce tutoriel, nous allons terminer la première version du site web <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).</p> <p>Le processus est semblable à celui utilisé pour créer la page d'index, processus que nous avons montré dans le tutoriel précédent. Nous allons avoir de nouveau besoin de créer des mappages d'URLs, des vues et des templates. La principale différence est que, pour la page des détails, nous allons avoir le défi supplémentaire d'extraire de l'URL des informations que nous transmettrons à la vue. Pour ces pages, nous allons montrer comment utiliser un type de vue complètement différent : des vues "listes" et "détails" génériques et basées sur des classes. Cela peut réduire significativement la somme de code nécessaire, les rendant ainsi faciles à écrire et à maintenir.</p> @@ -52,7 +52,7 @@ original_slug: Learn/Server-side/Django/Vues_generiques <p>Ouvrez le fichier <strong>/catalog/urls.py</strong>, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction <code>path()</code> définit un pattern destiné à identifier l'URL (<strong>'books/'</strong>), une fonction vue qui sera appelée si l'URL correspond (<code>views.BookListView.as_view()</code>), et un nom pour ce mappage particulier.</p> -<pre class="brush: python notranslate">urlpatterns = [ +<pre class="brush: python">urlpatterns = [ path('', views.index, name='index'), <strong> </strong>path<strong>('books/', views.BookListView.as_view(), name='books'),</strong> ]</pre> @@ -69,7 +69,7 @@ original_slug: Learn/Server-side/Django/Vues_generiques <p>Ouvrez le fichier <strong>catalog/views.py</strong>, et copiez-y le code suivant à la fin :</p> -<pre class="brush: python notranslate">from django.views import generic +<pre class="brush: python">from django.views import generic class BookListView(generic.ListView): model = Book</pre> @@ -77,12 +77,12 @@ class BookListView(generic.ListView): <p>C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (<code>Book</code>), et ensuite rendre un template situé à l'adresse <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée <code>object_list</code> OU <code>book_list</code> (c'est-à-dire l'appellation générique "<code><em>the_model_name</em>_list</code>").</p> <div class="note"> -<p><strong>Note </strong>: Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code> dans ce cas) à l'intérieur du répertoire <code>/<em>application_name</em>/templates/</code> (<code>/catalog/templates/</code>).</p> +<p><strong>Note :</strong> Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code> dans ce cas) à l'intérieur du répertoire <code>/<em>application_name</em>/templates/</code> (<code>/catalog/templates/</code>).</p> </div> <p>Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs.</p> -<pre class="brush: python notranslate">class BookListView(generic.ListView): +<pre class="brush: python">class BookListView(generic.ListView): model = Book context_object_name = 'my_book_list' # your own name for the list as a template variable queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war @@ -94,7 +94,7 @@ class BookListView(generic.ListView): <p>Par exemple, nous pouvons ré-écrire la méthode <code>get_queryset()</code> pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut <code>queryset</code>, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :</p> -<pre class="brush: python notranslate">class BookListView(generic.ListView): +<pre class="brush: python">class BookListView(generic.ListView): model = Book def get_queryset(self): @@ -103,7 +103,7 @@ class BookListView(generic.ListView): <p>Nous pourrions aussi réécrire <code>get_context_data()</code>, afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "<code>some_data</code>" au contexte (elle sera alors accessible comme variable de template).</p> -<pre class="brush: python notranslate">class BookListView(generic.ListView): +<pre class="brush: python">class BookListView(generic.ListView): model = Book def get_context_data(self, **kwargs): @@ -122,7 +122,7 @@ class BookListView(generic.ListView): </ul> <div class="note"> -<p><strong>Note </strong>: Voyez dans <a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.</p> +<p><strong>Note :</strong> Voyez dans <a href="https://docs.djangoproject.com/en/2.1/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.</p> </div> <h3 id="Créer_le_template_pour_la_Vue_Liste">Créer le template pour la Vue Liste</h3> @@ -131,7 +131,7 @@ class BookListView(generic.ListView): <p>Les templates pour vues génériques sont exactement comme les autres templates (cependant, bien sûr, le contexte et les informations envoyées au templates peuvent être différents). Comme pour notre template <em>index</em>, nous étendons notre template de base à la première ligne, et remplaçons ensuite le bloc appelé <code>content</code>.</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <h1>Book List</h1> @@ -154,7 +154,7 @@ class BookListView(generic.ListView): <p>Nous utilisons les balises de templates <code><a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if">if</a></code>, <code>else</code>, et <code>endif</code> pour vérifier que la <code>book_list</code> a été définie et n'est pas vide. Si <code>book_list</code> est vide, alors la condition <code>else</code> affiche un texte expliquant qu'il n'y a pas de livres à lister. Si <code>book_list</code> n'est pas vide, nous parcourons la liste de livres.</p> -<pre class="brush: html notranslate"><strong>{% if book_list %}</strong> +<pre class="brush: html"><strong>{% if book_list %}</strong> <!-- code here to list the books --> <strong>{% else %}</strong> <p>There are no books in the library.</p> @@ -167,7 +167,7 @@ class BookListView(generic.ListView): <p>Le template utilise les balises de template <a href="https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for">for</a> et <code>endfor</code> pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template <code>book</code> avec l'information concernant l'élément courant de la liste.</p> -<pre class="brush: html notranslate">{% for <strong>book</strong> in book_list %} +<pre class="brush: html">{% for <strong>book</strong> in book_list %} <li> <!-- code here get information from each <strong>book</strong> item --> </li> {% endfor %} </pre> @@ -178,7 +178,7 @@ class BookListView(generic.ListView): <p>Le code à l'intérieur de la boucle crée un élément de liste pour chaque livre, élément qui montre à la fois le titre (comme lien vers la vue détail, encore à créer), et l'auteur.</p> -<pre class="brush: html notranslate"><a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) +<pre class="brush: html"><a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) </pre> <p>Nous accédont aux <em>champs</em> de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple <code>book.title</code> et <code>book.author</code>), où le texte suivant l'item <code>book</code> est le nom du champ (comme défini dans le modèle).</p> @@ -186,14 +186,14 @@ class BookListView(generic.ListView): <p>Nous pouvons aussi appeler des <em>fonctions</em> contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons <code>Book.get_absolute_url()</code> pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).</p> <div class="note"> -<p><strong>Note</strong> : Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !</p> +<p><strong>Note :</strong> Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !</p> </div> <h4 id="Mettre_à_jour_le_template_de_base">Mettre à jour le template de base</h4> <p>Ouvrez le template de base (<strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong>) et insérez <strong>{% url 'books' %}</strong> dans le lien URL pour <strong>All books</strong>, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").</p> -<pre class="brush: python notranslate"><li><a href="{% url 'index' %}">Home</a></li> +<pre class="brush: python"><li><a href="{% url 'index' %}">Home</a></li> <strong><li><a href="{% url 'books' %}">All books</a></li></strong> <li><a href="">All authors</a></li></pre> @@ -209,7 +209,7 @@ class BookListView(generic.ListView): <p>Ouvrez <strong>/catalog/urls.py</strong> et ajoutez-y le mappeur d'URL '<strong>book-detail</strong>' indiqué en gras ci-dessous. Cette fonction <code>path()</code> définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.</p> -<pre class="brush: python notranslate">urlpatterns = [ +<pre class="brush: python">urlpatterns = [ path('', views.index, name='index'), path('books/', views.BookListView.as_view(), name='books'), <strong> path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),</strong> @@ -220,24 +220,24 @@ class BookListView(generic.ListView): <p>Dans ce cas, nous utilisons <code>'<int:pk>'</code> pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé <code>pk</code> (abbréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.</p> <div class="note"> -<p><strong>Note </strong>: Comme nous l'avons dit précédemment, notre URL correcte est en réalité <code>catalog/book/<digits></code> (comme nous sommes dans l'application <strong>catalog</strong>, <code>/catalog/</code> est supposé).</p> +<p><strong>Note :</strong> Comme nous l'avons dit précédemment, notre URL correcte est en réalité <code>catalog/book/<digits></code> (comme nous sommes dans l'application <strong>catalog</strong>, <code>/catalog/</code> est supposé).</p> </div> <div class="warning"> -<p><strong>Important</strong> : La vue générique basée sur classe "détail" <em>s'attend</em> à recevoir un paramètre appelé <strong>pk</strong>. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.</p> +<p><strong>Attention :</strong> La vue générique basée sur classe "détail" <em>s'attend</em> à recevoir un paramètre appelé <strong>pk</strong>. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.</p> </div> <h4 id="Introduction_aux_chemins_et_expressions_régulières_avancés">Introduction aux chemins et expressions régulières avancés</h4> <div class="note"> -<p><strong>Note </strong>: Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.</p> +<p><strong>Note :</strong> Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.</p> </div> <p>La recherche de pattern fournie par <code>path()</code> est simple et utile pour les cas (très communs) où vous voulez seulement capturer <em>n'importe quelle</em> chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode <a href="https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path">re_path()</a>.</p> <p>Cette méthode est utilisée exactement comme <code>path()</code>, sauf qu'elle vous permet de spécifier un pattern utilisant une <a href="https://docs.python.org/3/library/re.html">Expression régulière</a>. Par exemple, le chemin précédent pourrait avoir été écrit ainsi :</p> -<pre class="brush: python notranslate"><strong>re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong> +<pre class="brush: python"><strong>re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong> </pre> <p>Les <em>expressions régulières</em> sont un outil de recherche de pattern extrêmement puissant. Ils sont, il est vrai, assez peu intuitifs et peuvent se révéler intimidants pour les débutants. Ci-dessous vous trouverez une introduction très courte !</p> @@ -335,14 +335,14 @@ class BookListView(generic.ListView): <p>Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL.</p> <div class="note"> -<p><strong>Note </strong>: Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.</p> +<p><strong>Note :</strong> Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.</p> </div> <h4 id="Passer_des_options_supplémentaires_dans_vos_mappages_dURL">Passer des options supplémentaires dans vos mappages d'URL</h4> <p>Une fonctionnalité que nous n'avons pas utilisée ici, mais que vous pourriez trouver valable, c'est que vous pouvez passer à la vue des <a href="https://docs.djangoproject.com/en/2.1/topics/http/urls/#views-extra-options">options supplémentaires</a>. Les options sont déclarées comme un dictionnaire que vous passez comme troisième argument (non nommé) à la fonction <code>path()</code>. Cette approche peut être utile si vous voulez utiliser la même vue pour des ressources multiples, et passer des données pour configurer son comportement dans chaque cas (ci-dessous nous fournissons un template différent dans chaque cas).</p> -<pre class="brush: python notranslate">path('url/', views.my_reused_view, <strong>{'my_template_name': 'some_path'}</strong>, name='aurl'), +<pre class="brush: python">path('url/', views.my_reused_view, <strong>{'my_template_name': 'some_path'}</strong>, name='aurl'), path('anotherurl/', views.my_reused_view, <strong>{'my_template_name': 'another_path'}</strong>, name='anotherurl'), </pre> @@ -354,7 +354,7 @@ path('anotherurl/', views.my_reused_view, <strong>{'my_template_name': 'another_ <p>Ouvrez <strong>catalog/views.py</strong>, et copiez-y le code suivant à la fin du fichier :</p> -<pre class="brush: python notranslate">class BookDetailView(generic.DetailView): +<pre class="brush: python">class BookDetailView(generic.DetailView): model = Book</pre> <p>C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement <code>Book</code> spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée <code>object</code> OU <code>book</code> (c'est-à-dire, de manière générique, "le_nom_du_modèle").</p> @@ -367,7 +367,7 @@ path('anotherurl/', views.my_reused_view, <strong>{'my_template_name': 'another_ <p>Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez <strong>pas</strong> la vue générique basée sur classe "détail".</p> -<pre class="brush: python notranslate">def book_detail_view(request, primary_key): +<pre class="brush: python">def book_detail_view(request, primary_key): try: book = Book.objects.get(pk=primary_key) except Book.DoesNotExist: @@ -380,7 +380,7 @@ path('anotherurl/', views.my_reused_view, <strong>{'my_template_name': 'another_ <p>Une alternative consiste à utiliser la fonction <code>get_object_or_404()</code> comme un raccourci pour lever une exception <code>Http404</code> si l'enregistrement n'existe pas.</p> -<pre class="brush: python notranslate">from django.shortcuts import get_object_or_404 +<pre class="brush: python">from django.shortcuts import get_object_or_404 def book_detail_view(request, primary_key): book = get_object_or_404(Book, pk=primary_key) @@ -390,7 +390,7 @@ def book_detail_view(request, primary_key): <p>Créez le fichier HTML <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe <em>detail</em> (pour un modèle appelé <code>Book</code> dans une application appelée <code>catalog</code>).</p> -<pre class="brush: html notranslate">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} <h1>Title: \{{ book.title }}</h1> @@ -422,9 +422,9 @@ def book_detail_view(request, primary_key): </ul> <div class="note"> -<p>Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :</p> +<p><strong>Note :</strong> Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :</p> -<pre class="notranslate"><a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a> +<pre><a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a> </pre> </div> @@ -439,18 +439,18 @@ def book_detail_view(request, primary_key): <p>Une chose intéressante que nous n'avons pas encore vue, c'est la fonction <code>book.bookinstance_set.all()</code>. Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements <code>BookInstance</code> associés à un <code>Book</code> particulier.</p> -<pre class="brush: python notranslate">{% for copy in book.bookinstance_set.all %} +<pre class="brush: python">{% for copy in book.bookinstance_set.all %} <!-- code to iterate across each copy/instance of a book --> {% endfor %}</pre> <p>Cette méthode est requise parce que vous déclarez un champ <code>ForeignKey</code> (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la <code>ForeignKey</code>, suivi de <code>_set</code> (ainsi la fonction créée dans <code>Book</code> est <code>bookinstance_set()</code>).</p> <div class="note"> -<p><strong>Note </strong>: Ici nous utilisons <code>all()</code> pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode <code>filter()</code> pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.</p> +<p><strong>Note :</strong> Ici nous utilisons <code>all()</code> pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode <code>filter()</code> pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.</p> <p>Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement :</p> -<pre class="notranslate">[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637 +<pre>[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637 /foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]> allow_empty_first_page=allow_empty_first_page, **kwargs) </pre> @@ -467,7 +467,7 @@ def book_detail_view(request, primary_key): <p>Si vous décidez d'ajouter une <code>class Meta</code> au modèle <code>Author</code> (solution peut-être pas aussi flexible que personnalier la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :</p> -<pre class="notranslate">class Author(models.Model): +<pre>class Author(models.Model): first_name = models.CharField(max_length=100) last_name = models.CharField(max_length=100) date_of_birth = models.DateField(null=True, blank=True) @@ -497,11 +497,11 @@ def book_detail_view(request, primary_key): <p>Cliquez sur le lien <strong>Tous les livres</strong> pour afficher la liste des livres.</p> -<p><img alt="Book List Page" src="https://mdn.mozillademos.org/files/14049/book_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 823px;"></p> +<p><img alt="Book List Page" src="book_list_page_no_pagination.png"></p> <p>Ensuite cliquez sur un lien dirigeant vers l'un de vos livres. Si tout est réglé correctement, vous allez voir quelque chose de semblable à la capture d'écran suivante :</p> -<p><img alt="Book Detail Page" src="https://mdn.mozillademos.org/files/14051/book_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 783px; margin: 0px auto; width: 926px;"></p> +<p><img alt="Book Detail Page" src="book_detail_page_no_pagination.png"></p> <h2 id="Pagination">Pagination</h2> @@ -513,7 +513,7 @@ def book_detail_view(request, primary_key): <p>Ouvrez <strong>catalog/views.py</strong>, et ajoutez la ligne <code>paginate_by</code>, en gras ci-dessous.</p> -<pre class="brush: python notranslate">class BookListView(generic.ListView): +<pre class="brush: python">class BookListView(generic.ListView): model = Book <strong>paginate_by = 10</strong></pre> @@ -525,7 +525,7 @@ def book_detail_view(request, primary_key): <p>Ouvrez <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong>, et copiez-y, sous notre bloc de contenu, le bloc de pagination suivant (mis en gras ci-dessous). Le code commence par vérifier si une pagination est activée sur la page courante. Si oui, il ajoute les liens "précédent" et "suivant" appropriés (et le numéro de la page courante).</p> -<pre class="brush: python notranslate">{% block content %}{% endblock %} +<pre class="brush: python">{% block content %}{% endblock %} <strong> {% block pagination %} {% if is_paginated %} @@ -557,7 +557,7 @@ def book_detail_view(request, primary_key): <p>Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons.</p> -<p><img alt="Book List Page - paginated" src="https://mdn.mozillademos.org/files/14057/book_list_paginated.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 924px;"></p> +<p><img alt="Book List Page - paginated" src="book_list_paginated.png"></p> <h2 id="Mettez-vous_vous-même_au_défi_!">Mettez-vous vous-même au défi !</h2> @@ -571,12 +571,12 @@ def book_detail_view(request, primary_key): <p>Le code requis pour le mappeur d'URL et les vues sera virtuellement identique aux vues liste et détail du modèle <code>Book</code>, créées ci-dessus. Les templates seront différents, mais auront un comportement semblable.</p> <div class="note"> -<p><strong>Note</strong>:</p> +<p><strong>Note :</strong></p> <ul> <li>Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien <strong>All authors</strong> dans le template de base. Suivez la <a href="#Update_the_base_template">même procédure</a> que celle adoptée quand nous avons mis à jour le lien <strong>All books</strong>.</li> <li>Une fois créé le mappeur d'URL pour la page de détails sur l'auteur, vous devrez aussi mettre à jour le <a href="#Creating_the_Detail_View_template">template de la vue détail d'un livre</a> (<strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>), de sorte que le lien vers l'auteur pointe vers votre nouvelle page de détails sur l'auteur (au lieu d'être une URL vide). La ligne va avoir comme changement la balise montrée en gras ci-dessous. - <pre class="brush: html notranslate"><p><strong>Author:</strong> <a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a></p> + <pre class="brush: html"><p><strong>Author:</strong> <a href="<strong>{% url 'author-detail' book.author.pk %}</strong>">\{{ book.author }}</a></p> </pre> </li> </ul> @@ -584,12 +584,12 @@ def book_detail_view(request, primary_key): <p>Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes.</p> -<p><img alt="Author List Page" src="https://mdn.mozillademos.org/files/14053/author_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="Author List Page" src="author_list_page_no_pagination.png"></p> <ul> </ul> -<p><img alt="Author Detail Page" src="https://mdn.mozillademos.org/files/14055/author_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 358px; margin: 0px auto; width: 825px;"></p> +<p><img alt="Author Detail Page" src="author_detail_page_no_pagination.png"></p> <ul> </ul> @@ -617,19 +617,19 @@ def book_detail_view(request, primary_key): <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/server-side/django/home_page/index.html b/files/fr/learn/server-side/django/home_page/index.html index 91f6ef16bf..5c8f63c457 100644 --- a/files/fr/learn/server-side/django/home_page/index.html +++ b/files/fr/learn/server-side/django/home_page/index.html @@ -18,9 +18,9 @@ translation_of: Learn/Server-side/Django/Home_page <div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div> -<p class="summary">Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">la bibliothèque locale</a> est réalisé. La page d'accueil montera le nombre d'enregistrements pour chacun des objets décrits dans la base et les liens à l'aide d'une barre latérale de navigation. Dans la progression de l'article, nous apprendrons à gérer les vues et à présenter les données à l'aide de gabarits.</p> +<p>Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">la bibliothèque locale</a> est réalisé. La page d'accueil montera le nombre d'enregistrements pour chacun des objets décrits dans la base et les liens à l'aide d'une barre latérale de navigation. Dans la progression de l'article, nous apprendrons à gérer les vues et à présenter les données à l'aide de gabarits.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis:</th> @@ -45,7 +45,7 @@ translation_of: Learn/Server-side/Django/Home_page <li>créer les gabarits qui vont permettre de publier les données dans les vues.</li> </ul> -<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="" src="basic-django.png"></p> <p>Nous aurons à créer 5 pages web pour publier les informations à destination des utilisateurs. Cela fait beaucoup d'éléments à maîtriser dans une seule section d'apprentissage de l'outils. Nous avons donc opté pour ne traiter dans cette section que de la page d'accueil et de traiter les autres pages dans une autre section du didacticiel. Cela permet, en outre, de mieux appréhender les composants comme le routage d'URL ou les vues et d'une manière générale le fonctionnement du modèle de Django.</p> @@ -68,7 +68,7 @@ translation_of: Learn/Server-side/Django/Home_page <p>En revanche, les pages concernant le détails d'un livre ou d'un auteur nécessiteront de traiter l'identifiant d'un objet. Il sera nécessaire d'extraire de la requête HTTP l'information encodé de cet identifiant pour obtenir ensuite le détail depuis la base de données. Pour cela nous utiliserons un seul jeu de vue et de gabarit pour publier les informations sur les livres (et auteurs).</p> <div class="note"> -<p><strong>Note</strong>: Avec le cadriciel Django, vous pouvez élaborer vos URLs comme bon vous semble — Vous pouvez avoir une approche comme celle présentée ci-dessus, ou de faire un appel de la méthode <code>GET</code> avec un passage de paramètres (<code>/book/?id=6</code>). Cependant, quelque soit l'approche pour laquelle vous opterez, garder en mémoire d'avoir des URLs claires, logique et compréhensibles comme cela est <a href="https://www.w3.org/Provider/Style/URI">recommandé par le W3C</a>.</p> +<p><strong>Note :</strong> Avec le cadriciel Django, vous pouvez élaborer vos URLs comme bon vous semble — Vous pouvez avoir une approche comme celle présentée ci-dessus, ou de faire un appel de la méthode <code>GET</code> avec un passage de paramètres (<code>/book/?id=6</code>). Cependant, quelque soit l'approche pour laquelle vous opterez, garder en mémoire d'avoir des URLs claires, logique et compréhensibles comme cela est <a href="https://www.w3.org/Provider/Style/URI">recommandé par le W3C</a>.</p> <p>La documentation de Django recommande aussi de coder les informations dans le corps des URLs pour avoir une meilleure conception de ces URLs.</p> </div> @@ -80,7 +80,7 @@ translation_of: Learn/Server-side/Django/Home_page <p>La toute première page à créer est la page d'accueil (<code>catalog/</code>). Cette page d'index est globalement une page statique contenant le décompte des différents enregistrements de la base de données. Pour faire cela, il sera nécessaire de créer un routage d'URL, une vue et un gabarit. </p> <div class="note"> -<p><strong>Note</strong>: Cette section est essentielle, et cela vaut vraiment la peine d'être attentif aux concepts déployés dans celle-ci. La plupart des éléments aborder ici seront ré-utilisés par la suite.</p> +<p><strong>Note :</strong> Cette section est essentielle, et cela vaut vraiment la peine d'être attentif aux concepts déployés dans celle-ci. La plupart des éléments aborder ici seront ré-utilisés par la suite.</p> </div> <h3 id="Routage_d'URL">Routage d'URL</h3> @@ -112,7 +112,7 @@ translation_of: Learn/Server-side/Django/Home_page <pre class="brush: html"><a href="<strong>{% url 'index' %}</strong>">Home</a>.</pre> <div class="note"> -<p><strong>Note</strong>: Vus pourriez bien évidemment coder en dur l'accès à la page d'accueil de cette manaière <code><a href="<strong>/catalog/</strong>">Home</a></code>), mais si nous changions le modèle d'URL, par exemple en <code>/catalog/index</code>, alors le gabarit ne fonctionnerait plus correctement et présenterait un lien mort. L'utilisation des noms et des routage inversés est plus robuste et adapté aux évolutions de l'application.</p> +<p><strong>Note :</strong> Vus pourriez bien évidemment coder en dur l'accès à la page d'accueil de cette manaière <code><a href="<strong>/catalog/</strong>">Home</a></code>), mais si nous changions le modèle d'URL, par exemple en <code>/catalog/index</code>, alors le gabarit ne fonctionnerait plus correctement et présenterait un lien mort. L'utilisation des noms et des routage inversés est plus robuste et adapté aux évolutions de l'application.</p> </div> <h3 id="Vue_(View_function-based)">Vue (<em>View function-based</em>)</h3> @@ -176,7 +176,7 @@ def index(request): <p>Vous pouvez en faire l'expérience dès à présent, après avoir redémarré votre serveur local, en accédant à l'URL <code>127.0.0.1:8000</code> de votre navigateur. Une page d'erreur explicite s'affiche en indiquant un message du type : "<code>TemplateDoesNotExist at /catalog/</code>", ainsi que de nombreux détails sur l'enchaînement des fonctions aboutissant à cette erreur.</p> <div class="note"> -<p><strong>Note</strong>: En fonction du paramétrage de votre projet - le fichier settings.py de votre projet - Django va chercher pour des gabarits dans différents répertoires et dans ceux de votre application par défaut. Si vous souhaitez approfondir ce sujet vous pouvez consulter la <a href="https://docs.djangoproject.com/fr/2.2/topics/templates/">documentation Django relative aux gabarit</a>.</p> +<p><strong>Note :</strong> En fonction du paramétrage de votre projet - le fichier settings.py de votre projet - Django va chercher pour des gabarits dans différents répertoires et dans ceux de votre application par défaut. Si vous souhaitez approfondir ce sujet vous pouvez consulter la <a href="https://docs.djangoproject.com/fr/2.2/topics/templates/">documentation Django relative aux gabarit</a>.</p> </div> <h4 id="Concevoir_les_gabarits">Concevoir les gabarits</h4> @@ -186,7 +186,7 @@ def index(request): <p>Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit <strong>base_generic.html</strong>, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs <code>block</code> et <code>endblock</code> qui peut contenir ou non des données.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation" lang="fr"><span title="">Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc.</span> <span title="">Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule).</span></span></p> +<p><strong>Note :</strong> Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc. Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule).</p> </div> <p>Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être remplacés par la suite :</p> @@ -225,7 +225,7 @@ def index(request): <p>Nous allons nous appuyer sur le gabarit ci-dessous pour constuire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections <code>title</code>, <code>sidebar</code>, et <code>content</code>. La section <code>title</code> contient un titre par défaut. De même la section <code>sidebar</code> contient un liens vers la liste des livres et des auteurs qui pourra être modifié ensuite.</p> <div class="note"> -<p><strong>Note</strong>: Il y a aussi deux balises supplémentaires : <code>url</code> et <code>load static</code>. Elles seront étudiées dans le chapitre suivant.</p> +<p><strong>Note :</strong> Il y a aussi deux balises supplémentaires : <code>url</code> et <code>load static</code>. Elles seront étudiées dans le chapitre suivant.</p> </div> <p>Créez un nouveau fichier nommé <strong><em>base_generic.html </em></strong>dans le dossier <strong>/locallibrary/catalog/templates/</strong> (à créer aussi) et copiez-y le texte ci-dessous :</p> @@ -276,20 +276,20 @@ def index(request): <p>Maintenant créez le fichier HTML <strong><em>index.html</em></strong> dans le dossier <strong>/locallibrary/catalog/templates/</strong> et copiez-y le code ci-dessous. This code extends our base template on the first line, and then replaces the default <code>content</code> block for the template. </p> -<pre class="brush: html line-numbers language-html"><code class="language-html">{% extends "base_generic.html" %} +<pre class="brush: html">{% extends "base_generic.html" %} {% block content %} - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Accueil de la bibliothèque locale<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token">Bienvenue à la bibliothèque locale, un site web développé par </span></span></span></code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span>Mozilla Developer Network<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>!</code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Contenu dynamique<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>La bibliothèque dispose des enregistrements suivants:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">>Livres</span></span>:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span> <strong>\{{ num_books }}</strong><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>Copies:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span> <strong>\{{ num_instances }}</strong><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>Copies disponibles:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span> <strong>\{{ num_instances_available }}</strong><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>Auteurs:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span> <strong>\{{ num_authors }}</strong><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> -{% endblock %}</code></pre> + <h1>Accueil de la bibliothèque locale</h1> + <p>Bienvenue à la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p> + <h2>Contenu dynamique</h2> + <p>La bibliothèque dispose des enregistrements suivants:</p> + <ul> + <li><strong>Livres:</strong> \{{ num_books }}</li> + <li><strong>Copies:</strong> \{{ num_instances }}</li> + <li><strong>Copies disponibles:</strong> \{{ num_instances_available }}</li> + <li><strong>Auteurs:</strong> \{{ num_authors }}</li> + </ul> +{% endblock %}</pre> <p>Dans la section cont'enu dynamique, des emplacements réservés sont définis pour pouvoir y insérer le contenu de variable qui sont identifiées à l'intérieur de doubles accolades (ouvrantes et fermantes). Pour une meilleure visibilité ces emplacements et les variables nommées sont identifiées en caractères gras dans l'extrait de code ci-dessus. </p> @@ -325,7 +325,7 @@ return render(request, 'index.html', context=context)</pre> </pre> <div class="note"> -<p><strong>Note</strong>: Les exemples ci-dessus indiquent où se trouvent les fichiers, mais le cadriciel ne travail pas ainsi par défaut. Nous avons configuré le serveur web de développement en modifiant le routage des URL (<strong>/locallibrary/locallibrary/urls.py</strong>) à <a href="/fr/docs/Learn/Server-side/Django/skeleton_website">la création du squelette du site</a>. Cependant nous devrons travailler plus tard la mise en production.</p> +<p><strong>Note :</strong> Les exemples ci-dessus indiquent où se trouvent les fichiers, mais le cadriciel ne travail pas ainsi par défaut. Nous avons configuré le serveur web de développement en modifiant le routage des URL (<strong>/locallibrary/locallibrary/urls.py</strong>) à <a href="/fr/docs/Learn/Server-side/Django/skeleton_website">la création du squelette du site</a>. Cependant nous devrons travailler plus tard la mise en production.</p> </div> <p>Pour plus de détails sur les fichiers statiques vous pouvez consulter la documentation Django sur <a href="https://docs.djangoproject.com/fr/2.2/howto/static-files/">la gestion des fichiers statiques</a>.</p> @@ -365,7 +365,7 @@ return render(request, 'index.html', context=context)</pre> <p>A ce niveau, nous avons créé l'ensemble des ressources nécessaires à l'affichage de la page d'accueil. Démarrez le serveur (<code>python3 manage.py runserver</code>) et accédez avec votre navigateur à la page d'accueil du site web <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>. Si tout va bien, vous devriez avoir une page qui ressemble à celle ci-dessous.</p> -<p><img alt="Page d'accueil en Français" src="https://mdn.mozillademos.org/files/16794/index_fr_page_ok.png" style="height: 1050px; width: 1872px;"></p> +<p><img alt="Page d'accueil en Français" src="index_fr_page_ok.png"></p> <div class="note"> <p><strong>Note:</strong> Toutes les ressources n'ayant pas été encore créées les liens vers Tous les livres et Tous les auteurs ne fonctionnent pas encore.</p> @@ -379,7 +379,7 @@ return render(request, 'index.html', context=context)</pre> <li>La bibliothèque locale dispose d'un gabarit d'origine qui inclu une section <code>title</code>. Surchargez cette section dans le gabarit index et créer un nouveau titre. <div class="note"> - <p><strong>Hint:</strong> La section Concevoir un gabarit détaille la manière de modifier une section.</p> + <p><strong>Note :</strong> La section Concevoir un gabarit détaille la manière de modifier une section.</p> </div> </li> <li>Modifiez la vue pour disposer de décomptes pour les genres et les titres de livre qui contiennent un mot (en repectant la casse) et transmettez cela via le <code>context.</code> Pour faire cela utilisez les variables <code>num_books</code> et <code>num_instances_available</code>. Ensuite vous pourrez mettre à jour le gabarit de la page d'accueil.<br> @@ -412,18 +412,18 @@ return render(request, 'index.html', context=context)</pre> <ul> <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Didactique: Site web "Bibliothèque locale"</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django didactique Section 2: Créer le squelette du site web</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django didactique Section 3: Utilisation des modèles de données</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django didactique Section 4 : Site d'administration de Django</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django didactique Section 5: Créer la page d'accueil</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/server-side/django/index.html b/files/fr/learn/server-side/django/index.html index c613f07883..fb38612c78 100644 --- a/files/fr/learn/server-side/django/index.html +++ b/files/fr/learn/server-side/django/index.html @@ -14,45 +14,45 @@ translation_of: Learn/Server-side/Django <h2 id="Prerequis">Prerequis</h2> -<p>Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement comprendre ce qu'est la programmation web côté serveur ainsi que les frameworks web, notamment en lisant les sujets sur notre <a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps">module d'initiation à la programmation web coté serveur</a>.</p> +<p>Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement comprendre ce qu'est la programmation web côté serveur ainsi que les frameworks web, notamment en lisant les sujets sur notre <a href="/fr/docs/Learn/Server-side/First_steps">module d'initiation à la programmation web coté serveur</a>.</p> -<p>Une connaissance générale en programmation et plus précisement en <a href="https://developer.mozilla.org/fr/docs/Glossaire/Python">Python</a> est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module.</p> +<p>Une connaissance générale en programmation et plus précisement en <a href="/fr/docs/Glossaire/Python">Python</a> est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module.</p> <div class="note"> -<p><strong>Note</strong>: Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du<a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers"> Python pour les non-programmeurs</a> <sub><strong>(anglais)</strong></sub> dans la documentation sur le site officiel de Python: python.org).</p> +<p><strong>Note :</strong> Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du<a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers"> Python pour les non-programmeurs</a> dans la documentation sur le site officiel de Python: python.org).</p> </div> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Introduction à Django<sub><strong> </strong></sub></a><sub><strong>(anglais)</strong></sub></dt> - <dd>Dans ce premier article, nous répondrons aux questions "qu'est ce que Django ?" et vous donner un aperçu rapide de ce qu'un framework peut vous apporter. Nous survolerons les fonctionnalités principales ainsi que quelques fonctionnalités avancées que nous ne pouvons pas détailler en l'espace d'un seul module. Nous vous montrerons aussi les blocs principaux de Django ce qui vous donnera un aperçu de ce qui est faisable avant de commencer.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Installer un environnement de développement pour Django </a><sub><strong>(anglais)</strong></sub></dt> - <dd>Maintenant que vous savez ce qu'est Django, nous allons nous attaquer à la partie installation, comment l'installer sous Windows, Linux(Ubuntu), et Mac OS X — tant que vous utilisez un système d'exploitation commun, cet article devrait vous donner le nécessaire afin de commencer à développer des applications avec Django.</dd> + <dt><a href="/fr/docs/Learn/Server-side/Django/Introduction">Introduction à Django</a></dt> + <dd>Dans ce premier article, nous répondrons aux questions "qu'est ce que Django ?" et vous donner un aperçu rapide de ce qu'un framework peut vous apporter. Nous survolerons les fonctionnalités principales ainsi que quelques fonctionnalités avancées que nous ne pouvons pas détailler en l'espace d'un seul module. Nous vous montrerons aussi les blocs principaux de Django ce qui vous donnera un aperçu de ce qui est faisable avant de commencer.</dd> + <dt><a href="/fr/docs/Learn/Server-side/Django/development_environment">Installer un environnement de développement pour Django</a></dt> + <dd>Maintenant que vous savez ce qu'est Django, nous allons nous attaquer à la partie installation, comment l'installer sous Windows, Linux(Ubuntu), et Mac OS X — tant que vous utilisez un système d'exploitation commun, cet article devrait vous donner le nécessaire afin de commencer à développer des applications avec Django.</dd> <dt><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutoriel Django: Le site web d'une librairie</a></dt> <dd>Le premier article de cette série de tutoriels explique ce que vous aurez à apprendre autour d'un site que nous allons programmer pour une bibliothèque, site web dans lequel nous allons travailler et évoluer à travers plusieurs articles.</dd> <dt><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Tutoriel Django Partie 2: Créer un squelette d'un site web</a></dt> <dd>Cet article vous montrera comment créer le "squelette" d'un site web auquel vous pourrez ajouter de quoi le personnaliser avec des paramètres spécifiques, des URLs, des modèles et des templates.</dd> <dt><a href="/fr/docs/Learn/Server-side/Django/Models">Tutoriel Django Partie 3: Utilisation des modèles</a></dt> - <dd>Cet article montre comment définir des modèles pour le site web que nous appelleront <em>LocalLibrary </em> — les modèles représentent la façon dont sont structurées nos données dans nos applications, nous autoriserons aussi Django à stocker des données dans une base de données pour nous (et modifier cela plus tard). Cet article explique en somme ce qu'un modèle est, comment le déclarer et les champs principaux. Il décrit aussi brièvement comment accéder aux données d'un modèle.</dd> + <dd>Cet article montre comment définir des modèles pour le site web que nous appelleront <em>LocalLibrary</em> — les modèles représentent la façon dont sont structurées nos données dans nos applications, nous autoriserons aussi Django à stocker des données dans une base de données pour nous (et modifier cela plus tard). Cet article explique en somme ce qu'un modèle est, comment le déclarer et les champs principaux. Il décrit aussi brièvement comment accéder aux données d'un modèle.</dd> <dt><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Tutoriel Django Partie 4: L'administration d'un site sous Django</a></dt> <dd>Maintenant que nous avons créé quelques modèles pour le site web <em>LocalLibrary </em>, nous allons utiliser Django Admin afin d'ajouter quelques "réelles" tables de données. Premièrement, nous allons vous montrer comment enregistrer des modèles avec la partie Admin, ensuite nous allons vous montrer comment se connecter et créer des informations. A la fin, nous allons vous montrer quelques moyens d'améliorer la présentation de la partie Admin.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Tutoriel Django Partie 5: Céez votre page d'accueil. </a><sub><strong>(anglais)</strong></sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django/Home_page">Tutoriel Django Partie 5: Céez votre page d'accueil.</a></dt> <dd>Nous sommes fin prêts à ajouter le code afin d'afficher notre première page entièremement — une page d'accueil pour le site web <em>LocalLibrary </em>qui montre combien d'enregistrements nous avons de chaque types de modèles et fournis une barre de navigation avec des liens menant à d'autres pages. Au fur et à mesure, nous gagnerons de l'expérience en écrivant du mapping d'URLs, en obtenant des enregistrements de la base de données et en utilisant des templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Tutoriel Django Partie 6: Listes génériques et détails des pages </a><sub><strong>(anglais)</strong></sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Tutoriel Django Partie 6: Listes génériques et détails des pages</a></dt> <dd>Ce tutoriel viens étendre notre site <em>LocaLibrary</em> en y ajoutant des listes et des détails pour les auteurs et les livres. Ici nous allons tout vous apprendre sur les classes et vous montrer comment elles peuvent réduire la quantité de code que vous avez à écrire dans des situations communes. Nous allons aussi vous apprendre comment manipuler les URL plus en détail, ainsi que la réalisation basique d'un moteur de recherche.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Tutoriel Django Partie 7: Les sessions de framework </a><sub><strong>(anglais)</strong></sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django/Sessions">Tutoriel Django Partie 7: Les sessions de framework</a></dt> <dd>Ce tutoriel viens compléter le site <em>LocalLibrary</em>, en ajoutant un compteur de visiteurs basé sur un principe de session sur la page principale C'est un exemple relativement simple, mais il vous permettra de vous apprendre comment utiliser le système de session en fournissant un comportement persistant aux utilisateurs anonyme de votre site.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Tutoriel Django Partie 8: L'authentification de l'utilisateur ainsi que les permissions </a><sub><strong>(anglais)</strong></sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django/Authentication">Tutoriel Django Partie 8: L'authentification de l'utilisateur ainsi que les permissions</a></dt> <dd>Dans ce tutoriel, nous allons vous montrer comment autoriser les utilisateurs à se connecter à votre site avec leurs propres comptes, et comment contrôler ce qu'ils peuvent faire et voir en fonction des <em>permissions</em> accordées et de s'ils sont connectés ou non. Comme partie de cette démonstration, nous allons étendre le site <em>LocalLibrary</em> en ajoutant une page de connexion, de déconnexion et d'utilisateur - ainsi que des pages dédiées aux membres de la librairie afin de voir quel livre a été emprunté.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Tutoriel Django Partie 9: Travailler avec les formulaires </a><sub><strong>(anglais)</strong></sub></dt> - <dd>Dans ce tutoriel, nous allons vous montrer comment travailler avec <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms">les formulaires en HTML</a> avec Django, et plus particulièrement la façon la plus facile d'écrire, créer, mettre à jour et supprimer les formulaires. Pour cela, nous allons devoir étendre le site <em>LocalLibrary</em> afin que les libraires puissent changer les livres, et créer, mettre à jour, et supprimer les auteurs en utilisant nos propres formulaires (au lieu de passer par Django Admin).</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Tutoriel Django Partie 10: Tester une application Django </a><sub><strong>(anglais)</strong></sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django/Forms">Tutoriel Django Partie 9: Travailler avec les formulaires</a></dt> + <dd>Dans ce tutoriel, nous allons vous montrer comment travailler avec <a href="/fr/docs/Web/Guide/HTML/Forms">les formulaires en HTML</a> avec Django, et plus particulièrement la façon la plus facile d'écrire, créer, mettre à jour et supprimer les formulaires. Pour cela, nous allons devoir étendre le site <em>LocalLibrary</em> afin que les libraires puissent changer les livres, et créer, mettre à jour, et supprimer les auteurs en utilisant nos propres formulaires (au lieu de passer par Django Admin).</dd> + <dt><a href="/fr/docs/Learn/Server-side/Django/Testing">Tutoriel Django Partie 10: Tester une application Django</a></dt> <dd>Plus les sites s'agrandissent, plus il devient dur de les tester manuellement — pas seulement parce que il y a plus de contenu à tester mais aussi parce que les intéractions entre les éléments deviennent plus complexes, un petit changement dans une partie du site peut nécessiter de nombreux tests afin de vérifier que ce changement n'a pas impacté les autres parties du site. La solution à ce problème est de programmer des tests automatiques, qui peuvent facilement et fiablement être executés à chaque changements. Ce tutoriel montre comment automatiser vos tests sur votre site web en utilisant le module de test du framework Django.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Tutoriel Django Partie 11: Déployer son site fait avec Django </a><sub><strong>(anglais)</strong></sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django/Deployment">Tutoriel Django Partie 11: Déployer son site fait avec Django</a></dt> <dd>Vous avez créé (et testé) un incroyable site web <em>LocalLibray</em>, vous allez maintenant l'installer sur un serveur public ce qui le rendra accessible aux membres de la librairie à travers internet. Cet article fournis un aperçu de comment vous pourriez trouver un hébergeur pour déployer votre site et de ce dont vous avez besoin pour rendre votre site pleinement fonctionnel.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Le module de sécurité de Django </a><sub><strong>(anglais)</strong></sub></dt> - <dd>Protéger les données de l'utilisateur est essentiel dans la conception d'un site web, nous avons précédemment expliqué quel pouvaient être les menaces principales dans l'article sur la <a href="https://developer.mozilla.org/en-US/docs/Web/Security">sécurité web</a> — cet article fournis une démonstration pratique des réaction des protections incluse de Django face à ce genre de menaces ainsi que la façon dont elles sont traitées.</dd> + <dt><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Le module de sécurité de Django</a></dt> + <dd>Protéger les données de l'utilisateur est essentiel dans la conception d'un site web, nous avons précédemment expliqué quel pouvaient être les menaces principales dans l'article sur la <a href="/fr/docs/Web/Security">sécurité web</a> — cet article fournis une démonstration pratique des réaction des protections incluse de Django face à ce genre de menaces ainsi que la façon dont elles sont traitées.</dd> </dl> <h2 id="Evaluation">Evaluation</h2> @@ -60,6 +60,6 @@ translation_of: Learn/Server-side/Django <p>L'évaluation suivante va tester votre compréhension à créer un site web avec Django comme décris dans la liste des guides ci-dessous.</p> <dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">Mini blog avec Django </a><sub><strong>(anglais)</strong></sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">Mini blog avec Django</a></dt> <dd>Dans ce devoir, vous utiliserez les connaissances que vous venez d'acquérir, afin de créer votre propre blog.</dd> </dl> diff --git a/files/fr/learn/server-side/django/introduction/index.html b/files/fr/learn/server-side/django/introduction/index.html index d4938e0610..6fa1007ece 100644 --- a/files/fr/learn/server-side/django/introduction/index.html +++ b/files/fr/learn/server-side/django/introduction/index.html @@ -11,13 +11,13 @@ translation_of: Learn/Server-side/Django/Introduction <div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> -<p class="summary"><span class="seoSummary">Dans ce premier article sur Django, nous allons répondre à la question suivante "Qu'est ce que Django ?", et nous vous montrerons en quoi cette infrastructure d'application (aussi appelée framework) est spéciale. Nous allons ensuite voir les principales fonctionnalités, mais aussi quelques fonctionnalités avancées que nous n'aurons malheureusement pas le temps de voir en détails dans ce module. Nous allons aussi vous montrer comment fonctionne une application Django (bien que nous n'ayons pas d'environnement où le tester) </span>.</p> +<p>Dans ce premier article sur Django, nous allons répondre à la question suivante "Qu'est ce que Django ?", et nous vous montrerons en quoi cette infrastructure d'application (aussi appelée framework) est spéciale. Nous allons ensuite voir les principales fonctionnalités, mais aussi quelques fonctionnalités avancées que nous n'aurons malheureusement pas le temps de voir en détails dans ce module. Nous allons aussi vous montrer comment fonctionne une application Django (bien que nous n'ayons pas d'environnement où le tester) .</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Connaissances basiques de programmation. Une compréhension générale de la <a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps">programmation coté serveur</a> ainsi qu'une <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">compréhension des interactions client-serveur dans les sites web</a> <strong><sub>(anglais)</sub></strong>.</td> + <td>Connaissances basiques de programmation. Une compréhension générale de la <a href="/fr/docs/Learn/Server-side/First_steps">programmation coté serveur</a> ainsi qu'une <a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview">compréhension des interactions client-serveur dans les sites web</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -44,7 +44,7 @@ translation_of: Learn/Server-side/Django/Introduction <br> <em>Un mot de passé haché est une valeur dont la longueur est fixée, créée en envoyant le mot de passe à travers une <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">fonction de hachage cryptographique</a>. Django peut vérifier si un mot de passe entré est correct en l'envoyant dans la fonction de hachage et en comparant le retour avec la valeur stockée dans la base de données. De ce fait, la nature unidirectionnelle de la fonction rend difficile pour un attaquant de retrouver le mot de passe d'origine, même si la valeur hachée est compromise.</em><br> <br> - Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a> pour plus de détails sur ce genre d'attaques).</dd> + Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Website security</a> pour plus de détails sur ce genre d'attaques).</dd> <dt>Scalable</dt> <dd>Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux).</dd> <dt>Maintenable</dt> @@ -60,10 +60,10 @@ translation_of: Learn/Server-side/Django/Introduction <p>Django a continué à se développer et à s'améliorer, depuis sa première sortie (1.0) en Septembre 2008 jusqu'à la version 2.0 récemment sortie (2017). Chaque sortie a ajouté son lot de nouvelles fonctionnalités et de corrections de bugs, allant du support de nouveaux types de bases de données, de moteurs de templates et de cache, à l'addition de fonctions et de classes de vues 'génériques' (qui réduisent la quantité de code que doivent écrire les développeurs pour tout un tas de tâches de programmation). </p> <div class="note"> -<p><strong>Note </strong>: Consultez les<span style="line-height: 1.5;"> <a href="https://docs.djangoproject.com/en/1.10/releases/">notes de publication</a> sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.</span></p> +<p><strong>Note :</strong> Consultez les <a href="https://docs.djangoproject.com/en/1.10/releases/">notes de publication</a> sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.</p> </div> -<p>Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web.<span style="line-height: 1.5;"> </span></p> +<p>Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web. </p> <h2 id="À_quel_point_Django_est-il_populaire">À quel point Django est-il populaire ?</h2> @@ -89,7 +89,7 @@ translation_of: Learn/Server-side/Django/Introduction <p>Les applications web Django regroupent généralement le code qui gère chacune de ces étapes dans des fichiers séparés :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="basic-django.png"></p> <ul> <li><strong>URLs : </strong> Bien qu'il soit possible de traiter les requêtes de chaque URL via une fonction unique, il est bien plus viable d'écrire une fonction de vue isolée qui gèrera chaque ressource. Un mapper URL est utilisé pour rediriger les requêtes HTTP à la vue appropriée d'après l'URL de requête. Le mapper URL peut aussi faire la correspondance entre des patterns de chaînes de caractères ou de nombres qui apparaissent dans une URL et passer ces derniers comme données dans une fonction de vue.</li> @@ -99,7 +99,7 @@ translation_of: Learn/Server-side/Django/Introduction </ul> <div class="note"> -<p><strong>Note</strong>: Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Modèle Vue Contrôleur</a>.</p> +<p><strong>Note :</strong> Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture <a href="/fr/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Modèle Vue Contrôleur</a>.</p> </div> <ul> @@ -144,7 +144,7 @@ def index(request): </pre> <div class="note"> -<p><strong>Note</strong>: Un peu de Python :</p> +<p><strong>Note :</strong> Un peu de Python :</p> <ul> <li>Les <a href="https://docs.python.org/3/tutorial/modules.html">modules Python</a> sont des librairies de fonctions, stockés dans des fichiers séparés que l'on peut vouloir utiliser dans notre code. Ici, nous importons l'objet <code>HttpResponse</code> du module <code>django.http</code> pour qu'on puisse l'utiliser dans notre vue : <code>from django.http import HttpResponse</code> . Il y a d'autres façons d'importer quelques objets (ou tous les objets) d'un module.</li> @@ -180,7 +180,7 @@ class Team(models.Model): </pre> <div class="note"> -<p><strong>Note</strong>: Un peu de Python :</p> +<p><strong>Note :</strong> Un peu de Python :</p> <ul> <li>Python supporte la "programmation orientée-objet", un type de programmation où l'on organise notre code en objets, ce qui inclut les données et fonctions liées qui agiront sur les données. Les objets peuvent être hérités/étendus/dérivés d'autres objets, ce qui permet à ces objets de partager un comportement commun. En Python, on utilise le mot-clé <code>class</code> pour définir le "squelette" d'un objet. On peut créer plusieurs <em>instances</em> spécifiques de ce type d'objet d'après le modèle d'une classe.<br> @@ -260,18 +260,18 @@ def index(request): <ul> <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Didactique: Site web "Bibliothèque locale"</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django didactique Section 2: Créer le squelette du site web</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django didactique Section 3: Utilisation des modèles de données</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django didactique Section 4 : Site d'administration de Django</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django didactique Section 5: Créer la page d'accueil</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/server-side/django/models/index.html b/files/fr/learn/server-side/django/models/index.html index 9ef771b6fd..18311a5a9f 100644 --- a/files/fr/learn/server-side/django/models/index.html +++ b/files/fr/learn/server-side/django/models/index.html @@ -7,9 +7,9 @@ translation_of: Learn/Server-side/Django/Models <div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div> -<p class="summary">Ce troisième article est consacré aux modèles de données pour les sites web générés avec Django. Après une définition et une présentation de la notion de modèle de données, il explique comment les déclarer, choisir le type de champs et quelques méthodes d'accès au modèle de données via Django.</p> +<p>Ce troisième article est consacré aux modèles de données pour les sites web générés avec Django. Après une définition et une présentation de la notion de modèle de données, il explique comment les déclarer, choisir le type de champs et quelques méthodes d'accès au modèle de données via Django.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis:</th> @@ -46,14 +46,14 @@ translation_of: Learn/Server-side/Django/Models <p>Avec ces éléments présents à l'esprit, le diagramme de classes UML ci-dessous décrit les objets de la bibliothèque.</p> -<p><img alt="LocalLibrary Model UML" src="https://mdn.mozillademos.org/files/16479/local_library_model_uml.png" style="height: 660px; width: 977px;"></p> +<p><img alt="LocalLibrary Model UML" src="local_library_model_uml.png"></p> <p>Le modèle ainsi créé, décrit l'objet livre - <em>Book</em> - avec une description générique d'un livre, la copie d'un livre - <em>BookInstance</em> - avec l'état d'un copie physique d'un livre et de sa disponibilité, et l'objet auteur - <em>Author</em>. Les genres des collections pouvant varier, il est plus élégant de concevoir une classe d'objets dédiée comme pour les langues. Considérant que le statut de prêt ne changera pas, il est décidé que le traiter dans le code - <code>BookInstance:status</code> sera géré dans le code Django <code>LOAN_STATUS</code>. Dans le diagramme de classe, les caractéristiques de chacun des attributs et méthodes sont précisées pour plus de clarté du travail à réaliser.</p> <p>Le diagramme met aussi en évidence les relations entre les objets et la cardinalité des relations. La cardinalité est représentée par les nombres entre crochet avec, si nécessaire, un minimum et un maximum. Par exemple, un ouvrage a, au moins un genre ([1..*]) alors qu'un genre peut ne pas référencer un livre ([0..*]) ce qui se traduira en définition des objets dans models.py.</p> <div class="note"> -<p><strong>Note</strong>: La section ci-dessous est une introduction générale à la modélisation des objets pour les modèles de données dans Django. Gardez à l'esprit la bibliothèque locale et imaginez comment devraient être décrits les objets pour cette bibliothèque.</p> +<p><strong>Note :</strong> La section ci-dessous est une introduction générale à la modélisation des objets pour les modèles de données dans Django. Gardez à l'esprit la bibliothèque locale et imaginez comment devraient être décrits les objets pour cette bibliothèque.</p> </div> <h2 id="Introduction_au_modèle_de_données">Introduction au modèle de données</h2> @@ -64,7 +64,7 @@ translation_of: Learn/Server-side/Django/Models <p>Les objets sont <strong>toujours</strong> définis dans le fichier <strong>models.py</strong> de chaque application. Ils sont conçus comme sous-classe de <code>django.db.models.Model</code>, et sont caractérisés par des attributs ou champs, des méthodes et des métadonnées. L'extrait ci-dessous définit donc la classe <code>MyModelName</code>:</p> -<pre class="notranslate">from django.db import models +<pre>from django.db import models class MyModelName(models.Model): """A typical class defining a model, derived from the Model class.""" @@ -92,7 +92,7 @@ class MyModelName(models.Model): <p>Chaque objet peut contenir autant d'attributs que de besoin et de quelque type qu'il soit. Chaque attribut correspondra à une colonne - <em>ou champ</em> - dans une table de la base de données. Chaque enregistrement, ou ligne dans la table, correspondra à une instance de la classe d'objet et chaque champ sera évalué. Un champ est de la forme :</p> -<pre class="brush: js notranslate">my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')</pre> +<pre class="brush: js">my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')</pre> <p>Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type <code>models.CharField</code> — dont le nom est <code>my_field_name</code>. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués :</p> @@ -143,7 +143,7 @@ class MyModelName(models.Model): <p>Vous avez la capacité de déclarer des métadonnées à l'aide de la classe <code>class Meta</code>, comme précisé ci-dessous :</p> -<pre class="brush: python notranslate">class Meta: +<pre class="brush: python">class Meta: ordering = ['-my_field_name'] </pre> @@ -151,13 +151,13 @@ class MyModelName(models.Model): <p>Voici un exemple de classe de livre par titre et dates de parution :</p> -<pre class="brush: python notranslate">ordering = ['title', '-pubdate']</pre> +<pre class="brush: python">ordering = ['title', '-pubdate']</pre> <p>Les livres sont présenté dans l'ordre alphabétique de leur titre, puis dans l'ordre chronologique du plus récent au plus ancien.</p> <p>Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, <code>verbose_name</code> peut être au singulier et au pluriel :</p> -<pre class="brush: python notranslate">verbose_name = 'BetterName'</pre> +<pre class="brush: python">verbose_name = 'BetterName'</pre> <p>D'autres attributs vous permettent de compléter des droits d'accès à ceux appliqués par défaut, des classements s'appuyant sur le comportement d'autres champs, ou de définir une classe abstraite (c'est-à-dire qui n'aura pas de transcription dans une table et des enregistrements, mais servira de support à d'autres classes partageant des éléments communs).</p> @@ -171,18 +171,18 @@ class MyModelName(models.Model): <p><strong>A minima, chaque modèle de données - c'est-à-dire une classe héritée de la classe model du module django.db - vous devez définir la méthode <code>__str__()</code> pour permettre d'afficher un élément compréhensible qui représentera l'instance de la classe.</strong> Cette méthode est aussi utilisée au niveau du site d'administration pour afficher les instances de la classe administrée. La plupart du temps, cette méthode retourne un titre ou nom associé à aux objets de la classe.</p> -<pre class="brush: python notranslate">def __str__(self): +<pre class="brush: python">def __str__(self): return self.field_name</pre> <p>Une seconde méthode très utilisée dans le cadriciel Django est <code>get_absolute_url()</code>. Elle permet de fournir un URL pour afficher dans le site web le contenu de de chacun des enregistrements associés au modèle de données décrit. Si vous utilisez cette méthode, Django ajoutera un bouton pour permet de visualiser le détail des enregistrements. Classiquement, une méthode <code>get_absolute_url()</code> est de la forme :</p> -<pre class="brush: python notranslate">def get_absolute_url(self): +<pre class="brush: python">def get_absolute_url(self): """Returns the url to access a particular instance of the model.""" return reverse('model-detail-view', args=[str(self.id)]) </pre> <div class="note"> -<p><strong>Note</strong>: En supposant que vous allez utiliser des URLs du type <code>/myapplication/mymodelname/2</code> pour afficher individuellement les données des enregistrements de la table associée à votre modèle de données (où "2" est l'<code>id</code>entifiant d'un enregistrement donné), vous devrez créer un routage d'URL pour vous permettre de transmettre l'id à une vue détaillée de l'enregistrement (model detail view dans le cadriciel Django). Cette vue détaillée réalisera l'affichage de l'enregistrement. La fonction <code>reverse()</code> a pour objectif d'écrire l'URL dans un format cohérent avec le traitement des URL par les navigateurs.</p> +<p><strong>Note :</strong> En supposant que vous allez utiliser des URLs du type <code>/myapplication/mymodelname/2</code> pour afficher individuellement les données des enregistrements de la table associée à votre modèle de données (où "2" est l'<code>id</code>entifiant d'un enregistrement donné), vous devrez créer un routage d'URL pour vous permettre de transmettre l'id à une vue détaillée de l'enregistrement (model detail view dans le cadriciel Django). Cette vue détaillée réalisera l'affichage de l'enregistrement. La fonction <code>reverse()</code> a pour objectif d'écrire l'URL dans un format cohérent avec le traitement des URL par les navigateurs.</p> <p>Bien entendu, cela requiert d'écrire le routage de l'URL, la vue et le gabarit...</p> </div> @@ -197,7 +197,7 @@ class MyModelName(models.Model): <p>Pour créer un enregistrement, il suffit de définir une instance de la classe d'objet et de la sauvegarder avec la méthode <code>save()</code>.</p> -<pre class="brush: python notranslate"># Créer un nouvel enregistrement en utilisant la méthode d'instanciation. +<pre class="brush: python"># Créer un nouvel enregistrement en utilisant la méthode d'instanciation. record = MyModelName(my_field_name="Instance #1") # Sauvegarde de l'enregistrement en base de données. @@ -205,12 +205,12 @@ record.save() </pre> <div class="note"> -<p><strong>Note</strong>: Si aucun champs n'a été défini comme une clé primaire (option <code>primary_key</code>), un champs nommé <code>id</code> ou <code>pk</code> sera affecté au modèle et sera incrémenté automatiquement. Vous pouvez requêter cet enregistrement à l'aide de ce champ ; le premier enregistrement aura habituellement la valeur entière 1.</p> +<p><strong>Note :</strong> Si aucun champs n'a été défini comme une clé primaire (option <code>primary_key</code>), un champs nommé <code>id</code> ou <code>pk</code> sera affecté au modèle et sera incrémenté automatiquement. Vous pouvez requêter cet enregistrement à l'aide de ce champ ; le premier enregistrement aura habituellement la valeur entière 1.</p> </div> <p>Les champs de l'enregistrement sont accessibles à l'aide des attributs de la classe d'objet. En utilisant la syntaxe pointée, vous pouvez modifier les valeurs des champs de l'enregistrement. Vous devez utiliser la méthode <code>save()</code> pour enregistrer en base de données les modifications.</p> -<pre class="brush: python notranslate"># Accès au valeur des champs par le biais des attributs de classe Python. +<pre class="brush: python"># Accès au valeur des champs par le biais des attributs de classe Python. print(record.id) # devrez retourner la valeur 1 pour le premier en enregistrement. print(record.my_field_name) # devrez afficher 'Instance #1' @@ -223,17 +223,17 @@ record.save()</pre> <p>La classe de base <code>objects</code> permet de faire des recherches d'enregistrement qui correspondront aux critères de recherche souhaités.</p> <div class="note"> -<p><strong>Note</strong>: Nous utiliserons dans les explications le modèle de données d'un livre (<code>Book</code>)avec des titres (<code>title</code>) et des genres littéraires (<code>genre</code>), car expliquer la manière de rechercher sur un modèle théorique n'est pas très pédagogique.</p> +<p><strong>Note :</strong> Nous utiliserons dans les explications le modèle de données d'un livre (<code>Book</code>)avec des titres (<code>title</code>) et des genres littéraires (<code>genre</code>), car expliquer la manière de rechercher sur un modèle théorique n'est pas très pédagogique.</p> </div> <p>Vous pouvez obtenir tous les enregistrements d'un modèle de données sous la forme d'un jeu de données ou <code>QuerySet</code>, en utilisant <code>objects.all()</code>. Un <code>QuerySet</code> est un objet itérable, c'est-à-dire jeu de données contenant des objets que l'on peut parcourir.</p> -<pre class="brush: python notranslate">all_books = Book.objects.all() +<pre class="brush: python">all_books = Book.objects.all() </pre> <p>Un filtre Django ou <code>filter()</code> est une méthode qui permet de sélectionner un jeu de données répondant à des critères (texte ou numérique) de sélection. Par exemple, nous filtrons les livres dont le titre contient le mot "wild", puis nous dénombrons le jeu de données.</p> -<pre class="brush: python notranslate">wild_books = Book.objects.filter(title__contains='wild') +<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild') number_wild_books = wild_books.count() </pre> @@ -241,12 +241,12 @@ number_wild_books = wild_books.count() <p>Le marqueur "double souligné" permet de construire une chaîne de navigation à travers les objets lorsque le champ considéré est une clé étrangère (<code>ForeignKey</code>). C'est systématiquement le cas lorsque l'on doit filtrer sur une propriété d'un attribut dans une relation un-à-un. Dans ce cas (exemple ci-dessous), vous identifiez l'attribut de la clé étrangère par le biais d'un "double souligné" qui indique le champs à filter. L'exemple ci-dessous indique que vous filtrez les livres selon le nom (<code>name</code>) du genre (<code>genre</code>) du livre.</p> -<pre class="brush: python notranslate"># Le critère s'appliquera sur les genres contenant 'fiction' i.e. : Fiction, Science fiction, non-fiction etc. +<pre class="brush: python"># Le critère s'appliquera sur les genres contenant 'fiction' i.e. : Fiction, Science fiction, non-fiction etc. books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction') </pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (<code>ForeignKey</code>/<code>ManyToManyField</code>) que vous en avez besoin en concaténant des noms de champs à l'aide (__) . Si par exemple vous souhaitez trouver un livre (<code>Book</code>) qui possède différents type (<code>type</code>) de couvertures (<code>cover</code>) identifiées par des noms (<code>name</code>) alors le chemin sera du type : <code>type__cover__name__exact='hard'.</code></p> +<p><strong>Note :</strong> Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (<code>ForeignKey</code>/<code>ManyToManyField</code>) que vous en avez besoin en concaténant des noms de champs à l'aide (__) . Si par exemple vous souhaitez trouver un livre (<code>Book</code>) qui possède différents type (<code>type</code>) de couvertures (<code>cover</code>) identifiées par des noms (<code>name</code>) alors le chemin sera du type : <code>type__cover__name__exact='hard'.</code></p> </div> <p>La mise en oeuvre des requêtes est très riches en fonction des modèles et des relations, de sous-ensemble de données, etc. Pour une informations détaillées, vous devez consulter <a href="https://docs.djangoproject.com/fr/2.2/topics/db/queries/">les requêtes</a> sur le site de référence de Django.</p> @@ -255,7 +255,7 @@ books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong <p>Cette section est consacrée au démarrage de la définition de l'application LocalLibrary qui permet de gérer une petite bibliothèque locale. Ouvrez le fichier <em>models.py </em>présent dans le répertoire<em> /locallibrary/catalog/</em>. Le code par défaut est déjà en place au début du document et permet d'importer les éléments du module models de django.</p> -<pre class="brush: python notranslate">from django.db import models +<pre class="brush: python">from django.db import models # Create your models here.</pre> @@ -263,7 +263,7 @@ books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong <p>Cet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier <em>models.py</em>.</p> -<pre class="brush: python notranslate">class Genre(models.Model): +<pre class="brush: python">class Genre(models.Model): """Cet objet représente une catégorie ou un genre littéraire.""" name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)') @@ -278,7 +278,7 @@ books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong <p>Comme précédemment, vous pouvez copier le descriptif de l'objet Book à la fin du fichier models.py. Cet objet représente un livre dans sa description et non une copie en rayon disponible au prêt. Par conséquent, l'objet contient un titre et son identifiant international (isbn dont on notera l'étiquette en majuscule pour ne pas avoir "Isbn" à la place) sous forme de chaînes de caractère. De plus, l'objet contient un résumé sous forme d'une chaîne de caractère de longueur non explicite pour traiter de résumés plus ou moins long.</p> -<pre class="brush: python notranslate">from django.urls import reverse # Cette fonction est utilisée pour formater les URL +<pre class="brush: python">from django.urls import reverse # Cette fonction est utilisée pour formater les URL class Book(models.Model): """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon).""" @@ -324,7 +324,7 @@ class Book(models.Model): <li>Une chaîne de caractères (<code>CharField)</code> pour enregistrer les mentions légales (imprint) du livre.</li> </ul> -<pre class="brush: python notranslate">import uuid # Ce module est nécessaire à la gestion des identifiants unique (RFC 4122) pour les copies des livres +<pre class="brush: python">import uuid # Ce module est nécessaire à la gestion des identifiants unique (RFC 4122) pour les copies des livres class BookInstance(models.Model): """Cet objet permet de modéliser les copies d'un ouvrage (i.e. qui peut être emprunté).""" @@ -367,7 +367,7 @@ class BookInstance(models.Model): <p>La méthode <code>__str__()</code> obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. Elle offre cependant la particularité d'associer l'identifiant unique et le titre du livre qui lui est associé.</p> <div class="note"> -<p><strong>Note</strong>: Un aspect de Python:</p> +<p><strong>Note :</strong> Un aspect de Python:</p> <ul> <li>Si vous démarrez avec une version postérieure à la version 3.6, vous pouvez utiliser le formatage des chaînes de caractère avec la fonction f-strings : <code>f'{self.id} ({self.book.title})'</code>.</li> @@ -379,7 +379,7 @@ class BookInstance(models.Model): <p>Terminons en copiant la description de l'objet <code>Author</code> à la fin du fichier <strong>models.py</strong>.</p> -<pre class="brush: python notranslate">class Author(models.Model): +<pre class="brush: python">class Author(models.Model): """Model representing an author.""" first_name = models.CharField(max_length=100) last_name = models.CharField(max_length=100) @@ -404,8 +404,8 @@ class BookInstance(models.Model): <p>Les objets sont tous décrits dans le fichier dédié à la modélisation. Pour qu'elles soient effectives, il est nécessaire d'exécuter les deux commandes python qui gèrent les migrations de la base de données.</p> -<pre class="notranslate"><code>python3 manage.py makemigrations -python3 manage.py migrate</code></pre> +<pre>python3 manage.py makemigrations +python3 manage.py migrate</pre> <h2 id="Défi_—_Introduire_les_langues">Défi — Introduire les langues</h2> @@ -422,14 +422,8 @@ python3 manage.py migrate</code></pre> <p>Une dernière chose... n'oubliez pas d'appliquer les modifications en base de données</p> -<pre class="notranslate"><code>python3 manage.py makemigrations</code><code> -python3 manage.py migrate</code></pre> - -<ul> -</ul> - -<ul> -</ul> +<pre>python3 manage.py makemigrations +python3 manage.py migrate</pre> <h2 id="Résumé">Résumé</h2> @@ -451,18 +445,18 @@ python3 manage.py migrate</code></pre> <ul> <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Didactique: Site web "Bibliothèque locale"</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django didactique Section 2: Créer le squelette du site web</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django didactique Section 3: Utilisation des modèles de données</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django didactique Section 4 : Site d'administration de Django</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django didactique Section 5: Créer la page d'accueil</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/server-side/django/skeleton_website/index.html b/files/fr/learn/server-side/django/skeleton_website/index.html index a9189bb599..636b371873 100644 --- a/files/fr/learn/server-side/django/skeleton_website/index.html +++ b/files/fr/learn/server-side/django/skeleton_website/index.html @@ -17,13 +17,13 @@ translation_of: Learn/Server-side/Django/skeleton_website <div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div> -<p class="summary">Ce second article de la série <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">didactique Django</a> va décrire comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spécifiques comme les modèles de données, les vues, les gabarits, les formulaires...</p> +<p>Ce second article de la série <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">didactique Django</a> va décrire comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spécifiques comme les modèles de données, les vues, les gabarits, les formulaires...</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Set up a Django development environment</a>. Avoir pris connaissance de <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">l'article précédent</a>.</td> + <td><a href="/fr/docs/Learn/Server-side/Django/development_environment">Set up a Django development environment</a>. Avoir pris connaissance de <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">l'article précédent</a>.</td> </tr> <tr> <th scope="row">Objectifs:</th> @@ -39,45 +39,45 @@ translation_of: Learn/Server-side/Django/skeleton_website <p>La création est aisée:</p> <ol> - <li><span style="line-height: 1.5;">Utilisez la commande </span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">django-admin</code><span style="line-height: 1.5;"> pour créer le dossier du projet ainsi que les sous-dossiers et fichiers de base ainsi que le script de gestion du projet (</span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;">).</span></li> - <li><span style="line-height: 1.5;">Utilisez </span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;"> pour créer une ou plusieurs <em>applications</em> du projet</span><span style="line-height: 1.5;">.</span> + <li>Utilisez la commande <code>django-admin</code> pour créer le dossier du projet ainsi que les sous-dossiers et fichiers de base ainsi que le script de gestion du projet (<strong>manage.py</strong>).</li> + <li>Utilisez <strong>manage.py</strong> pour créer une ou plusieurs <em>applications</em> du projet. <div class="note"> - <p><strong>Note</strong>: Un site web consiste en une ou plusieurs sections, par exemple un site principal, un blog, un wiki,... La bonne pratique avec Django est de réaliser chacun des composants comme des applications séparées qui pourront éventuellement être réutilisées dans d'autres projets.</p> + <p><strong>Note :</strong> Un site web consiste en une ou plusieurs sections, par exemple un site principal, un blog, un wiki,... La bonne pratique avec Django est de réaliser chacun des composants comme des applications séparées qui pourront éventuellement être réutilisées dans d'autres projets.</p> </div> </li> - <li><span style="line-height: 1.5;">Enregistrez la nouvelle application dans le projet. </span></li> - <li><span style="line-height: 1.5;">Liez les urls et chemins pour chaque application.</span></li> + <li>Enregistrez la nouvelle application dans le projet. </li> + <li>Liez les urls et chemins pour chaque application.</li> </ol> <p>Pour <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">le site web "Bibliothèque locale"</a>, le dossier du site web et celui du projet auront le même nom <em>locallibrary</em>. Une seule application <em>catalog</em> sera utilisée. La hiérachie de dossier du projet à la forme ci-dessous :</p> -<pre class="brush: bash notranslate"><em>locallibrary/ # Website folder</em> +<pre class="brush: bash"><em>locallibrary/ # Website folder</em> <strong>manage.py </strong># Script to run Django tools for this project (created using django-admin) <em>locallibrary/ # Website/project folder </em>(created using django-admin) <em>catalog/ # Application folder </em>(created using manage.py) </pre> -<div class="blockIndicator note"> -<p>Afin de respecter la cohérence du code et pouvoir utiliser les développements sur GitHub, les noms du site et des applications, <em>en anglais</em>, n'ont pas été modifiés.</p> +<div class="note"> +<p><strong>Note :</strong> Afin de respecter la cohérence du code et pouvoir utiliser les développements sur GitHub, les noms du site et des applications, <em>en anglais</em>, n'ont pas été modifiés.</p> </div> -<p><span style="line-height: 1.5;">La suite de ce chapitre est consacrée pas à pas aux étapes de création d'un projet et d'une application. La fin du chapitre sera consacré à quelques éléments de configuration du site qui peuvent être réalisés à ce stade.</span></p> +<p>La suite de ce chapitre est consacrée pas à pas aux étapes de création d'un projet et d'une application. La fin du chapitre sera consacré à quelques éléments de configuration du site qui peuvent être réalisés à ce stade.</p> <h2 id="Créer_le_projet_locallibrary">Créer le projet <em>locallibrary</em></h2> -<p>Tout d'abord, il est nécessaire d'ouvrir une fenêtre pour exécuter des commandes en ligne (un terminal sous Linux/MacOS ou une fenêtre command sous Windows). Assurez-vous d'être dans un <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">environnement virtuel python</a>, déplacez-vous dans votre arborescence de dossiers pour être dans votre zone de développement des applications Django. Créez-y un sous-dossier pour les projets Django <code>django_projects</code> et déplacez-vous dans ce dernier :</p> +<p>Tout d'abord, il est nécessaire d'ouvrir une fenêtre pour exécuter des commandes en ligne (un terminal sous Linux/MacOS ou une fenêtre command sous Windows). Assurez-vous d'être dans un <a href="/fr/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">environnement virtuel python</a>, déplacez-vous dans votre arborescence de dossiers pour être dans votre zone de développement des applications Django. Créez-y un sous-dossier pour les projets Django <code>django_projects</code> et déplacez-vous dans ce dernier :</p> -<pre class="brush: bash notranslate">mkdir django_projects +<pre class="brush: bash">mkdir django_projects cd django_projects</pre> <p>Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande <code>django-admin startproject</code>. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous :</p> -<pre class="brush: bash notranslate">django-admin startproject locallibrary +<pre class="brush: bash">django-admin startproject locallibrary cd locallibrary</pre> <p>La commande <code>django-admin</code> crée une arboresence contenant des fichiers et un sous-dossier portant le même nom que le projet :</p> -<pre class="brush: bash notranslate"><em>locallibrary/</em> +<pre class="brush: bash"><em>locallibrary/</em> manage.py <em>locallibrary/</em> __init__.py @@ -87,15 +87,15 @@ cd locallibrary</pre> <p>Votre répertoire de travail est de la forme :</p> -<pre class="syntaxbox notranslate">../django_projects/locallibrary/</pre> +<pre class="syntaxbox">../django_projects/locallibrary/</pre> <p>Le sous-dossier <em>locallibrary</em> permettra de gérer les requêtes web, il contient :</p> <ul> <li><strong>__init__.py </strong>est un fichier vide qui indique au langage Python de considérer ce dossier comme un module Python.</li> <li><strong>settings.py</strong> contient les paramètrages du site web. C'est ce fichier qui permet de contrôler l'enregistrement des applications créées - qui va être exposé plus bas -, la configuration de la base de données ou des variables globales au site. </li> - <li><strong>urls.py</strong> contient les indications de routage des urls du site web. Alors qu'il pourraient contenir toutes les urls, nous verrons plus loin qu'ils est plus pratique de déléguer la gestion des urls à propre à chacune des applications dans le contexte de l'application.<span style="line-height: 1.5;"> </span></li> - <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;"> est utilisé pour la gestion de l'interface entre Python et le serveur web. Il est recommandé de ne pas y toucher.</span></li> + <li><strong>urls.py</strong> contient les indications de routage des urls du site web. Alors qu'il pourraient contenir toutes les urls, nous verrons plus loin qu'ils est plus pratique de déléguer la gestion des urls à propre à chacune des applications dans le contexte de l'application. </li> + <li><strong>wsgi.py</strong> est utilisé pour la gestion de l'interface entre Python et le serveur web. Il est recommandé de ne pas y toucher.</li> </ul> <p>Le fichier <strong>manage.py</strong> est utilisé pour créer et gérer les applications au sein du projet. C'est une boîte à outil précieuse qu'il ne faut pas modifier.</p> @@ -104,10 +104,10 @@ cd locallibrary</pre> <p>La commande ci-dessous va créer l'application <em>catalog</em>. Vous devez être dans le dossier de votre projet locallibrary pour exécuter cette commande (dans le même dossier que le fichier <strong>manage.py</strong> de votre projet) :</p> -<pre class="brush: bash notranslate">python3 manage.py startapp catalog</pre> +<pre class="brush: bash">python3 manage.py startapp catalog</pre> <div class="note"> -<p><strong>Note</strong>: La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : <code>py -3 manage.py startapp catalog</code></p> +<p><strong>Note :</strong> La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : <code>py -3 manage.py startapp catalog</code></p> <p>Si vous travaillez dans un environnement Windows, l'ensemble de la série didactique est écrite pour un environnement Linux/MacOS. Pensez, alors, à remplacer les commandes <code>python3</code> par <code>py -3</code>.</p> @@ -118,7 +118,7 @@ cd locallibrary</pre> <p>Le dossier projet <em>locallibrary</em> est agrémenté d'un nouveau sous-dossier <em>catalog</em> :</p> -<pre class="brush: bash notranslate"><em>locallibrary/</em> +<pre class="brush: bash"><em>locallibrary/</em> manage.py <em>locallibrary/ </em><strong> <em>catalog/</em> @@ -139,7 +139,7 @@ cd locallibrary</pre> </ul> <div class="note"> -<p><strong>Note</strong>: Vous pouvez constater que dans le dossier de l'application, il n'y a pas de fichier pour gérer les urls, les gabarits ou les fichiers statiques. Nouys verrons ce point un peu plus loin, ils ne sont pas systématiquement nécessaires.</p> +<p><strong>Note :</strong> Vous pouvez constater que dans le dossier de l'application, il n'y a pas de fichier pour gérer les urls, les gabarits ou les fichiers statiques. Nouys verrons ce point un peu plus loin, ils ne sont pas systématiquement nécessaires.</p> </div> <h2 id="Enregistrer_lapplication_catalog">Enregistrer l'application <em>catalog</em></h2> @@ -148,7 +148,7 @@ cd locallibrary</pre> <p>Éditez le fichier <strong>django_projects/locallibrary/locallibrary/settings.py</strong> et allez jusqu'à la liste <code>INSTALLED_APPS</code>. Ajoutez alors comme indiqué ci-dessous l'application à la liste.</p> -<pre class="brush: bash notranslate">INSTALLED_APPS = [ +<pre class="brush: bash">INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', @@ -161,7 +161,7 @@ cd locallibrary</pre> <p>Le nouvel enregistrement défini l'objet pour cette nouvelle application avec le nom (<code>CatalogConfig</code>) qui a été généré dans le fichier <strong>/locallibrary/catalog/apps.py</strong> quand l'application a été créée.</p> <div class="note"> -<p><strong>Note</strong>: Nous verrons plus loin les autres paramètres de ce fichier(comme <code>MIDDLEWARE</code>). Cela permet la prise en charge par <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> et donne accès à de nombreuses fonctionnalités (gestion des sessions, de l'authentication, etc).</p> +<p><strong>Note :</strong> Nous verrons plus loin les autres paramètres de ce fichier(comme <code>MIDDLEWARE</code>). Cela permet la prise en charge par <a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> et donne accès à de nombreuses fonctionnalités (gestion des sessions, de l'authentication, etc).</p> </div> <h2 id="Définir_la_base_de_données">Définir la base de données</h2> @@ -170,7 +170,7 @@ cd locallibrary</pre> <p>Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas de paramétrages complémentaires. Ci-dessous la définition dans <strong>settings.py</strong> est nécessaire pour utiliser ce SGBD :</p> -<pre class="brush: python notranslate">DATABASES = { +<pre class="brush: python">DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), @@ -182,7 +182,7 @@ cd locallibrary</pre> <p>Le fichier <strong>settings.py</strong> est utilisé pour l'ensemble des paramètres du projet, mais pour le moment nous n'allons nous occuper du fuseau horaire. Le format des fuseaux horaires est le format standard en informatique (<a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">Liste des codes - <em>en anglais</em></a>). Changez la variable <code>TIME_ZONE</code> de votre projet avec la chaîne appropriée à votre fuseau, par exemple :</p> -<pre class="brush: python notranslate">TIME_ZONE = 'Europe/Paris'</pre> +<pre class="brush: python">TIME_ZONE = 'Europe/Paris'</pre> <p>Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l'instant :</p> @@ -197,7 +197,7 @@ cd locallibrary</pre> <p>A l'ouverture du fichier <strong>locallibrary/locallibrary/urls.py</strong>, vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs.</p> -<pre class="brush: python notranslate">"""locallibrary URL Configuration +<pre class="brush: python">"""locallibrary URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/2.1/topics/http/urls/ @@ -223,12 +223,12 @@ urlpatterns = [ <p>Le routage des URLs est géré à l'aide de la variable <code>urlpatterns</code>. Elle consititue une liste Python de fonctions <code>path()</code>. Chaque instance <code>path()</code> peut associer des motifs d'URL à une vue particulière, qui sera appelée si l'URL appellée correspond au motif décrit, ou vers une autre liste d'URL (dans ce cas, le motif est à considérer comme le motif de base pour le module dans lequel il est décrit). La variable <code>urlpatterns</code> contient au démarrage une seule fonction qui permet de gérer l'URL d'administration du site et utilisant le module par défaut de Django <code>admin.site.urls</code>.</p> <div class="note"> -<p><strong>Note</strong>: Dans la fonction <code>path()</code>, une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple <code>'catalog/<id>/'</code>). Ce motif correspondra à une URL du type <strong>/catalog/</strong><em>des_caracteres</em><strong>/</strong>. La chaîne <em>des_caracteres</em> sera transmis à la vue comme une chaîne de caractère associée à une variable nommée <code>id</code>. Ce point sera vu en détails plus loin dans la série didactique.</p> +<p><strong>Note :</strong> Dans la fonction <code>path()</code>, une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple <code>'catalog/<id>/'</code>). Ce motif correspondra à une URL du type <strong>/catalog/</strong><em>des_caracteres</em><strong>/</strong>. La chaîne <em>des_caracteres</em> sera transmis à la vue comme une chaîne de caractère associée à une variable nommée <code>id</code>. Ce point sera vu en détails plus loin dans la série didactique.</p> </div> <p>Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable <code>urlpatterns</code> une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour <code>catalog/</code> dont la gestion est déléguée au fichier <strong>urls.py</strong> du module <strong>catalog</strong> (c'est-à-dire le fichier <strong>catalog/urls.py</strong>).</p> -<pre class="brush: python notranslate"># Use include() to add paths from the catalog application +<pre class="brush: python"># Use include() to add paths from the catalog application from django.urls import include from django.urls import path @@ -242,7 +242,7 @@ urlpatterns += [ <p>Ajoutez les lignes ci-dessous au bas du fichier <strong>urls.py</strong> :</p> -<pre class="brush: python notranslate">#Add URL maps to redirect the base URL to our application +<pre class="brush: python">#Add URL maps to redirect the base URL to our application from django.views.generic import RedirectView urlpatterns += [ path('', RedirectView.as_view(url='/catalog/', permanent=True)), @@ -251,7 +251,7 @@ urlpatterns += [ <p>La racine du site ('/') est prise en compte par Django, il est donc inutile d'écrire le chemin avec le caractère '/' en début. Si vous maintenez ce mode d'écriture, vous aurez le message ci-dessous au démarrage du serveur :</p> -<pre class="brush: python notranslate">System check identified some issues: +<pre class="brush: python">System check identified some issues: WARNINGS: ?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'. @@ -263,7 +263,7 @@ If this pattern is targeted in an include(), ensure the include() pattern has a <p>Ajoutez les lignes ci-dessous au bas du fichier <strong>urls.py</strong> :</p> -<pre class="notranslate"><code># Use static() to add url mapping to serve static files during development (only) +<pre><code># Use static() to add url mapping to serve static files during development (only) from django.conf import settings from django.conf.urls.static import static @@ -271,9 +271,9 @@ urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</ </pre> <div class="note"> -<p><strong>Note</strong>: Il y a plusieurs manière pour ajouter des routes à la variable <code>urlpatterns</code> (dans les étapes décrites ci-dessus nous avons ajouté petit à patir en utilisant l'opérateur <code>+=</code> pour bien séparer les étapes). Il est en réalité tout à fait possible de tout regrouper dans une seule étape :</p> +<p><strong>Note :</strong> Il y a plusieurs manière pour ajouter des routes à la variable <code>urlpatterns</code> (dans les étapes décrites ci-dessus nous avons ajouté petit à patir en utilisant l'opérateur <code>+=</code> pour bien séparer les étapes). Il est en réalité tout à fait possible de tout regrouper dans une seule étape :</p> -<pre class="brush: python notranslate">urlpatterns = [ +<pre class="brush: python">urlpatterns = [ path('admin/', admin.site.urls), path('catalog/', include('catalog.urls')), path('', RedirectView.as_view(url='/catalog/')), @@ -285,7 +285,7 @@ urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</ <p>Dernière étape ! Il faut créer le fichier urls.py dans l'application (ou le module) catalog et de définir la variable <code>urlpatterns</code> vide pour le moment. </p> -<pre class="brush: python notranslate">from django.urls import path +<pre class="brush: python">from django.urls import path from . import views urlpatterns = [ @@ -305,12 +305,12 @@ urlpatterns = [ <p>Quand le site a été créé (cf. supra), Django a automatiquement ajouté plusieurs modèles de base pour pouvoir administrer le site (point qui sera abordé plus loin). Pour configurer la base de données, avec ces éléments de base, il vous faut exécuter les commandes en ligne ci-dessous dans le répertoire racine du projet (dossier où se trouve<strong> manage.py</strong>):</p> -<pre class="brush: bash notranslate">python3 manage.py makemigrations +<pre class="brush: bash">python3 manage.py makemigrations python3 manage.py migrate </pre> <div class="warning"> -<p><strong>Important</strong>: Chaque fois que vous ferez évoluer le modèle de données, vous devrez exécuter le commandes ci-dessus (elles seront traduites en structure dans la base de données que cela conduise à l'ajout ou au retrait d'objets ou d'attributs).</p> +<p><strong>Attention :</strong> Chaque fois que vous ferez évoluer le modèle de données, vous devrez exécuter le commandes ci-dessus (elles seront traduites en structure dans la base de données que cela conduise à l'ajout ou au retrait d'objets ou d'attributs).</p> </div> <p>L'option <code>makemigrations</code> réalise (sans les appliquer) les migrations nécessaires à toutes les applications du projet. Vous pouvez cependant préciser le nom de l'application pour laquelle vous souhaitez réaliser la migration. Ceci permet de vérifier le code et la cohérence du modèle de donner avant de l'appliquer réellement. Quand vous aurez un niveau expert, vous pourrez choisir de les modifier à la marge.</p> @@ -318,7 +318,7 @@ python3 manage.py migrate <p>L'option <code>migrate</code> applique les modifications sur la base de données (Django trace les modifications réalisées dans la base de données).</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez consulter la documentation <a href="https://docs.djangoproject.com/fr/2.2/topics/migrations/">Migrations</a> (sur le site Django) pour plus d'informations.</p> +<p><strong>Note :</strong> Vous pouvez consulter la documentation <a href="https://docs.djangoproject.com/fr/2.2/topics/migrations/">Migrations</a> (sur le site Django) pour plus d'informations.</p> </div> <h3 id="Démarrer_le_site_web">Démarrer le site web</h3> @@ -326,12 +326,12 @@ python3 manage.py migrate <p>Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur.</p> <div class="note"> -<p><strong>Note</strong>: Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL <code>http://127.0.0.1:8000/</code>. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes <a href="https://docs.djangoproject.com/fr/2.2/ref/django-admin/#runserver">django-admin and manage.py: runserver</a>.</p> +<p><strong>Note :</strong> Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL <code>http://127.0.0.1:8000/</code>. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes <a href="https://docs.djangoproject.com/fr/2.2/ref/django-admin/#runserver">django-admin and manage.py: runserver</a>.</p> </div> <p>Pour démarrer le serveur local, il suffit d'exécuter la commande ci-dessous dans le répertoire du projet (dossier où se trouver <strong>manage.py</strong>) :</p> -<pre class="brush: bash notranslate">python3 manage.py runserver +<pre class="brush: bash">python3 manage.py runserver Performing system checks... @@ -344,18 +344,18 @@ python3 manage.py migrate <p>Dès que le serveur est actif, vous pouvez utiliser votre navigateur est accéder à l'URL <code>http://127.0.0.1:8000/</code>. Vous devriez accéder à la page d'erreur ci-dessous :</p> -<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p> +<p><img alt="Django Debug page for Django 2.0" src="django_404_debug_page.png"></p> <p>Ne vous inquitez ! Cette erreur était attendue ; elle est due à l'absence de défintion de routes dans le fichier catalog/urls.py ou dans le module <code>catalog.urls</code> module (que nous avons déclaré dans le fichier urls.py du projet). </p> <div class="note"> -<p><strong>Note</strong>: La page web ci-dessus met en exergue une fonctionnalité utile de Django ; le mode des traces de debogag. Au lieu d'une simple erreur renvoyée par le serveur, celui-ci affiche un écran d'erreur avec des informations utiles pour corriger le développement conduisant à cette erreur d'affichage. Dans le cas présent, l'erreur est due au motif de l'URL qui ne correspond pas à ce qui a été configuré.</p> +<p><strong>Note :</strong> La page web ci-dessus met en exergue une fonctionnalité utile de Django ; le mode des traces de debogag. Au lieu d'une simple erreur renvoyée par le serveur, celui-ci affiche un écran d'erreur avec des informations utiles pour corriger le développement conduisant à cette erreur d'affichage. Dans le cas présent, l'erreur est due au motif de l'URL qui ne correspond pas à ce qui a été configuré.</p> </div> <p>À ce stade, nous pouvons considérer que le serveur fonctionne !</p> <div class="note"> -<p><strong>Note</strong>: Chaque fois que vous apportez des modifications significatives, il est important d'exécuter à nouveau un migration et un test du serveur. Cela est assez rapide, pour ne pas s'en priver !</p> +<p><strong>Note :</strong> Chaque fois que vous apportez des modifications significatives, il est important d'exécuter à nouveau un migration et un test du serveur. Cela est assez rapide, pour ne pas s'en priver !</p> </div> <h2 id="Relevez_le_défi...">Relevez le défi...</h2> @@ -371,7 +371,7 @@ python3 manage.py migrate <p>Le squelette du site web est entièrement construit à ce stade. Désormais, vous allez pouvoir y ajouter des urls, des vues, des modèles de données, des gabarits et des formulaires.</p> -<p>Maintenant que ceci est fait, <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">le site web Local Library</a> est opérationnel et nous allons passer à la partie codage et développement pour que le site produise ce qu'il est censé faire.</p> +<p>Maintenant que ceci est fait, <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">le site web Local Library</a> est opérationnel et nous allons passer à la partie codage et développement pour que le site produise ce qu'il est censé faire.</p> <h2 id="A_voir_aussi...">A voir aussi...</h2> @@ -386,18 +386,18 @@ python3 manage.py migrate <ul> <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Didactique: Site web "Bibliothèque locale"</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django didactique Section 2: Créer le squelette du site web</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django didactique Section 3: Utilisation des modèles de données</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django didactique Section 4 : Site d'administration de Django</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django didactique Section 5: Créer la page d'accuei</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/server-side/django/testing/index.html b/files/fr/learn/server-side/django/testing/index.html index ab06d584ec..c61cb87e24 100644 --- a/files/fr/learn/server-side/django/testing/index.html +++ b/files/fr/learn/server-side/django/testing/index.html @@ -17,13 +17,13 @@ translation_of: Learn/Server-side/Django/Testing <div>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</div> -<p class="summary">Quant un site web grandit, il devient plus difficile à tester manuellement. Non seulement il y a plus de choses à tester, mais encore, comme les interactions entres ses composants deviennent plus complexes, un léger changement dans une partie de l'application peut affecter les autres parties, si bien qu'il va être nécessaire de faire beaucoup de modifications pour s'assurer que tout continue de fonctionner, et qu'aucune erreur ne sera introduite quand il y aura encore plus de modifications. Une façon de limiter ces problèmes est d'écrire des tests automatiques qui puissent être lancés d'une manière simple et fiable à chaque fois que vous faites une modification. Ce tutoriel montre comment automatiser des <em>tests unitaires</em> sur votre site web en utilisant le framework de tests de Django.</p> +<p>Quant un site web grandit, il devient plus difficile à tester manuellement. Non seulement il y a plus de choses à tester, mais encore, comme les interactions entres ses composants deviennent plus complexes, un léger changement dans une partie de l'application peut affecter les autres parties, si bien qu'il va être nécessaire de faire beaucoup de modifications pour s'assurer que tout continue de fonctionner, et qu'aucune erreur ne sera introduite quand il y aura encore plus de modifications. Une façon de limiter ces problèmes est d'écrire des tests automatiques qui puissent être lancés d'une manière simple et fiable à chaque fois que vous faites une modification. Ce tutoriel montre comment automatiser des <em>tests unitaires</em> sur votre site web en utilisant le framework de tests de Django.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Avoir terminé tous les tutoriels précédents, y compris <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</td> + <td>Avoir terminé tous les tutoriels précédents, y compris <a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -34,7 +34,7 @@ translation_of: Learn/Server-side/Django/Testing <h2 id="Vue_densemble">Vue d'ensemble</h2> -<p>Le site <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library</a> a actuellement des pages pour afficher des listes de tous les livres et auteurs, des pages de détail pour les éléments de type <code>Book</code> et <code>Author</code>, une page pour renouveler des <code>BookInstance</code>s, et des pages pour créer, mettre à jour et effacer des éléments de type <code>Author</code> (et également des enregistrements de type <code>Book</code>, si vous avez relevé le <em>défi</em> dans le <a href="/en-US/docs/Learn/Server-side/Django/Forms">tutoriel sur les formulaires</a>). Même avec ce site relativement petit, naviguer manuellement vers chaque page et vérifier <em>superficiellement</em> que tout fonctionne comme prévu peut prendre plusieurs minutes. Quand nous allons faire des modifications et agrandir le site, le temps requis pour vérifier manuellement que tout fonctionne "proprement" va grandir. Si nous continuons comme cela, nous allons sûrement passer beaucoup de temps à tester notre code, et peu à l'améliorer.</p> +<p>Le site <a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library</a> a actuellement des pages pour afficher des listes de tous les livres et auteurs, des pages de détail pour les éléments de type <code>Book</code> et <code>Author</code>, une page pour renouveler des <code>BookInstance</code>s, et des pages pour créer, mettre à jour et effacer des éléments de type <code>Author</code> (et également des enregistrements de type <code>Book</code>, si vous avez relevé le <em>défi</em> dans le <a href="/fr/docs/Learn/Server-side/Django/Forms">tutoriel sur les formulaires</a>). Même avec ce site relativement petit, naviguer manuellement vers chaque page et vérifier <em>superficiellement</em> que tout fonctionne comme prévu peut prendre plusieurs minutes. Quand nous allons faire des modifications et agrandir le site, le temps requis pour vérifier manuellement que tout fonctionne "proprement" va grandir. Si nous continuons comme cela, nous allons sûrement passer beaucoup de temps à tester notre code, et peu à l'améliorer.</p> <p>Les tests automatiques peuvent vraiment nous aider à régler ce problème. Les avantages évidents sont qu'ils peuvent être lancés bien rapidement que des tests manuels, peuvent réaliser des tests à un niveau bien plus bas de détail, et tester exactement les mêmes fonctionnalités à chaque fois (des testeurs humains sont loin d'être aussi fiables !). Parce qu'ils sont rapides, les tests automatisés peuvent être exécutés plus régulièrement, et si un test échoue, ils pointent exactement vers la partie du code qui n'a pas fonctionné comme prévu.</p> @@ -56,14 +56,14 @@ translation_of: Learn/Server-side/Django/Testing </dl> <div class="note"> -<p><strong>Note : </strong>Les autres genres habituels de tests comprennent : la boîte noire, la boîte blanche, les tests manuels, automatiques, de canari (canary), de fumée (smoke), de conformité (conformance), d'approbation (acceptance), fonctionnels, système, performance, chargement et stress. Consultez pour plus d'information sur chacun d'eux.</p> +<p><strong>Note :</strong> Les autres genres habituels de tests comprennent : la boîte noire, la boîte blanche, les tests manuels, automatiques, de canari (canary), de fumée (smoke), de conformité (conformance), d'approbation (acceptance), fonctionnels, système, performance, chargement et stress. Consultez pour plus d'information sur chacun d'eux.</p> </div> <h3 id="Que_fournit_Django_pour_tester">Que fournit Django pour tester ?</h3> <p>Tester un site web est une tâche complexe, car c'est une opération qui comporte plusieurs couches de logique : depuis la couche HTTP, la gestion des requêtes, les modèles d'interrogation de bases de données, jusqu'à la validation des formulaires, leur traitement et le rendu des templates.</p> -<p>Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python <code><a href="https://docs.python.org/3/library/unittest.html#module-unittest" title="(in Python v3.5)">unittest</a></code>. Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API (<a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>) et des outils pour <a href="https://docs.djangoproject.com/en/2.1/topics/testing/advanced/#other-testing-frameworks">utiliser d'autres frameworks de test</a>. Par exemple vous pouvez intégrer le célèbre framework <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> pour simuler l'interaction entre un utilisateur et un vrai navigateur.</p> +<p>Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python <code><a href="https://docs.python.org/3/library/unittest.html#module-unittest" title="(in Python v3.5)">unittest</a></code>. Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API (<a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>) et des outils pour <a href="https://docs.djangoproject.com/en/2.1/topics/testing/advanced/#other-testing-frameworks">utiliser d'autres frameworks de test</a>. Par exemple vous pouvez intégrer le célèbre framework <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> pour simuler l'interaction entre un utilisateur et un vrai navigateur.</p> <p>Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par <em>unittest</em>) (<a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#simpletestcase">SimpleTestCase</a>, <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#transactiontestcase">TransactionTestCase</a>, <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase">TestCase</a>, <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne <code>True</code> ou <code>False</code>, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (<em>setUp</em>) et/ou un comportement de fin (<em>tearDown</em>) définis dans la classe, comme indiqué ci-dessous.</p> @@ -109,7 +109,7 @@ translation_of: Learn/Server-side/Django/Testing def __str__(self): return '%s, %s' % (self.last_name, self.first_name)</pre> -<p>De même, vous pouvez tester que les méthodes personnalisées <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code> et <code style="font-style: normal; font-weight: normal;">__str__()</code> se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code>, vous pouvez supposer que la méthode Django <code>reverse()</code> a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.</p> +<p>De même, vous pouvez tester que les méthodes personnalisées <code>get_absolute_url()</code> et <code>__str__()</code> se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de <code>get_absolute_url()</code>, vous pouvez supposer que la méthode Django <code>reverse()</code> a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.</p> <div class="note"> <p><strong>Note :</strong> Les lecteurs attentifs auront noté que nous pourrions aussi vouloir limiter les dates de naissance et de décès à des valeurs sensibles, et vérifier que le décès intervient après la naissance. En Django, cette contrainte est ajoutée à vos classes de formulaires (bien que vous puissiez définir des validateurs pour les champs du modèle et des validateurs de modèles, ceux-ci ne sont utilisés qu'au niveau du formulaire s'ils sont appelés par la méthode clean() du modèle. Cela requière un ModelForm ou bien la méthode clean() du modèle a besoin d'être appelée explicitement.)</p> @@ -134,7 +134,7 @@ translation_of: Learn/Server-side/Django/Testing <p>Créez une structure de fichier comme montré ci-dessus, dans votre projet <em>LocalLibrary</em>. Le ficheir<strong> __init__.py</strong> doit être vide (il dit simplement à Python que ce répertoire est un package). Vous pouvez créer les trois fichiers de test en copiant et renommant le fichier de test du squelette <strong>/catalog/tests.py</strong>.</p> <div class="note"> -<p><strong>Note :</strong> le fichier de test du squelette <strong>/catalog/tests.py</strong> a été créé automatiquement quand nous avons <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">construit le squelette du site web Django</a>. Il est parfaitement "légal" de mettre tous vos tests dedans, mais si vous testez correctement, vous allez rapidement vous retrouver avec un fichier de test énorme et impossible à gérer.</p> +<p><strong>Note :</strong> le fichier de test du squelette <strong>/catalog/tests.py</strong> a été créé automatiquement quand nous avons <a href="/fr/docs/Learn/Server-side/Django/skeleton_website">construit le squelette du site web Django</a>. Il est parfaitement "légal" de mettre tous vos tests dedans, mais si vous testez correctement, vous allez rapidement vous retrouver avec un fichier de test énorme et impossible à gérer.</p> <p>Supprimez le fichier de squelette, car nous n'en aurons plus besoin.</p> </div> @@ -182,7 +182,7 @@ translation_of: Learn/Server-side/Django/Testing </ul> <div class="note"> -<p>Les classes de test ont aussi une méthode <code>tearDown()</code>, que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base <code>TestCase</code> prend soin pour vous de supprimer la base de données utilisées pour les tests.</p> +<p><strong>Note :</strong> Les classes de test ont aussi une méthode <code>tearDown()</code>, que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base <code>TestCase</code> prend soin pour vous de supprimer la base de données utilisées pour les tests.</p> </div> <p>En dessous de ces méthodes, nous avons un certain nombre de méthodes de test, qui utilisent des fonctions <code>Assert</code>, pour tester si certaines conditions sont vraies, fausses ou égales (<code>AssertTrue</code>, <code>AssertFalse</code>, <code>AssertEqual</code>). Si la condition ne renvoie pas le résultat escompté, le test plante et renvoie une erreur à votre console.</p> @@ -190,7 +190,7 @@ translation_of: Learn/Server-side/Django/Testing <p>Les méthodes <code>AssertTrue</code>, <code>AssertFalse</code> et <code>AssertEqual</code> sont des assertions standard fournies par <strong>unittest</strong>. Il y a d'autres assertions standard dans le framework, et aussi des <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#assertions">assertions spécifiques à Django</a>, pour tester si une vue redirige (<code>assertRedirects</code>), pour tester si tel template a été utilisé (<code>assertTemplateUsed</code>), etc.</p> <div class="note"> -<p>Normallement vous ne devriez <strong>pas</strong> inclure de fonctions <strong>print()</strong> dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées.</p> +<p><strong>Note :</strong> Normallement vous ne devriez <strong>pas</strong> inclure de fonctions <strong>print()</strong> dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées.</p> </div> <h2 id="Comment_lancer_les_tests">Comment lancer les tests</h2> @@ -202,7 +202,7 @@ translation_of: Learn/Server-side/Django/Testing <p>Cette commande va lancer la recherche de tous les fichiers ayant la forme <strong>test*.py</strong> sous le répertoire courant, et lancer tous les tests définis, en utilisant les classes de base appropriées (ici nous avons un certain nombre de fichiers de test, mais pour le moment seul <strong>/catalog/tests/test_models.py</strong> contient des tests). Par défaut, chaque test ne fera de rapport qu'en cas d'échec, avec ensuite un résumé du test.</p> <div class="note"> -<p>Si vous obtenez des erreurs telles que : <code>ValueError: Missing staticfiles manifest entry ...</code>, cela peut être dû au fait que le test ne lance pas <em>collectstatic</em> par défaut, et que votre application utilise une classe de storage qui le requiert (voyez <a href="https://docs.djangoproject.com/en/2.1/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict">manifest_strict</a> pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement <em>collectstatic</em> avant de lancer les tests :</p> +<p><strong>Note :</strong> Si vous obtenez des erreurs telles que : <code>ValueError: Missing staticfiles manifest entry ...</code>, cela peut être dû au fait que le test ne lance pas <em>collectstatic</em> par défaut, et que votre application utilise une classe de storage qui le requiert (voyez <a href="https://docs.djangoproject.com/en/2.1/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict">manifest_strict</a> pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement <em>collectstatic</em> avant de lancer les tests :</p> <pre class="brush: bash">python3 manage.py collectstatic </pre> @@ -238,7 +238,7 @@ Destroying test database for alias 'default'...</pre> <p>Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car <code>False</code> n'est pas <code>True</code> !).</p> <div class="note"> -<p><strong>Truc: </strong>La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes.</p> +<p><strong>Note :</strong> La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes.</p> </div> <p>Le texte en <strong>gras</strong> ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions <code>print()</code> dans nos tests). Cela montre comment la méthode <code>setUpTestData()</code> est appelée une fois pour l'ensemble de classe, tandis que <code>setUp()</code> est appelée avant chaque méthode.</p> @@ -275,7 +275,7 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one <p>Maintenant que nous savons comment lancer nos tests et quel genre de choses nous avons besoin de tester, regardons quelques exemples pratiques.</p> <div class="note"> -<p><strong>Note : </strong>Nous n'allons pas écrire tous les tests possibles, mais ce qui suit devrait vous donner une idée sur le fonctionnement des tests, et ce que vous pouvez faire ensuite.</p> +<p><strong>Note :</strong> Nous n'allons pas écrire tous les tests possibles, mais ce qui suit devrait vous donner une idée sur le fonctionnement des tests, et ce que vous pouvez faire ensuite.</p> </div> <h3 id="Modèles">Modèles</h3> @@ -386,7 +386,7 @@ AssertionError: 'Died' != 'died' <p>C'est vraiment un bug mineur, mais il met en lumière comment écrire des test peut vérifier de plus près les hypothèses que vous pourriez avoir supposées vraies.</p> <div class="note"> -<p><strong>Note : </strong>Changez en "died" le label pour le champ date_of_death (/catalog/models.py) et relancez les tests.</p> +<p><strong>Note :</strong> Changez en "died" le label pour le champ date_of_death (/catalog/models.py) et relancez les tests.</p> </div> <p>La configuration pour tester les autres modèles est semblable pour tous, aussi nous n'allons pas discuter chacune plus longuement. Sentez-vous libre de créer vos propres tests pour nos autres modèles.</p> @@ -848,7 +848,7 @@ class RenewBookInstancesViewTest(TestCase): </pre> <div class="warning"> -<p>Si vous utilisez la class de formulaire <code>RenewBookModelForm(forms.ModelForm)</code> à la place de la classe <code>RenewBookForm(forms.Form)</code>, le nom du champ est <strong>'due_back'</strong> et non <strong>'renewal_date'</strong>.</p> +<p><strong>Attention :</strong> Si vous utilisez la class de formulaire <code>RenewBookModelForm(forms.ModelForm)</code> à la place de la classe <code>RenewBookForm(forms.Form)</code>, le nom du champ est <strong>'due_back'</strong> et non <strong>'renewal_date'</strong>.</p> </div> <p>Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirige vers une liste de tous les livres empruntés si le renouvellement réussit. Ce qui diffère ici est que, pour la première fois, nous montrons comment vous pouvez <code>POST</code>er des données en utilisant le client. Les données postées forment le second argument de la fonction post, et elles sont spécifiées comme un dictionnaire de clés/valeurs.</p> @@ -861,7 +861,7 @@ class RenewBookInstancesViewTest(TestCase): </pre> <div class="warning"> -<p>La vue <em>all-borrowed</em> a été ajoutée comme <em>défi</em>, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression <code>follow=True</code> dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie <code>/catalog/</code> plutôt que <code>/</code>).</p> +<p><strong>Attention :</strong> La vue <em>all-borrowed</em> a été ajoutée comme <em>défi</em>, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression <code>follow=True</code> dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie <code>/catalog/</code> plutôt que <code>/</code>).</p> <pre class="brush: python"> response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, <strong>follow=True</strong> ) <strong>self.assertRedirects(</strong><strong>response, '/catalog/')</strong></pre> @@ -898,7 +898,7 @@ class RenewBookInstancesViewTest(TestCase): <ul> <li><a href="http://coverage.readthedocs.io/en/latest/">Coverage</a>: Cet outil Python fait un rapport sur la proportion de votre code réellement exécutée par vos tests. C'est particulièrement intéressant quand vous commencez, et que vous cherchez à vous représenter exactement ce que vous devez tester.</li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> est un framework pour automatiser les tests dans un vrai navigateur. Il vous permet de simuler un utilisateur réel en interaction avec le site, et fournit un excellent framework pour les tests système de votre site (l'étape qui suit les tests d'intégration).</li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> est un framework pour automatiser les tests dans un vrai navigateur. Il vous permet de simuler un utilisateur réel en interaction avec le site, et fournit un excellent framework pour les tests système de votre site (l'étape qui suit les tests d'intégration).</li> </ul> <h2 id="Défi">Défi</h2> @@ -938,19 +938,19 @@ class RenewBookInstancesViewTest(TestCase): <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.html b/files/fr/learn/server-side/django/tutorial_local_library_website/index.html index e7ff3ca5c6..7e085e43b8 100644 --- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.html +++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.html @@ -18,7 +18,7 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website <div></div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -74,7 +74,7 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website <h2 id="Résumé">Résumé</h2> -<p>Vous en savez plus sur le projet <em>LocalLibrary</em> et ce que vous allez progressivement apprendre, il est désormais temps de créer le <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">squellette du projet</a> qui hébergera la bibliothèque.</p> +<p>Vous en savez plus sur le projet <em>LocalLibrary</em> et ce que vous allez progressivement apprendre, il est désormais temps de créer le <a href="/fr/docs/Learn/Server-side/Django/skeleton_website">squellette du projet</a> qui hébergera la bibliothèque.</p> <p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p> @@ -84,18 +84,18 @@ translation_of: Learn/Server-side/Django/Tutorial_local_library_website <ul> <li><a href="/fr/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Didactique: Site web "Bibliothèque locale"</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/skeleton_website">Django didactique Section 2: Créer le squelette du site web</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Models">Django didactique Section 3: Utilisation des modèles de données</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Admin_site">Django didactique Section 4 : Site d'administration de Django</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Home_page">Django didactique Section 5: Créer la page d'accueil</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> <li><a href="/fr/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/fr/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> </ul> diff --git a/files/fr/learn/server-side/express_nodejs/index.html b/files/fr/learn/server-side/express_nodejs/index.html index 25ce8b149d..abd2352b57 100644 --- a/files/fr/learn/server-side/express_nodejs/index.html +++ b/files/fr/learn/server-side/express_nodejs/index.html @@ -16,14 +16,14 @@ translation_of: Learn/Server-side/Express_Nodejs --- <div>{{LearnSidebar}}</div> -<p class="summary">Express est une infrastructure d'application (framework), écrit en JavaScript et hébergée dans l'environnement d'exécution node.js. Cette section explique certains de ses principaux avantages, comment configurer votre environnement de développement et comment effectuer des tâches courantes de développement et de déploiement.</p> +<p>Express est une infrastructure d'application (framework), écrit en JavaScript et hébergée dans l'environnement d'exécution node.js. Cette section explique certains de ses principaux avantages, comment configurer votre environnement de développement et comment effectuer des tâches courantes de développement et de déploiement.</p> <h2 id="prerequisites">Prérequis</h2> <p>Avant d'aller plus loin, vous devrez avoir compris ce qu'est la programmation côté serveur et le concept de "framework", idéalement en ayant lu notre article <a href="/fr/docs/Learn/Server-side/First_steps">Premiers pas en programmation côté-serveur</a>. Une connaissance générale des concepts de programmation et du <a href="/fr/docs/Web/JavaScript">JavaScript</a> est vivement recommandée, sans pour autant être essentielle à la compréhension des concepts fondamentaux.</p> <div class="note"> -<p><strong>Note </strong>: Le site MDN possède de nombreuses ressources utiles pour apprendre JavaScript dans le contexte du <em>développement côté client </em>: <a href="/fr/docs/Web/JavaScript">Référence JavaScript</a>, <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Les bases de JavaScript</a>, <a href="/fr/docs/Learn/JavaScript">Apprendre JavaScript</a>. Le noyau du langage et les principaux concepts de JavaScript sont les mêmes que pour le développement côté serveur sur Node.js, il est donc important d'avoir déjà une bonne compréhension de JavaScript avant de continuer. Node.js offre des <a href="https://nodejs.org/dist/latest/docs/api/">API supplémentaires</a> pour supporter des fonctionnalités utiles dans des environnements sans navigateur, par ex. pour créer des serveurs HTTP et accéder au système de fichiers, mais ne prend pas en charge les API JavaScript pour travailler avec le navigateur et le DOM.</p> +<p><strong>Note :</strong> Le site MDN possède de nombreuses ressources utiles pour apprendre JavaScript dans le contexte du <em>développement côté client </em>: <a href="/fr/docs/Web/JavaScript">Référence JavaScript</a>, <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Les bases de JavaScript</a>, <a href="/fr/docs/Learn/JavaScript">Apprendre JavaScript</a>. Le noyau du langage et les principaux concepts de JavaScript sont les mêmes que pour le développement côté serveur sur Node.js, il est donc important d'avoir déjà une bonne compréhension de JavaScript avant de continuer. Node.js offre des <a href="https://nodejs.org/dist/latest/docs/api/">API supplémentaires</a> pour supporter des fonctionnalités utiles dans des environnements sans navigateur, par ex. pour créer des serveurs HTTP et accéder au système de fichiers, mais ne prend pas en charge les API JavaScript pour travailler avec le navigateur et le DOM.</p> <p>Ce guide vous fournira des informations sur l'utilisation de Node.js et Express, et contient de nombreuses références à d'autres excellentes ressources sur Internet et dans des livres — dont des liens depuis <a href="https://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js/5511507#5511507">How do I get started with Node.js</a> (StackOverflow) et <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p> </div> diff --git a/files/fr/learn/server-side/express_nodejs/introduction/index.html b/files/fr/learn/server-side/express_nodejs/introduction/index.html index cb0bedc796..4f8719e813 100644 --- a/files/fr/learn/server-side/express_nodejs/introduction/index.html +++ b/files/fr/learn/server-side/express_nodejs/introduction/index.html @@ -15,9 +15,9 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction <div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> -<p class="summary">Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).</p> +<p>Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -102,9 +102,8 @@ server.listen(port, hostname, () => { <p>Bien qu'Express soit assez minimaliste, des <em>middlewares</em> (fonctions intermédiaires) compatibles ont été créés pour résoudre quasiment tous les problèmes de développement web. Il existe des bibliothèques pour se servir des cookies, gérer les sessions, la connexion de l'utilisateur, les paramètres de l'URL, les données <code>POST</code>, les entêtes de sécurité et d'autres encore. Vous trouverez une liste des paquets maintenus par l'équipe Express ici : <a href="https://expressjs.com/fr/resources/middleware.html">Express Middleware</a> (ainsi que la liste de paquets tiers populaires).</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web.</p> +<div class="note"> + <p><strong>Note :</strong> Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web.</p> </div> <h2 id="where_did_node_and_express_come_from">D'où viennent Node et Express ?</h2> @@ -143,9 +142,8 @@ server.listen(port, hostname, () => { <p>Tout d'abord intéressons-nous à l'exemple <a href="https://expressjs.com/fr/starter/hello-world.html">Hello World</a> standard d'Express (nous expliquons chaque partie de cet exemple ci-dessous, et dans les sections suivantes).</p> -<div class="notecard note"> - <p><b>Astuce :</b></p> - <p>Si vous avez déjà installé Node et Express (ou si vous les installez comme montré dans <a href="/fr/docs/Learn/Server-side/Express_Nodejs/development_environment">l'article suivant</a>), vous pouvez enregistrer ce code dans un fichier texte appelé <strong>app.js</strong> et l'exécuter via un terminal en tapant :</p> +<div class="note"> + <p><strong>Note :</strong> Si vous avez déjà installé Node et Express (ou si vous les installez comme montré dans <a href="/fr/docs/Learn/Server-side/Express_Nodejs/development_environment">l'article suivant</a>), vous pouvez enregistrer ce code dans un fichier texte appelé <strong>app.js</strong> et l'exécuter via un terminal en tapant :</p> <p><strong><code>node app.js</code></strong></p> </div> @@ -172,7 +170,7 @@ app.listen(port, () => { <p>Un module est une bibliothèque/fichier JavaScript que vous pouvez importer dans un autre code en utilisant la fonction <code>require()</code> de Node. <em>Express</em> lui-même est un module, tout comme les bibliothèques de <i>middleware</i> et de base de données que nous utilisons dans nos applications <em>Express</em>.</p> -<p>Le code ci-dessous montre comment nous importons un module par son nom, en utilisant le framework <em>Express</em> comme exemple. Tout d'abord, nous invoquons la fonction <code style="font-style : normal ; font-weight : normal ;">require()</code>, en spécifiant le nom du module sous forme de chaîne (<code>'express'</code>), et en appelant l'objet retourné pour créer une <a href="https://expressjs.com/en/4x/api.html#app">applicationExpress</a>. Nous pouvons alors accéder aux propriétés et fonctions de l'objet application.</p> +<p>Le code ci-dessous montre comment nous importons un module par son nom, en utilisant le framework <em>Express</em> comme exemple. Tout d'abord, nous invoquons la fonction <code>require()</code>, en spécifiant le nom du module sous forme de chaîne (<code>'express'</code>), et en appelant l'objet retourné pour créer une <a href="https://expressjs.com/en/4x/api.html#app">applicationExpress</a>. Nous pouvons alors accéder aux propriétés et fonctions de l'objet application.</p> <pre class="brush: js">const express = require('express'); const app = express(); @@ -180,9 +178,8 @@ const app = express(); <p>Vous pouvez également créer vos propres modules qui peuvent être importés de la même manière.</p> -<div class="notecard note"> - <p><b>Astuce :</b></p> - <p>Vous <em>voudrez</em> créer vos propres modules, car cela vous permet d'organiser votre code en parties maniables — une application monolithique à fichier unique est difficile à comprendre et à maintenir. L'utilisation de modules vous aide également à gérer votre espace de noms, car seules les variables que vous exportez explicitement sont importées lorsque vous utilisez un module.</p> +<div class="note"> + <p><strong>Note :</strong> Vous <em>voudrez</em> créer vos propres modules, car cela vous permet d'organiser votre code en parties maniables — une application monolithique à fichier unique est difficile à comprendre et à maintenir. L'utilisation de modules vous aide également à gérer votre espace de noms, car seules les variables que vous exportez explicitement sont importées lorsque vous utilisez un module.</p> </div> <p>Pour rendre les objets disponibles en dehors d'un module, il suffit de les affecter à l'objet <code>exports</code>. Par exemple, le module <strong>square.js</strong> ci-dessous est un fichier qui exporte les méthodes <code>area()</code> et <code>perimeter()</code> :</p> @@ -195,9 +192,8 @@ exports.perimeter = function(width) { return 4 * width; };</pre> <pre class="brush: js">var square = require('./square'); // Ici, nous demandons le nom du fichier sans l'extension de fichier .js (facultative). console.log("L'aire d'un carré dont la largeur est de 4 est la suivante " + square.area(4));</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez également spécifier un chemin absolu vers le module (ou un nom, comme nous l'avons fait initialement).</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez également spécifier un chemin absolu vers le module (ou un nom, comme nous l'avons fait initialement).</p> </div> <p>Si vous souhaitez exporter un objet complet en une seule affectation au lieu de le construire une propriété à la fois, affectez-le à <code>module.exports</code> comme indiqué ci-dessous (vous pouvez également procéder ainsi pour faire de la racine de l'objet exports un constructeur ou une autre fonction) :</p> @@ -213,7 +209,7 @@ console.log("L'aire d'un carré dont la largeur est de 4 est la suivante " + squ };</pre> <div class="note"> - <p><strong>Note :</strong> L'objet <code>exports</code> peut être vu comme un <a href="https://nodejs.org/api/modules.html#modules_exports_shortcut">raccourci</a> vers <code>module.exports</code> au sein d'un module donné. En fait, <code>exports</code> est simplement une variable qui est initialisée avec la valeur de <code>module.exports</code> avant que le module soit évalué. Cette valeur est une référence vers un objet. Cela signifie que <code>exports</code> référence le même objet que celui référencé par <code>module.exports</code>. Cela signifie également qu'affecter une autre valeur à <code>exports</code> le détachera complètement de <code>module.exports</code>.</p> + <p><strong>Note :</strong> L'objet <code>exports</code> peut être vu comme un <a href="https://nodejs.org/api/modules.html#modules_exports_shortcut">raccourci</a> vers <code>module.exports</code> au sein d'un module donné. En fait, <code>exports</code> est simplement une variable qui est initialisée avec la valeur de <code>module.exports</code> avant que le module soit évalué. Cette valeur est une référence vers un objet. Cela signifie que <code>exports</code> référence le même objet que celui référencé par <code>module.exports</code>. Cela signifie également qu'affecter une autre valeur à <code>exports</code> le détachera complètement de <code>module.exports</code>.</p> </div> @@ -237,14 +233,12 @@ console.log('Second');</pre> <p>Il existe plusieurs façons pour une API asynchrone d'informer votre application de la fin d'une opération. La méthode la plus courante consiste à enregistrer une fonction de rappel lorsque vous invoquez l'API asynchrone, qui sera rappelée lorsque l'opération sera terminée. C'est l'approche utilisée ci-dessus.</p> -<div class="notecard note"> - <p><b>Astuce :</b></p> - <p>L'utilisation des rappels (« <em>callbacks</em> ») peut être assez « désordonnée » si vous avez une séquence d'opérations asynchrones dépendantes qui doivent être exécutées dans l'ordre, car cela entraîne de multiples niveaux de rappels imbriqués. Ce problème est communément appelé « l'enfer des callbacks ». Ce problème peut être réduit par de bonnes pratiques de codage dont l'utilisation des <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesses</a> ou de <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code></a>/<a href="/fr/docs/Web/JavaScript/Reference/Operators/await"><code>await</code></a>.</p> +<div class="note"> + <p><strong>Note :</strong> L'utilisation des rappels (« <em>callbacks</em> ») peut être assez « désordonnée » si vous avez une séquence d'opérations asynchrones dépendantes qui doivent être exécutées dans l'ordre, car cela entraîne de multiples niveaux de rappels imbriqués. Ce problème est communément appelé « l'enfer des callbacks ». Ce problème peut être réduit par de bonnes pratiques de codage dont l'utilisation des <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesses</a> ou de <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code></a>/<a href="/fr/docs/Web/JavaScript/Reference/Operators/await"><code>await</code></a>.</p> </div> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Une convention courante pour Node et Express est d'utiliser des callbacks de type error-first. Dans cette convention, la première valeur de vos <em>fonctions de rappel</em> est une valeur d'erreur, tandis que les arguments suivants contiennent des données de succès. Il y a une bonne explication de l'utilité de cette approche dans ce blog : <a href="https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js">The Node.js Way - Comprendre les callbacks de type « Error First ».</a> (fredkschott.com).</p> +<div class="note"> + <p><strong>Note :</strong> Une convention courante pour Node et Express est d'utiliser des callbacks de type error-first. Dans cette convention, la première valeur de vos <em>fonctions de rappel</em> est une valeur d'erreur, tandis que les arguments suivants contiennent des données de succès. Il y a une bonne explication de l'utilité de cette approche dans ce blog : <a href="https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js">The Node.js Way - Comprendre les callbacks de type « Error First ».</a> (fredkschott.com).</p> </div> <h3 id="creating_route_handlers">Créer des gestionnaires de route</h3> @@ -257,9 +251,8 @@ console.log('Second');</pre> <p>La fonction de rappel prend une requête et un objet réponse comme arguments. Dans ce cas, la méthode appelle simplement <a href="https://expressjs.com/en/4x/api.html#res.send"><code>send()</code></a> sur la réponse pour renvoyer la chaîne de caractères « Hello World ! ». Il existe un <a href="https://expressjs.com/fr/guide/routing.html#response-methods">nombre d'autres méthodes de réponse</a> pour terminer le cycle requête/réponse, par exemple vous pourriez appeler <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> pour envoyer une réponse JSON ou <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> pour envoyer un fichier.</p> -<div class="notecard note"> - <p><b>Astuce JavaScript :</b></p> - <p>Vous pouvez utiliser les noms d'arguments de votre choix dans les fonctions de rappel ; lorsque le rappel est invoqué, le premier argument sera toujours la requête et le second sera toujours la réponse. Il est judicieux de les nommer de telle sorte que vous puissiez identifier l'objet avec lequel vous travaillez dans le corps du <i>callback</i>.</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez utiliser les noms d'arguments de votre choix dans les fonctions de rappel ; lorsque le rappel est invoqué, le premier argument sera toujours la requête et le second sera toujours la réponse. Il est judicieux de les nommer de telle sorte que vous puissiez identifier l'objet avec lequel vous travaillez dans le corps du <i>callback</i>.</p> </div> <p>L'objet <em>Express</em> <code>application</code> fournit également des méthodes permettant de définir des gestionnaires de route pour tous les autres verbes HTTP, qui sont pour la plupart utilisés exactement de la même manière : </p> @@ -276,7 +269,7 @@ console.log('Second');</pre> <p>Il est souvent utile de regrouper les gestionnaires de route pour une partie particulière d'un site et d'y accéder en utilisant un préfixe de route commun (par exemple, un site avec un Wiki pourrait avoir toutes les routes liées au wiki dans un seul fichier et les faire accéder avec un préfixe de route de <em>/wiki/</em>). Dans <em>Express</em>, ceci est réalisé en utilisant l'objet <code><a href="https://expressjs.com/fr/guide/routing.html#express-router">express.Router</a></code>. Par exemple, nous pouvons créer notre route wiki dans un module nommé <strong>wiki.js</strong>, puis exporter l'objet <code>Router</code>, comme indiqué ci-dessous :</p> -<pre class="brush: js notranslate">// wiki.js - Module route du wiki +<pre class="brush: js">// wiki.js - Module route du wiki const express = require('express'); const router = express.Router(); @@ -294,9 +287,8 @@ router.get('/about', (req, res) => { module.exports = router;</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'ajout de routes à l'objet <code>Router</code> est identique à l'ajout de routes à l'objet <code>app</code> (comme indiqué précédemment).</p> +<div class="note"> + <p><strong>Note :</strong> L'ajout de routes à l'objet <code>Router</code> est identique à l'ajout de routes à l'objet <code>app</code> (comme indiqué précédemment).</p> </div> <p>Pour utiliser le routeur dans notre fichier d'application principal, nous devrions alors <code>require()</code> le module route (<strong>wiki.js</strong>), puis appeler <code>use()</code> sur l'application <em>Express</em> pour ajouter le routeur au chemin de manipulation du middleware. Les deux routes seront alors accessibles depuis <code>/wiki/</code> et <code>/wiki/about/</code>.</p> @@ -311,9 +303,8 @@ app.use('/wiki', wiki);</pre> <p>L'intergiciel (aussi appelé « <em>middleware</em> ») est largement utilisé dans les applications d'Express, pour des tâches allant du service de fichiers statiques à la gestion des erreurs, en passant par la compression des réponses HTTP. Alors que les fonctions de route terminent le cycle requête-réponse HTTP en renvoyant une réponse au client HTTP, les fonctions d'intergiciel effectuent <em>typiquement</em> une opération sur la demande ou la réponse, puis appellent la fonction suivante dans la « pile », qui peut être un autre intergiciel ou un gestionnaire de route. L'ordre dans lequel les intergiciels sont appelés dépend du code de l'application.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>L'intergiciel peut effectuer n'importe quelle opération, exécuter n'importe quel code, apporter des modifications à l'objet requête et réponse, et il peut <em>aussi mettre fin au cycle requête-réponse</em>. S'il ne met pas fin au cycle, alors il doit appeler <code>next()</code> pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête sera laissée en suspens).</p> +<div class="note"> + <p><strong>Note :</strong> L'intergiciel peut effectuer n'importe quelle opération, exécuter n'importe quel code, apporter des modifications à l'objet requête et réponse, et il peut <em>aussi mettre fin au cycle requête-réponse</em>. S'il ne met pas fin au cycle, alors il doit appeler <code>next()</code> pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête sera laissée en suspens).</p> </div> <p>La plupart des apps utiliseront des <em>programmes intermédiaires tiers</em> afin de simplifier les tâches courantes de développement web comme le travail avec les cookies, les sessions, l'authentification des utilisateurs, l'accès aux données <code>POST</code> et JSON des requêtes, la journalisation, etc. Vous pouvez trouver une <a href="https://expressjs.com/fr/resources/middleware.html">liste des paquets <i>middleware</i> maintenus par l'équipe Express</a> (qui inclut également d'autres paquets populaires de tiers). D'autres paquets Express sont disponibles sur le gestionnaire de paquets NPM.</p> @@ -330,9 +321,8 @@ const app = express(); app.use(logger('dev')); ...</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Les fonctions d'intergiciel et de routage sont appelées dans l'ordre où elles sont déclarées. Pour certains intergiciels, l'ordre est important (par exemple, si l'intergiciel de session dépend de l'intergiciel de cookie, alors le gestionnaire de cookie doit être ajouté en premier). Il est presque toujours nécessaire d'appeler l'intergiciel avant de définir les routes, sinon vos gestionnaires de routes n'auront pas accès aux fonctionnalités ajoutées par votre intergiciel.</p> +<div class="note"> + <p><strong>Note :</strong> Les fonctions d'intergiciel et de routage sont appelées dans l'ordre où elles sont déclarées. Pour certains intergiciels, l'ordre est important (par exemple, si l'intergiciel de session dépend de l'intergiciel de cookie, alors le gestionnaire de cookie doit être ajouté en premier). Il est presque toujours nécessaire d'appeler l'intergiciel avant de définir les routes, sinon vos gestionnaires de routes n'auront pas accès aux fonctionnalités ajoutées par votre intergiciel.</p> </div> <p>Vous pouvez écrire vos propres fonctions intergiciels, et vous serez probablement amené à le faire (ne serait-ce que pour créer un code de gestion des erreurs). La <strong>seule</strong> différence entre une fonction <i>middleware</i> et un <i>callback</i> de gestionnaire de route est que les fonctions <i>middleware</i> ont un troisième argument <code>next</code>, que les fonctions <i>middleware</i> sont censées appeler si elles ne sont pas celle qui termine le cycle de requête (lorsque la fonction <i>middleware</i> est appelée, cela contient la fonction <em>next</em> qui doit être appelée).</p> @@ -361,9 +351,8 @@ app.get('/', a_middleware_function); app.listen(3000);</pre> -<div class="notecard note"> - <p><b>Astuce JavaScript :</b></p> - <p>Ci-dessus, nous déclarons la fonction <i>middleware</i> séparément, puis nous la définissons comme fonction de rappel. Dans notre précédente fonction de gestion de route, nous avons déclaré la fonction de rappel lorsqu'elle a été utilisée. En JavaScript, les deux approches sont valables.</p> +<div class="note"> + <p><strong>Note :</strong> Ci-dessus, nous déclarons la fonction <i>middleware</i> séparément, puis nous la définissons comme fonction de rappel. Dans notre précédente fonction de gestion de route, nous avons déclaré la fonction de rappel lorsqu'elle a été utilisée. En JavaScript, les deux approches sont valables.</p> </div> <p>La documentation d'Express contient beaucoup d'autres excellents documents sur <a href="https://expressjs.com/fr/guide/using-middleware.html">l'utilisation</a> et <a href="https://expressjs.com/fr/guide/writing-middleware.html">l'écriture</a> d'intergiciels Express.</p> @@ -396,9 +385,8 @@ app.use(express.static('media'));</pre> https://localhost:3000/media/video/cat.mp4 https://localhost:3000/media/cry.mp3</pre> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Voir également <a href="https://expressjs.com/fr/starter/static-files.html">Servir des fichiers statiques dans Express</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Voir également <a href="https://expressjs.com/fr/starter/static-files.html">Servir des fichiers statiques dans Express</a>.</p> </div> <h3 id="handling_errors">Traitement des erreurs</h3> @@ -414,14 +402,12 @@ https://localhost:3000/media/cry.mp3</pre> <p>Express est livré avec un gestionnaire d'erreurs intégré, qui prend en charge toutes les erreurs restantes qui pourraient être rencontrées dans l'application. Cette fonction <i>middleware</i> de gestion des erreurs par défaut est ajoutée à la fin de la pile de fonctions middleware. Si vous passez une erreur à <code>next()</code> et que vous ne la gérez pas dans un gestionnaire d'erreurs, elle sera traitée par le gestionnaire d'erreurs intégré ; l'erreur sera écrite au client avec la trace de la pile.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>La trace de la pile n'est pas incluse dans l'environnement de production. Pour exécuter une application serveur Express, la variable d'environnement <code>NODE_ENV</code> doit être définie avec la valeur <code>production</code>.</p> +<div class="note"> + <p><strong>Note :</strong> La trace de la pile n'est pas incluse dans l'environnement de production. Pour exécuter une application serveur Express, la variable d'environnement <code>NODE_ENV</code> doit être définie avec la valeur <code>production</code>.</p> </div> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Les codes d'état HTTP 404 et autres « erreurs » ne sont pas traités comme des erreurs. Si vous voulez les gérer, vous pouvez ajouter une fonction <i>middleware</i> pour le faire. Pour plus d'informations, consultez la <a href="https://expressjs.com/fr/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p> +<div class="note"> + <p><strong>Note :</strong> Les codes d'état HTTP 404 et autres « erreurs » ne sont pas traités comme des erreurs. Si vous voulez les gérer, vous pouvez ajouter une fonction <i>middleware</i> pour le faire. Pour plus d'informations, consultez la <a href="https://expressjs.com/fr/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p> </div> <p>Pour plus d'informations, voir <a href="https://expressjs.com/fr/guide/error-handling.html">Gestion des erreurs</a> (docs Express).</p> diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.html b/files/fr/learn/server-side/first_steps/client-server_overview/index.html index 9e6ca75895..9323086beb 100644 --- a/files/fr/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.html @@ -8,9 +8,9 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur <div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div> -<p class="summary">Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.</p> +<p>Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -27,7 +27,7 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur <h2 id="Serveurs_Web_et_HTTP_un_avant-goût">Serveurs Web et HTTP (un avant-goût)</h2> -<p>Les navigateurs web communiquent avec les serveurs web avec le protocole <a href="/en-US/docs/Web/HTTP">HTTP</a><strong> : H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (<em>HTTP Request) </em>au serveur.</p> +<p>Les navigateurs web communiquent avec les serveurs web avec le protocole <a href="/fr/docs/Web/HTTP">HTTP</a><strong> : H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (<em>HTTP Request) </em>au serveur.</p> <p>Cette requête inclut :</p> @@ -54,7 +54,7 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur <li>Cookies côté Client. Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources.</li> </ul> -<p>Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut <a href="/en-US/docs/Web/HTTP/Status">HTTP Response </a>indiquant si, oui ou non, la requête a abouti. (ex : "<code>200 OK</code>" pour un succés, "<code>404 Not Found</code>" si la ressource ne peut être trouvée, "<code>403 Forbidden</code>" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête <code>GET</code> contiendrait la ressource demandée.</p> +<p>Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut <a href="/fr/docs/Web/HTTP/Status">HTTP Response </a>indiquant si, oui ou non, la requête a abouti. (ex : "<code>200 OK</code>" pour un succés, "<code>404 Not Found</code>" si la ressource ne peut être trouvée, "<code>403 Forbidden</code>" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête <code>GET</code> contiendrait la ressource demandée.</p> <p>Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.</p> @@ -65,12 +65,12 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur <p>Vous faites une simple requête <code>GET</code> en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur.</p> <div class="note"> -<p>Le format des messsages HTTP est défini par un standard web (<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !</p> +<p><strong>Note :</strong> Le format des messsages HTTP est défini par un standard web (<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !</p> </div> <h4 id="La_requête">La requête</h4> -<p>Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( <strong>header</strong>) et contient beaucoup de données utiles. De la même manière qu'un <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML head</a> contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :</p> +<p>Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( <strong>header</strong>) et contient beaucoup de données utiles. De la même manière qu'un <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML head</a> contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :</p> <pre>GET https://developer.mozilla.org/en-US/search?q=la+relation+Client+-+serveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 Host: developer.mozilla.org @@ -197,7 +197,7 @@ Content-Length: 0 </pre> <div class="note"> -<p><strong>Note </strong>: Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application <a href="https://www.telerik.com/download/fiddler">Fiddler</a> , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web (e.g. <a href="http://websniffer.cc/">Websniffer</a>, <a href="https://www.wireshark.org/">Wireshark</a>) ou des extensions de navigateur comme <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox</a>. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> dans Firefox).</p> +<p><strong>Note :</strong> Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application <a href="https://www.telerik.com/download/fiddler">Fiddler</a> , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web (e.g. <a href="http://websniffer.cc/">Websniffer</a>, <a href="https://www.wireshark.org/">Wireshark</a>) ou des extensions de navigateur comme <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox</a>. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le <a href="/fr/docs/Tools/Network_Monitor">Network Monitor</a> dans Firefox).</p> </div> <h2 id="Les_sites_statiques">Les sites statiques</h2> @@ -205,14 +205,14 @@ Content-Length: 0 <p>Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse <code>/static/myproduct1.html</code>, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : <code>myproduct2.html</code>) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..</p> <div class="note"> -<p><strong>Note </strong>: Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.</p> +<p><strong>Note :</strong> Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.</p> </div> <p>Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent.</p> -<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png"></p> +<p><img alt="A simplified diagram of a static web server." src="Basic%20Static%20App%20Server.png"></p> -<p>Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP <code>GET</code> spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse HTTP contenant le document et un <a href="/en-US/docs/Web/HTTP/Status">HTTP Response status code</a> ( statut codé de la réponse HTTP) qui est "<code>200 OK</code>" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "<code>404 Not Found</code>" si le fichier est absent sur le serveur , ou bien "<code>301 Moved Permanently</code>" si le fichier existe mais a été déplacé vers une nouvelle localisation.</p> +<p>Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP <code>GET</code> spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse HTTP contenant le document et un <a href="/fr/docs/Web/HTTP/Status">HTTP Response status code</a> ( statut codé de la réponse HTTP) qui est "<code>200 OK</code>" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "<code>404 Not Found</code>" si le fichier est absent sur le serveur , ou bien "<code>301 Moved Permanently</code>" si le fichier existe mais a été déplacé vers une nouvelle localisation.</p> <p>Le serveur d'un site statique n'aura à faire face qu'à des requêtes GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). </p> @@ -230,11 +230,11 @@ Content-Length: 0 <p>Cette section présente une vue d'ensemble du cycle dynamique HTTP de requête/réponse, construit avec ce que nous avons vu précédemment avec de plus amples détails. Toujours dans l'optique de "faire les choses en réel" nous utiliserons le contexte du site d'une équipe de sport où l'entraîneur peut sélectionner le nom de l'équipe et le nombre de joueurs dans un formulaire HTML et avoir en retour une suggestion "Meilleure composition" pour le prochain match.</p> -<p><span style='color: rgba(0, 0, 0, 0.87); font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;' title="">Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe".</span><span style='background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); display: inline !important; float: none; font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 28px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;'> </span><span style='color: rgba(0, 0, 0, 0.87); font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;' title="">Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires.</span><span style='background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); display: inline !important; float: none; font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: 28px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;'> </span><span style='color: rgba(0, 0, 0, 0.87); font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;' title="">relations, et les modèles HTML.</span></p> +<p>Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe". Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires. relations, et les modèles HTML.</p> -<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="https://mdn.mozillademos.org/files/13829/Web%20Application%20with%20HTML%20and%20Steps.png" style="height: 584px; width: 1226px;"></p> +<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="Web%20Application%20with%20HTML%20and%20Steps.png"></p> -<p><font color="#001000" face="Arial,x-locale-body,sans-serif">Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:</font></p> +<p>Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:</p> <ol> <li>Le navigateur Web crée une requête HTTP GET au serveur en utilisant l’URL de base de la ressource (/ best) et en codant l’équipe et le numéro du joueur sous forme de paramètres d’URL (par exemple / best? team=my_team_name&show = 11) ou dans le cadre de l’URL modèle (par exemple / best / my_team_name / 11 /). Une requête GET est utilisée car la requête extrait uniquement des données (sans les modifier).</li> @@ -242,11 +242,11 @@ Content-Length: 0 <li>L'application Web identifie l'objectif de la demande d'obtenir la "meilleure liste d'équipes" en fonction de l'URL (/ best /) et recherche le nom d'équipe requis et le nombre de joueurs à partir de l'URL. L'application Web obtient alors les informations requises de la base de données (en utilisant des paramètres "internes" supplémentaires pour définir quels joueurs sont les "meilleurs", et éventuellement en obtenant également l'identité de l'entraîneur connecté à partir d'un cookie côté client).</li> <li>L'application Web crée dynamiquement une page HTML en plaçant les données (de la base de données) dans des espaces réservés dans un modèle HTML.</li> <li>L'application Web renvoie le code HTML généré au navigateur Web (via le serveur Web), ainsi qu'un code d'état HTTP de 200 ("success"). Si quoi que ce soit empêche le code HTML d'être renvoyé, l'application Web renvoie un autre code, par exemple "404" pour indiquer que l'équipe n'existe pas.</li> - <li><span style='background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); display: inline !important; float: none; font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).</span></li> - <li><span style='background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); display: inline !important; float: none; font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).</span></li> + <li>Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).</li> + <li>Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).</li> </ol> -<p><span style='background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); display: inline !important; float: none; font-family: "Roboto",arial,sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.</span></p> +<p>Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.</p> <h3 id="que_faire_dautre">que faire d'autre?</h3> @@ -275,7 +275,7 @@ urlpatterns = [ ]</pre> <div class="note"> -<p><strong>Note</strong>: Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".</p> +<p><strong>Note :</strong> Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".</p> </div> <div>L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.</div> @@ -305,13 +305,13 @@ def junior(request): <p>Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site.</p> -<p><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;">{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</span></p> +<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> </ul> diff --git a/files/fr/learn/server-side/first_steps/index.html b/files/fr/learn/server-side/first_steps/index.html index 5b2b93d425..cb79ff0b9a 100644 --- a/files/fr/learn/server-side/first_steps/index.html +++ b/files/fr/learn/server-side/first_steps/index.html @@ -21,9 +21,9 @@ original_slug: Learn/Server-side/Premiers_pas <p>Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :</p> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Quels_logiciels_sont_n%C3%A9cessaires_pour_construire_un_site_web">De quel logiciel ai-je besoin pour créer un site web ?</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Transf%C3%A9rer_des_fichiers_vers_un_serveur_web">Comment transférer des fichiers sur un serveur web ?</a></li> + <li><a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web</a></li> + <li><a href="/fr/Apprendre/Quels_logiciels_sont_n%C3%A9cessaires_pour_construire_un_site_web">De quel logiciel ai-je besoin pour créer un site web ?</a></li> + <li><a href="/fr/Apprendre/Transf%C3%A9rer_des_fichiers_vers_un_serveur_web">Comment transférer des fichiers sur un serveur web ?</a></li> </ul> <p>Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section.</p> @@ -31,13 +31,13 @@ original_slug: Learn/Server-side/Premiers_pas <h2 id="Guides">Guides</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/Premiers_pas/Introduction">Introduction au côté serveur</a></dt> + <dt><a href="/fr/docs/Learn/Server-side/Premiers_pas/Introduction">Introduction au côté serveur</a></dt> <dd>Bienvenue au cours de programmation débutant de MDN ! Dans ce premier article, nous examinerons la programmation côté serveur, répondant à des questions comme «En quoi consiste-t-elle ?», «En quoi diffère-t-elle de la programmation côté client ?» et «Pourquoi est-ce si utile ?». Après avoir lu cet article, vous comprendrez comment la programmation côté serveur donne aux sites web toute leur puissance.</dd> <dt><a href="/fr/docs/Learn/Server-side/Premiers_pas/Client-Serveur">Présentation client-serveur</a></dt> <dd>Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code.</dd> <dt><a href="/fr/docs/Learn/Server-side/Premiers_pas/Web_frameworks">Frameworks web côté serveur</a></dt> <dd>Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité de votre site web</a></dt> + <dt><a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité de votre site web</a></dt> <dd>La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.</dd> </dl> diff --git a/files/fr/learn/server-side/first_steps/introduction/index.html b/files/fr/learn/server-side/first_steps/introduction/index.html index 6d7a56563e..8a3337f276 100644 --- a/files/fr/learn/server-side/first_steps/introduction/index.html +++ b/files/fr/learn/server-side/first_steps/introduction/index.html @@ -15,9 +15,9 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div> -<p class="summary"><span class="seoSummary">Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.</span></p> +<p>Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -54,7 +54,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <p>Le serveur récupère le document demandé du système de fichiers et retourne une réponse HTTP contenant le document et le <a href="/fr/docs/Web/HTTP/Status#R%C3%A9ponses_de_succ%C3%A8s">statut de la réponse</a> (habituellement, 200 OK). Si le fichier ne peut pas être recupéré pour une raison x ou y, le statut d'erreur est retourné (voir <a href="/fr/docs/Web/HTTP/Status#R%C3%A9ponses_d'erreur_c%C3%B4t%C3%A9_client">réponses d'erreur client</a> et <a href="/fr/docs/Web/HTTP/Status#R%C3%A9ponses_d'erreur_c%C3%B4t%C3%A9_serveur">réponse d'erreur serveur</a>).</p> -<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p> +<p><img alt="A simplified diagram of a static web server." src="Basic%20Static%20App%20Server.png"></p> <h3 id="Sites_dynamiques">Sites dynamiques</h3> @@ -68,7 +68,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <p>Les requêtes pour les ressources <em>statiques</em> sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc).</p> -<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p> +<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="Web%20Application%20with%20HTML%20and%20Steps.png"></p> <p>Les requêtes pour les ressources <em>dynamiques</em>, elles, sont transmises (2) au code côté serveur (indiqué dans le diagramme comme <em>Web Application</em>). Le serveur interprète la requête, lit les informations correspondantes dans la base de données (3), combine les données récupérées avec les templates HTML (4), et renvoie la réponse avec le HTML généré (5,6). </p> @@ -97,7 +97,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <p>Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).</p> <div class="note"> -<p><strong>Note </strong>: Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.</p> +<p><strong>Note :</strong> Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.</p> <p>En revanche, vous ne penseriez presque jamais à écrire les composants côté serveur d'une application web sans framework — implémenter des fonctionnalités vitales comme un serveur HTTP est très difficile à faire à partir de rien, comme disons en Python, alors que les frameworks web Python comme Django le fournissent tout prêt à l'emploi, accompagné d'autres outils très utiles.</p> </div> @@ -125,7 +125,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <p>Comme les informations se trouvent dans une base de données, elles peuvent également être partagées et mises à jour plus facilement avec d'autres systèmes (par exemple, quand des produits sont vendus en ligne ou dans un magasin, le magasin peut mettre à jour son inventaire).</p> <div class="note"> -<p><strong>Note </strong>: Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:</p> +<p><strong>Note :</strong> Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:</p> <ol> <li>Allez sur <a href="https://www.amazon.com">Amazon</a> ou tout autre site e-commerce.</li> @@ -143,7 +143,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <p>Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte.</p> <div class="note"> -<p><strong>Note : </strong><a href="https://maps.google.com/">Google Maps</a> sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.</p> +<p><strong>Note :</strong> <a href="https://maps.google.com/">Google Maps</a> sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.</p> <p>Les résultats de recherche Google sont optimisés en fonction des recherches précédentes.</p> @@ -170,7 +170,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction </ul> <div class="note"> -<p><strong>Note </strong>: Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?</p> +<p><strong>Note :</strong> Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?</p> </div> <h3 id="Stocker_les_informations_de_sessiondétat">Stocker les informations de session/d'état</h3> @@ -180,7 +180,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <p>Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté.</p> <div class="note"> -<p><strong>Note </strong>: Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple <a href="http://www.theage.com.au/">The Age</a>). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.</p> +<p><strong>Note :</strong> Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple <a href="http://www.theage.com.au/">The Age</a>). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.</p> </div> <h3 id="Notifications_et_communication">Notifications et communication</h3> @@ -196,7 +196,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction </ul> <div class="note"> -<p><strong>Note </strong>: Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.</p> +<p><strong>Note :</strong> Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.</p> </div> <h3 id="Analyse_des_données">Analyse des données</h3> @@ -206,7 +206,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction <p>Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.</p> <div class="note"> -<p><strong>Note </strong>: Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.</p> +<p><strong>Note :</strong> Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.</p> <p>Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !</p> </div> diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.html b/files/fr/learn/server-side/first_steps/web_frameworks/index.html index 9e44b23927..ca3f14e2ff 100644 --- a/files/fr/learn/server-side/first_steps/web_frameworks/index.html +++ b/files/fr/learn/server-side/first_steps/web_frameworks/index.html @@ -13,9 +13,9 @@ original_slug: Learn/Server-side/Premiers_pas/Web_frameworks <div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div> -<p class="summary">L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche. En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.</p> +<p>L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche. En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -137,7 +137,7 @@ def youngest(request): <p>Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,<code>{</code><code>{ <em>variable_name</em> </code><code>}</code><code>}</code> ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:<code>{% <em>expression</em> %}</code> ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.</p> <div class="note"> -<p><strong>Note </strong>: Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.</p> +<p><strong>Note :</strong> Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.</p> </div> <p>L'extrait de code ci-dessous montre comment cela fonctionne. En reprenant l'exemple "youngest_teams" de la section précédente, le modèle HTML se voit transmettre par la vue une variable de liste nommée youngest_teams. Dans le squelette HTML, nous avons une expression qui vérifie d'abord si la variable youngest_teams existe, puis itère dans une boucle for. À chaque itération, le modèle affiche la valeur team_name de l'équipe dans un élément de liste.</p> @@ -162,7 +162,7 @@ def youngest(request): </html> </pre> -<h2 id="Comment_choisir_un_framework_web"><span style='background-color: #f5f5f5; color: rgba(0, 0, 0, 0.87); display: inline !important; float: none; font-family: "Roboto",arial,sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: pre-wrap;'>Comment choisir un framework web</span></h2> +<h2 id="Comment_choisir_un_framework_web">Comment choisir un framework web</h2> <p>Il existe de nombreux frameworks web pour presque tous les langages de programmation que vous souhaitez utiliser (nous énumérons quelques-uns des frameworks les plus populaires dans la section suivante). Avec autant de choix, il peut devenir difficile de déterminer quel framework constitue le meilleur point de départ pour votre nouvelle application web.</p> @@ -189,7 +189,7 @@ def youngest(request): <p>Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.</p> <div class="note"> -<p><strong>Note</strong>: Let's go to the main websites for <a href="https://www.djangoproject.com/">Django</a> (Python) and <a href="http://expressjs.com/">Express</a> (Node/JavaScript) and check out their documentation and community.</p> +<p><strong>Note :</strong> Let's go to the main websites for <a href="https://www.djangoproject.com/">Django</a> (Python) and <a href="http://expressjs.com/">Express</a> (Node/JavaScript) and check out their documentation and community.</p> <ol> <li>Navigate to the main sites (linked above) @@ -216,7 +216,7 @@ def youngest(request): <p>The server-side frameworks below represent <em>a few </em>of the most popular available at the time of writing. All of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. There are many other great server-side frameworks that you can discover using a basic internet search.</p> <div class="note"> -<p><strong>Note</strong>: Descriptions come (partially) from the framework websites!</p> +<p><strong>Note :</strong> Descriptions come (partially) from the framework websites!</p> </div> <h3 id="Django_Python">Django (Python)</h3> @@ -237,7 +237,7 @@ def youngest(request): <h3 id="Express_Node.jsJavaScript">Express (Node.js/JavaScript)</h3> -<p><a href="http://expressjs.com/">Express</a> is a fast, unopinionated, flexible and minimalist web framework for <a href="https://nodejs.org/en/">Node.js</a> (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and <a href="/en-US/docs/Glossary/Middleware">middleware</a>.</p> +<p><a href="http://expressjs.com/">Express</a> is a fast, unopinionated, flexible and minimalist web framework for <a href="https://nodejs.org/en/">Node.js</a> (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and <a href="/fr/docs/Glossary/Middleware">middleware</a>.</p> <p>Express is extremely popular, partially because it eases the migration of client-side JavaScript web programmers into server-side development, and partially because it is resource-efficient (the underlying node environment uses lightweight multitasking within a thread rather than spawning separate processes for every new web request).</p> @@ -300,8 +300,8 @@ def youngest(request): <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li> </ul> diff --git a/files/fr/learn/server-side/first_steps/website_security/index.html b/files/fr/learn/server-side/first_steps/website_security/index.html index d6e65ae2de..4b90e6303a 100644 --- a/files/fr/learn/server-side/first_steps/website_security/index.html +++ b/files/fr/learn/server-side/first_steps/website_security/index.html @@ -13,9 +13,9 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security <div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}</div> -<p class="summary">La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.</p> +<p>La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Pré-requis :</th> @@ -39,7 +39,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security <p>Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site.</p> <div class="note"> -<p><strong>Note </strong>: ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.</p> +<p><strong>Note :</strong> ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.</p> </div> <h2 id="Menaces_visant_la_sécurité_des_sites_web">Menaces visant la sécurité des sites web</h2> @@ -51,7 +51,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security <p>XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'attaquant d'injecter des scripts, exécutés côté-client, <em>au travers</em> du site web pour viser le navigateur web des autres utilisateurs. Comme le code injecté provient du site web le navigateur web le considère comme sûr, il peut de ce fait faire des choses comme transmettre le cookie d'authentification de l'utilisateur à l'attaquant. Une fois que l'attaquant obtient ce cookie il peut se connecter sur le site comme si il était l'utilisateur attaqué et peut faire tout ce que l'utilisateur pourrait faire. En fonction du site sur lequel l'attaque se produit, cela peut inclure l'accès aux détails de carte bancaire, les informations des contacts, la modification du mot de passe, etc.</p> <div class="note"> -<p><strong>Note </strong>: les vulnérabilités XSS ont historiquement été les plus courantes.</p> +<p><strong>Note :</strong> les vulnérabilités XSS ont historiquement été les plus courantes.</p> </div> <p>Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS <em>réfléchie</em> et <em>persistante</em>.</p> @@ -87,7 +87,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security <p>Le moyen pour éviter ce type d'attaque est de s'assurer que toute saisie de l'utilisateur transmise à une requête SQL ne peut pas changer la nature de cette requête. Un moyen de faire cela est d'<a href="https://fr.wikipedia.org/wiki/Caract%C3%A8re_d%27%C3%A9chappement">échapper</a> tous les caractères de la saisie utilisateur quand ils ont un sens particulier en SQL.</p> <div class="note"> -<p><strong>Note </strong>: la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.</p> +<p><strong>Note :</strong> la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.</p> </div> <p>Dans la requête ci-dessous nous avons échappé le caractère '. Le SQL va donc interpréter la chaine complète (en gras) comme un nom (un nom étrange en effet, mais pas nuisible).</p> @@ -99,7 +99,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security <p>Les frameworks web se chargent bien souvent d'échapper ces caractères à votre place. Django, par exemple, s'assure que toute saisie d'un utilisateur transmise au modèle est bien échappée.</p> <div class="note"> -<p><strong>Note</strong>: Cette section s'inspire beaucoup des informations de <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia ici</a>.</p> +<p><strong>Note :</strong> Cette section s'inspire beaucoup des informations de <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia ici</a>.</p> </div> <h3 id="Falsification_de_requête_inter-sites_CSRF">Falsification de requête inter-sites (CSRF)</h3> @@ -113,7 +113,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security <p>Au final tout utilisateur qui va cliquer sur le bouton de validation, alors qu'il sera connecté sur le site d'échange d'argent, va autoriser la transaction. John va devenir riche !</p> <div class="note"> -<p><strong>Note </strong>: l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.</p> +<p><strong>Note :</strong> l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.</p> </div> <p>Un moyen de prévenir ce type d'attaque est que le serveur demande que chaque requête POST possède un secret généré par le serveur et spécifique à l'utilisateur (le secret serait transmis par le serveur lors de l'envoi du formulaire de transaction). Cette approche empêche John de créer son propre formulaire car il n'est pas capable de connaitre le secret que le serveur founit à l'utilisateur. Même si il venait à trouver ce secret et créer un formulaire pour un utilisateur particulier, il ne pourrait pas utiliser ce formulaire pour attaquer d'autres utilisateurs</p> @@ -139,15 +139,15 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security <p>La majorité des attaques citées précédement réusissent lorsque l'application web fait confiance aux données provenant du navigateur web. Quoique vous fassiez d'autre pour améliorer la sécurité de votre site web, vous devez désinfecter toutes les saisies des utilisateurs avant de les afficher, de les utiliser dans les requêtes SQL ou de les transmettre dans les appels du système ou du système de fichier.</p> <div class="warning"> -<p><strong>Important</strong> : la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne <strong>jamais faire confiance aux données du navigateur web</strong>. Cela comprend les requêtes <code>GET</code> avec la présence des paramètres dans l'URL, les données envoyées avec les <code>POST</code>, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.</p> +<p><strong>Attention :</strong> la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne <strong>jamais faire confiance aux données du navigateur web</strong>. Cela comprend les requêtes <code>GET</code> avec la présence des paramètres dans l'URL, les données envoyées avec les <code>POST</code>, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.</p> </div> <p>Quelques autres points que vous pouvez mettre en place :</p> <ul> <li>Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS).</li> - <li>Configurez vos serveurs web pour utiliser <a href="/en-US/docs/Glossary/https">HTTPS</a> et <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec <code>POST</code> et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.</li> - <li>Tenez vous informé des dernières menaces (<a href="/en-US/docs/">la liste actuelle d'OWASP est ici</a>) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.</li> + <li>Configurez vos serveurs web pour utiliser <a href="/fr/docs/Glossary/https">HTTPS</a> et <a href="/fr/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec <code>POST</code> et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.</li> + <li>Tenez vous informé des dernières menaces (<a href="/fr/docs/">la liste actuelle d'OWASP est ici</a>) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.</li> <li>Utilisez <a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">des outils de recherche de vulnérabilités </a> pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de <em>buf bounty </em>pour déceler des bugs, <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">comme le fait Mozilla ici</a>).</li> <li>Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire.</li> </ul> diff --git a/files/fr/learn/server-side/index.html b/files/fr/learn/server-side/index.html index a93e27f476..64bc78289b 100644 --- a/files/fr/learn/server-side/index.html +++ b/files/fr/learn/server-side/index.html @@ -15,9 +15,9 @@ translation_of: Learn/Server-side --- <div>{{LearnSidebar}}</div> -<p class="summary">Le sujet abordant les sites <strong>web dynamiques / la programmation coté serveur</strong> est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.</p> +<p>Le sujet abordant les sites <strong>web dynamiques / la programmation coté serveur</strong> est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.</p> -<p>La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, le <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS </a>et le <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).</p> +<p>La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le <a href="/fr/docs/Learn/HTML">HTML</a>, le <a href="/fr/docs/Learn/CSS">CSS </a>et le <a href="/fr/docs/Learn/JavaScript">JavaScript</a> dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).</p> <p>De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable.</p> @@ -30,9 +30,9 @@ translation_of: Learn/Server-side <p>Vous allez avoir besoin de comprendre "comment le fonctionne le Web". Nous vous recommandons premièremement de lire les sujets suivants :</p> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Quels_logiciels_sont_n%C3%A9cessaires_pour_construire_un_site_web">De quel logiciels ai-je besoin afin de faire des sites web ?</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/Transf%C3%A9rer_des_fichiers_vers_un_serveur_web">Comment transférer des fichiers à un serveur web ?</a></li> + <li><a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web</a></li> + <li><a href="/fr/Apprendre/Quels_logiciels_sont_n%C3%A9cessaires_pour_construire_un_site_web">De quel logiciels ai-je besoin afin de faire des sites web ?</a></li> + <li><a href="/fr/Apprendre/Transf%C3%A9rer_des_fichiers_vers_un_serveur_web">Comment transférer des fichiers à un serveur web ?</a></li> </ul> <p>Ces articles vous donnerons les outils nécessaires afin de travailler avec les modules de cette section.</p> @@ -42,17 +42,17 @@ translation_of: Learn/Server-side <p>Ce sujet contient les modules suivants. Vous feriez mieux de commencer par le premier module, pour ensuite faire les autres qui vous montrerons comment travailler à l'aide des 2 languages de programmation côté serveur les plus populaire en utilisant les frameworks web appropriés.</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps">Les premiers pas en programmation de site web côté serveur </a></dt> + <dt><a href="/fr/docs/Learn/Server-side/First_steps">Les premiers pas en programmation de site web côté serveur </a></dt> <dd>Ce module fournit les informations de base sur la programmation de site web côté serveur en répondant à des questions telles que "Qu'est-ce que c'est ?", "En quoi est-ce différent de la prgrammation côté client ?" ou encore "Pourquoi est-ce si utile ?" ainsi qu'un aperçu de quelques frameworks côté serveur et comment choisir le vôtre en fonction de vos besoin ou des besoins de votre site web. Finalement nous allons vous présenter les principes de sécurité en serveur web.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/Django">Le framework Web Django (Python)</a></dt> + <dt><a href="/fr/docs/Learn/Server-side/Django">Le framework Web Django (Python)</a></dt> <dd>Django est une infrastructure d'application (framework) côté serveur extrêmement populaire et dotée de son lot de fonctionnalités, écrite en Python. Ce module vous expliquera pourquoi Django fait un si bon framework pour serveurs, comment l'installer et s'en servir.</dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dt><a href="/fr/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> <dd>Express est une infrastructure d'application (framework) assez populaire, écrite en JavaScript et fonctionnant à l'aide de Node.js. Ce module explique les avantages dont bénéficie ce framework, comment l'installer ainsi que comment s'en servir.</dd> </dl> <h2 id="Voir_aussi">Voir aussi</h2> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework">Serveur Node sans infrastucture d'application (framework) </a><sub>(anglais)</sub></dt> + <dt><a href="/fr/docs/Learn/Server-side/Node_server_without_framework">Serveur Node sans infrastucture d'application (framework) </a></dt> <dd>Cet article comprend un serveur statique réalisé avec Node.js seul, pour ceux qui ne veulent pas utiliser de frameworks.</dd> </dl> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html index 2f6aa2a4b6..fd3e443982 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -12,7 +12,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks --- <div>{{LearnSidebar}}</div> -<p class="summary">Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.</p> +<p>Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.</p> <p>En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.</p> @@ -68,7 +68,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. Interactivité de React: évènements et états</a></dt> <dd>Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.</dd> <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. Interactivité de React: modification, filtrage, rendu conditionné</a></dt> - <dd>Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), <span class="tlid-translation translation" lang="fr"><span title="">nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches</span></span>. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.</dd> + <dd>Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.</dd> <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibilité dans React</a></dt> <dd>Dans notre avant-dernier article du tutoriel, nous nous concentrerons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateurs de clavier uniquement et de lecteur d'écran.</dd> <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. Ressources sur React</a></dt> @@ -130,7 +130,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <h2 id="Tutoriels_sur_Svelte">Tutoriels sur Svelte</h2> <div class="note"> -<p>Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.</p> +<p><strong>Note :</strong> Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.</p> <p>Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple eu code de l'application Svelte (tel qu'il est après chaque chapitre) dans le dépôt <a href="https://github.com/opensas/mdn-svelte-tutorial">mdn-svelte-tutorial</a>. Pour une version exécutable en direct, voir <a href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p> </div> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html index 6762cb5842..d222a30518 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html @@ -7,13 +7,13 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <div>{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> -<p class="summary">We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</p> +<p>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages.</td> + <td>Familiarity with the core <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, and <a href="/fr/docs/Learn/JavaScript">JavaScript</a> languages.</td> </tr> <tr> <th scope="row">Objective:</th> @@ -40,7 +40,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p><a href="https://emberjs.com/">Ember</a> was initially released in December 2011 as a continuation of work that started in the <a href="https://en.wikipedia.org/wiki/SproutCore">SproutCore</a> project. It is an older framework that has less users than more modern alternatives such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.</p> -<p><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Start learning Ember</a></p> +<p><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Start learning Ember</a></p> <h3 id="Angular">Angular</h3> @@ -54,7 +54,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>Vue, like <a href="https://angularjs.org/">AngularJS</a>, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.</p> -<p><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Start learning Vue</a></p> +<p><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Start learning Vue</a></p> <h3 id="React">React</h3> @@ -64,7 +64,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>React extends JavaScript with HTML-like syntax, known as <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a>.</p> -<p><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Start learning React</a></p> +<p><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Start learning React</a></p> <h2 id="Why_do_frameworks_exist">Why do frameworks exist?</h2> @@ -80,16 +80,16 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:</p> -<pre class="brush: js notranslate">const state = [ +<pre class="brush: js">const state = [ { id: 'todo-0', name: 'Learn some frameworks!' } ]</pre> -<p>How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code> element inside of an unordered list element (a <code><a href="/en-US/docs/Web/HTML/Element/ul"><ul></a></code>). How do we make it? That could look something like this:</p> +<p>How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <code><a href="/fr/docs/Web/HTML/Element/li"><li></a></code> element inside of an unordered list element (a <code><a href="/fr/docs/Web/HTML/Element/ul"><ul></a></code>). How do we make it? That could look something like this:</p> -<pre class="brush: js notranslate">function buildTodoItemEl(id, name) { +<pre class="brush: js">function buildTodoItemEl(id, name) { const item = document.createElement('li'); const span = document.createElement('span'); const textContent = document.createTextNode(name); @@ -103,11 +103,11 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd return item; }</pre> -<p>Here, we use the <code><a href="/en-US/docs/Web/API/Document/createElement">document.createElement()</a></code> method to make our <code><li></code>, and several more lines of code to create the properties and children it needs.</p> +<p>Here, we use the <code><a href="/fr/docs/Web/API/Document/createElement">document.createElement()</a></code> method to make our <code><li></code>, and several more lines of code to create the properties and children it needs.</p> <p>The tenth line of this snippet references another build function: <code>buildDeleteButtonEl()</code>. It follows a similar pattern to the one we used to build a list item element:</p> -<pre class="brush: js notranslate">function buildDeleteButtonEl(id) { +<pre class="brush: js">function buildDeleteButtonEl(id) { const button = document.createElement('button'); const textContent = document.createTextNode('Delete'); @@ -119,7 +119,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:</p> -<pre class="brush: js notranslate">function renderTodoList() { +<pre class="brush: js">function renderTodoList() { const frag = document.createDocumentFragment(); state.tasks.forEach(task => { const item = buildTodoItemEl(task.id, task.name); @@ -143,12 +143,12 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>Read more about the JavaScript used in this section:</p> <ul> - <li><code><a href="/en-US/docs/Web/API/Document/createElement">document.createElement()</a></code></li> - <li><code><a href="/en-US/docs/Web/API/Document/createTextNode">document.createTextNode()</a></code></li> - <li><code><a href="/en-US/docs/Web/API/Document/createDocumentFragment">document.createDocumentFragment()</a></code></li> - <li><code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">eventTarget.addEventListener()</a></code></li> - <li><code><a href="/en-US/docs/Web/API/Node/appendChild">node.appendChild()</a></code></li> - <li><code><a href="/en-US/docs/Web/API/Node/removeChild">node.removeChild()</a></code></li> + <li><code><a href="/fr/docs/Web/API/Document/createElement">document.createElement()</a></code></li> + <li><code><a href="/fr/docs/Web/API/Document/createTextNode">document.createTextNode()</a></code></li> + <li><code><a href="/fr/docs/Web/API/Document/createDocumentFragment">document.createDocumentFragment()</a></code></li> + <li><code><a href="/fr/docs/Web/API/EventTarget/addEventListener">eventTarget.addEventListener()</a></code></li> + <li><code><a href="/fr/docs/Web/API/Node/appendChild">node.appendChild()</a></code></li> + <li><code><a href="/fr/docs/Web/API/Node/removeChild">node.removeChild()</a></code></li> </ul> <h2 id="Another_way_to_build_UIs">Another way to build UIs</h2> @@ -157,7 +157,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance. By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:</p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li v-for="task in tasks" v-bind:key="task.id"> <span>\{{task.name\}}</span> <button type="button">Delete</button> @@ -168,7 +168,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can join our project and quickly work out what is going on. Vue is not alone in this: using a framework improves team as well as individual efficiency.</p> -<p>It's possible to do things <em>similar</em> to this in vanilla JavaScript. <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literal strings</a> make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.</p> +<p>It's possible to do things <em>similar</em> to this in vanilla JavaScript. <a href="/fr/docs/Web/JavaScript/Reference/Template_literals">Template literal strings</a> make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.</p> <h2 id="Other_things_frameworks_give_us">Other things frameworks give us</h2> @@ -178,8 +178,8 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that Improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: If you want to find out more details about web tooling concepts, have a read of our <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a>.</p> +<div class="note"> +<p><strong>Note :</strong> If you want to find out more details about web tooling concepts, have a read of our <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a>.</p> </div> <h3 id="Compartmentalization">Compartmentalization</h3> @@ -220,7 +220,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <h2 id="Accessibility_on_a_framework-driven_web">Accessibility on a framework-driven web</h2> -<p>Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">live regions</a> or focus management.</p> +<p>Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">live regions</a> or focus management.</p> <p>In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.</p> @@ -283,8 +283,8 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd </tbody> </table> -<div class="blockIndicator note"> -<p><strong>Note</strong>: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.</p> +<div class="note"> +<p><strong>Note :</strong>: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.</p> </div> <p>Citations for this table:</p> @@ -329,8 +329,8 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <p>All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out <a href="https://nextjs.org/">Next.js</a> for React, <a href="https://nuxtjs.org/">Nuxt.js</a> for Vue (yes it is confusing, and no, these projects are not related!), <a href="https://github.com/ember-fastboot/ember-cli-fastboot">FastBoot</a> for Ember, and <a href="https://angular.io/guide/universal">Angular Universal</a> for Angular.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.</p> +<div class="note"> +<p><strong>Note :</strong> Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.</p> </div> <h3 id="Static_site_generators">Static site generators</h3> @@ -354,52 +354,52 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introd <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> <li>Svelte <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> </ul> </li> </ul> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html index b9fe78c7d9..4b4edd429a 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html @@ -7,13 +7,13 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_f <div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> -<p class="summary">Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.</p> +<p>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages.</td> + <td>Familiarity with the core <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, and <a href="/fr/docs/Learn/JavaScript">JavaScript</a> languages.</td> </tr> <tr> <th scope="row">Objective:</th> @@ -28,7 +28,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_f <p>Angular apps often make heavy use of <strong>TypeScript</strong>. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.</p> -<p>DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#Transformation">Transformation is an extra step in the development process</a>, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.</p> +<p>DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#Transformation">Transformation is an extra step in the development process</a>, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.</p> <h3 id="JSX">JSX</h3> @@ -36,25 +36,25 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_f <p>The following shows a simple JSX example:</p> -<pre class="brush: js notranslate">const subject = "World"; +<pre class="brush: js">const subject = "World"; const header = ( <header> <h1>Hello, {subject}!</h1> </header> );</pre> -<p>This expression represents an HTML <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> element with a <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> element inside. The curly braces around <code>subject</code> on line 4 tell the application to read the value of the <code>subject</code> constant and insert it into our <code><h1></code>.</p> +<p>This expression represents an HTML <code><a href="/fr/docs/Web/HTML/Element/header"><header></a></code> element with a <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> element inside. The curly braces around <code>subject</code> on line 4 tell the application to read the value of the <code>subject</code> constant and insert it into our <code><h1></code>.</p> <p>When used with React, the JSX from the previous snippet would be compiled into this:</p> -<pre class="brush: js notranslate">var subject = "World"; +<pre class="brush: js">var subject = "World"; var header = React.createElement("header", null, React.createElement("h1", null, "Hello, ", subject, "!") );</pre> <p>When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:</p> -<pre class="brush: html notranslate"><header> +<pre class="brush: html"><header> <h1>Hello, World!</h1> </header></pre> @@ -66,19 +66,19 @@ var header = React.createElement("header", null, <p>Given this Handlebars template:</p> -<pre class="brush: html notranslate"><header> +<pre class="brush: html"><header> <h1>Hello, \{{subject}}!</h1> </header></pre> <p>And this data:</p> -<pre class="brush: js notranslate">{ +<pre class="brush: js">{ subject: "World" }</pre> <p>Handlebars will build HTML like this:</p> -<pre class="brush: html notranslate"><header> +<pre class="brush: html"><header> <h1>Hello, World!</h1> </header></pre> @@ -88,13 +88,13 @@ var header = React.createElement("header", null, <p>In JavaScript, that function could be written like this:</p> -<pre class="brush: js notranslate">function add(a, b) { +<pre class="brush: js">function add(a, b) { return a + b; }</pre> <p>This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the <code>+</code> operator to concatenate strings together, so this function would technically still work if <code>a</code> and <code>b</code> were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:</p> -<pre class="brush: js notranslate">function add(a: number, b: number) { +<pre class="brush: js">function add(a: number, b: number) { return a + b; }</pre> @@ -114,7 +114,7 @@ var header = React.createElement("header", null, <p>A React representation of this <code>AuthorCredit</code> component might look something like this:</p> -<pre class="brush: js notranslate">function AuthorCredit(props) { +<pre class="brush: js">function AuthorCredit(props) { return ( <figure> <img src={props.src} alt={props.alt} /> @@ -125,15 +125,15 @@ var header = React.createElement("header", null, <p><code>{props.src}</code>, <code>{props.alt}</code>, and <code>{props.byline}</code> represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):</p> -<pre class="brush: js notranslate"><AuthorCredit +<pre class="brush: js"><AuthorCredit src="./assets/zelda.png" alt="Portrait of Zelda Schiff" byline="Zelda Schiff is editor-in-chief of the Library Times." /></pre> -<p>This will ultimately render the following <code><a href="/en-US/docs/Web/HTML/Element/figure"><figure></a></code> element in the browser, with its structure as defined in the <code>AuthorCredit</code> component, and its content as defined in the props included on the <code>AuthorCredit</code> component call:</p> +<p>This will ultimately render the following <code><a href="/fr/docs/Web/HTML/Element/figure"><figure></a></code> element in the browser, with its structure as defined in the <code>AuthorCredit</code> component, and its content as defined in the props included on the <code>AuthorCredit</code> component call:</p> -<pre class="brush: html notranslate"><figure> +<pre class="brush: html"><figure> <img src="assets/zelda.png" alt="Portrait of Zelda Schiff" @@ -149,7 +149,7 @@ var header = React.createElement("header", null, <p>As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own <em>count</em> state, and could be written like this:</p> -<pre class="brush: js notranslate">function CounterButton() { +<pre class="brush: js">function CounterButton() { const [count] = useState(0); return ( <button>Clicked {count} times</button> @@ -158,7 +158,7 @@ var header = React.createElement("header", null, <p><code><a href="https://reactjs.org/docs/hooks-reference.html#usestate">useState()</a></code> is a <strong><a href="https://reactjs.org/docs/hooks-intro.html">React hook</a></strong> which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:</p> -<pre class="brush: html notranslate"><button>Clicked 0 times</button></pre> +<pre class="brush: html"><button>Clicked 0 times</button></pre> <p>The <code>useState()</code> call keeps track of the <code>count</code> value in a robust way across the app, without you needing to write code to do that yourself.</p> @@ -166,9 +166,9 @@ var header = React.createElement("header", null, <p>In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.</p> -<p>In React, listening for the <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> event requires a special property, <code>onClick</code>. Let’s update our <code>CounterButton</code> code from above to allow it to count clicks:</p> +<p>In React, listening for the <code><a href="/fr/docs/Web/API/Element/click_event">click</a></code> event requires a special property, <code>onClick</code>. Let’s update our <code>CounterButton</code> code from above to allow it to count clicks:</p> -<pre class="brush: js notranslate">function CounterButton() { +<pre class="brush: js">function CounterButton() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}>Clicked {count} times</button> @@ -183,7 +183,7 @@ var header = React.createElement("header", null, <h2 id="Handling_dependencies">Handling dependencies</h2> -<p>All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript module syntax</a>, or at least something similar.</p> +<p>All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard <a href="/fr/docs/Web/JavaScript/Guide/Modules">JavaScript module syntax</a>, or at least something similar.</p> <h3 id="Components_in_components">Components in components</h3> @@ -191,11 +191,11 @@ var header = React.createElement("header", null, <p>For example, our <code>AuthorCredit</code> React component might be utilized inside an <code>Article</code> component. That means that <code>Article</code> would need to import <code>AuthorCredit</code>.</p> -<pre class="brush: js notranslate">import AuthorCredit from "./components/AuthorCredit";</pre> +<pre class="brush: js">import AuthorCredit from "./components/AuthorCredit";</pre> <p>Once that’s done, <code>AuthorCredit</code> could be used inside the <code>Article</code> component like this:</p> -<pre class="brush: js notranslate"> ... +<pre class="brush: js"> ... <AuthorCredit /> @@ -207,7 +207,7 @@ var header = React.createElement("header", null, <p>Let's say that the magazine site we're building is structured like this:</p> -<pre class="brush: js notranslate"><App> +<pre class="brush: js"><App> <Home> <Article> <AuthorCredit {/* props */} /> @@ -247,7 +247,7 @@ var header = React.createElement("header", null, <h2 id="Routing">Routing</h2> -<p>As <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#Routing">mentioned in the previous chapter, routing</a> is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.</p> +<p>As <a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#Routing">mentioned in the previous chapter, routing</a> is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.</p> <h2 id="Testing">Testing</h2> @@ -259,7 +259,7 @@ var header = React.createElement("header", null, <p>Here’s a quick test for our <code>CounterButton</code> written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:</p> -<pre class="brush: js notranslate">import React from "react"; +<pre class="brush: js">import React from "react"; import { render, fireEvent } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; @@ -289,13 +289,13 @@ it("Increments the count when clicked", () => { <p>At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you’re enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:</p> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Vue</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Vue</a></li> </ul> -<div class="blockIndicator note"> -<p><strong>Note</strong>: We only have three framework tutorial series available now, but we hope to have more available in the future.</p> +<div class="note"> +<p><strong>Note :</strong> We only have three framework tutorial series available now, but we hope to have more available in the future.</p> </div> <p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> @@ -303,52 +303,52 @@ it("Increments the count when clicked", () => { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> <li>Svelte <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> </ul> </li> </ul> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index 75316fd64e..ff22108290 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -17,14 +17,14 @@ translation_of: >- <div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> -<p class="summary">In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</p> +<p>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> <td> - <p>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> + <p>Familiarity with the core <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, and <a href="/fr/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> <p>React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React.</p> </td> @@ -58,31 +58,31 @@ translation_of: >- <p>React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:</p> -<pre class="brush: js notranslate">const heading = <h1>Mozilla Developer Network</h1>;</pre> +<pre class="brush: js">const heading = <h1>Mozilla Developer Network</h1>;</pre> -<p>This heading constant is known as a <strong>JSX expression</strong>. React can use it to render that <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> tag in our app.</p> +<p>This heading constant is known as a <strong>JSX expression</strong>. React can use it to render that <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> tag in our app.</p> -<p>Suppose we wanted to wrap our heading in a <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:</p> +<p>Suppose we wanted to wrap our heading in a <code><a href="/fr/docs/Web/HTML/Element/header"><header></a></code> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:</p> -<pre class="brush: js notranslate">const header = ( +<pre class="brush: js">const header = ( <header> <h1>Mozilla Developer Network</h1> </header> );</pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:</p> +<div class="note"> +<p><strong>Note :</strong> The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:</p> -<pre class="brush: js notranslate">const header = <header> +<pre class="brush: js">const header = <header> <h1>Mozilla Developer Network</h1> </header></pre> -<p>However, this looks kind of awkward, because the <code><a href="/en-US/docs/Web/HTML/Element/header"><header></a></code> tag that starts the expression is not indented to the same position as its corresponding closing tag.</p> +<p>However, this looks kind of awkward, because the <code><a href="/fr/docs/Web/HTML/Element/header"><header></a></code> tag that starts the expression is not indented to the same position as its corresponding closing tag.</p> </div> <p>Of course, your browser can't read JSX without help. When compiled (using a tool like <a href="https://babeljs.io/">Babel</a> or <a href="https://parceljs.org/">Parcel</a>), our header expression would look like this:</p> -<pre class="brush: js notranslate">const header = React.createElement("header", null, +<pre class="brush: js">const header = React.createElement("header", null, React.createElement("h1", null, "Mozilla Developer Network") );</pre> @@ -96,15 +96,15 @@ translation_of: >- <p>There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.</p> -<p>It's possible to <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to a website without create-react-app</a> by copying some <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.</p> +<p>It's possible to <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to a website without create-react-app</a> by copying some <code><a href="/fr/docs/Web/HTML/Element/script"><script></a></code> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.</p> <h3 id="Requirements">Requirements</h3> <p>In order to use create-react-app, you need to have <a href="https://nodejs.org/en/">Node.js</a> installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).</p> -<p>You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> for more information on npm and yarn.</p> +<p>You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> for more information on npm and yarn.</p> -<p>If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. <strong>Gitbash</strong> (which comes as part of the <a href="https://gitforwindows.org/">git for Windows toolset</a>) or <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Windows Subsystem for Linux</a></strong> (<strong>WSL</strong>) are both suitable. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a> for more information on these, and on terminal commands in general.</p> +<p>If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. <strong>Gitbash</strong> (which comes as part of the <a href="https://gitforwindows.org/">git for Windows toolset</a>) or <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Windows Subsystem for Linux</a></strong> (<strong>WSL</strong>) are both suitable. See <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a> for more information on these, and on terminal commands in general.</p> <p>Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.</p> @@ -120,7 +120,7 @@ translation_of: >- <p>create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you <code>cd</code> to the place you'd like your app to live on your hard drive, then run the following in your terminal:</p> -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre> +<pre class="brush: bash">npx create-react-app moz-todo-react</pre> <p>This creates a <code>moz-todo-react</code> directory, and does several things inside it:</p> @@ -131,23 +131,23 @@ translation_of: >- <li>Initializes the directory as a git repository, if you have git installed on your computer.</li> </ul> -<div class="blockIndicator note"> -<p><strong>Note</strong>: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag <code>--use-npm</code> when you run create-react-app:</p> +<div class="note"> +<p><strong>Note :</strong> if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag <code>--use-npm</code> when you run create-react-app:</p> -<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre> +<pre class="brush: bash">npx create-react-app moz-todo-react --use-npm</pre> </div> <p>create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.</p> <p>When the process is complete, <code>cd</code> into the <code>moz-todo-react</code> directory and run the command <code>npm start</code>. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:</p> -<p><img alt="Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application" src="https://mdn.mozillademos.org/files/17203/default-create-react-app.png" style="border-style: solid; border-width: 1px; height: 980px; width: 1600px;"></p> +<p><img alt="Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application" src="default-create-react-app.png"></p> <h3 id="Application_structure">Application structure</h3> <p>create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:</p> -<pre class="notranslate">moz-todo-react +<pre>moz-todo-react ├── README.md ├── node_modules ├── package.json @@ -168,11 +168,11 @@ translation_of: >- <p>The <strong><code>src</code></strong> directory is where we'll spend most of our time, as it's where the source code for our application lives.</p> -<p>The <strong><code>public</code></strong> directory contains files that will be read by your browser while you're developing the app; the most important of these is <code>index.html</code>. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <code><a href="/en-US/docs/Web/HTML/Element/title"><title></a></code> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!</p> +<p>The <strong><code>public</code></strong> directory contains files that will be read by your browser while you're developing the app; the most important of these is <code>index.html</code>. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <code><a href="/fr/docs/Web/HTML/Element/title"><title></a></code> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!</p> -<p>The <code>public</code> directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a> tutorial.</p> +<p>The <code>public</code> directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a> tutorial.</p> -<p>The <code>package.json</code> file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file `package.json`? on NodeJS.org</a>; we also talk about it in our <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> tutorial.</p> +<p>The <code>package.json</code> file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file `package.json`? on NodeJS.org</a>; we also talk about it in our <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> tutorial.</p> <h2 id="Exploring_our_first_React_component_—_<App>">Exploring our first React component — <code><App/></code></h2> @@ -180,7 +180,7 @@ translation_of: >- <p>Let's open <code>src/App.js</code>, since our browser is prompting us to edit it. This file contains our first component, <code>App</code>, and a few other lines of code:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import logo from './logo.svg'; import './App.css'; @@ -206,13 +206,13 @@ function App() { } export default App;</pre> -<p>The <code>App.js</code> file consists of three main parts: some <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> statements at the top, the <code>App</code> component in the middle, and an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> statement at the bottom. Most React components follow this pattern.</p> +<p>The <code>App.js</code> file consists of three main parts: some <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/import">import</a></code> statements at the top, the <code>App</code> component in the middle, and an <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/export">export</a></code> statement at the bottom. Most React components follow this pattern.</p> <h3 id="Import_statements">Import statements</h3> <p>The <code>import</code> statements at the top of the file allow <code>App.js</code> to use code that has been defined elsewhere. Let's look at these statements more closely.</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import logo from './logo.svg'; import './App.css';</pre> @@ -230,7 +230,7 @@ import './App.css';</pre> <p>Let's look at App more closely.</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { return ( <div className="App"> <header className="App-header"> @@ -253,13 +253,13 @@ import './App.css';</pre> <p>The <code>App</code> function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.</p> -<p>Some elements in the expression have attributes, which are written just like in HTML, following a pattern of <code>attribute="value"</code>. On line 3, the opening <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> tag has a <code>className</code> attribute. This is the same as the <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> attribute in HTML, but because JSX is JavaScript, we can't use the word <code>class</code> – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.</p> +<p>Some elements in the expression have attributes, which are written just like in HTML, following a pattern of <code>attribute="value"</code>. On line 3, the opening <code><a href="/fr/docs/Web/HTML/Element/div"><div></a></code> tag has a <code>className</code> attribute. This is the same as the <code><a href="/fr/docs/Web/HTML/Global_attributes/class">class</a></code> attribute in HTML, but because JSX is JavaScript, we can't use the word <code>class</code> – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.</p> -<p>Take a moment to change the <code><a href="/en-US/docs/Web/HTML/Element/p"><p></a></code> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at <code>http://localhost:3000</code> in your browser. Now delete the <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> tag and save; the "Learn React" link will be gone.</p> +<p>Take a moment to change the <code><a href="/fr/docs/Web/HTML/Element/p"><p></a></code> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at <code>http://localhost:3000</code> in your browser. Now delete the <code><a href="/fr/docs/Web/HTML/Element/a"><a></a></code> tag and save; the "Learn React" link will be gone.</p> <p>Your <code>App</code> component should now look like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { return ( <div className="App"> <header className="App-header"> @@ -280,7 +280,7 @@ import './App.css';</pre> <p>Let’s open <code>src/index.js</code>, because that's where the <code>App</code> component is being used. This file is the entry point for our app, and it initially looks like this:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; @@ -304,15 +304,15 @@ serviceWorker.unregister();</pre> <p>All of this tells React that we want to render our React application with the <code>App</code> component as the root, or first component.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: In JSX, React components and HTML elements must have closing slashes. Writing just <code><App></code> or just <code><img></code> will cause an error.</p> +<div class="note"> +<p><strong>Note :</strong>: In JSX, React components and HTML elements must have closing slashes. Writing just <code><App></code> or just <code><img></code> will cause an error.</p> </div> -<p><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.</p> +<p><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.</p> <p>Your final <code>index.js</code> file should look like this:</p> -<pre class="brush: js notranslate">import React from 'react'; +<pre class="brush: js">import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; @@ -327,13 +327,13 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Back in <code>App.js</code>, let’s focus on line 9:</p> -<pre class="brush: js notranslate"><img src={logo} className="App-logo" alt="logo" /></pre> +<pre class="brush: js"><img src={logo} className="App-logo" alt="logo" /></pre> <p>Here, the <code><img /></code> tag's <code>src</code> attribute value is in curly braces. This is how JSX recognizes variables. React will see <code>{logo}</code>, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.</p> <p>Let's try making a variable of our own. Before the return statement of <code>App</code>, add <code>const subject = 'React';</code>. Your <code>App</code> component should now look like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( <div className="App"> @@ -349,7 +349,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Change line 8 to use our <code>subject</code> variable instead of the word "world", like this:</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( <div className="App"> @@ -373,11 +373,11 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Add a prop of <code>subject</code> to the <code><App/></code> component call, with a value of <code>Clarice</code>. When you are done, your code should look something like this:</p> -<pre class="brush: js notranslate">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> +<pre class="brush: js">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> <p>Back in <code>App.js</code>, let's revisit the App function itself, which reads like this (with the <code>return</code> statement shortened for brevity):</p> -<pre class="brush: js notranslate">function App() { +<pre class="brush: js">function App() { const subject = "React"; return ( // return statement @@ -386,7 +386,7 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Change the signature of the <code>App</code> function so that it accepts <code>props</code> as a parameter, and delete the <code>subject</code> const. Just like any other function parameter, you can put <code>props</code> in a <code>console.log()</code> to print it to your browser's console. Go ahead and do that before the <code>return</code> statement, like so:</p> -<pre class="brush: js notranslate">function App(props) { +<pre class="brush: js">function App(props) { console.log(props); return ( // return statement @@ -395,13 +395,13 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <p>Save your file and check your browser's JavaScript console. You should see something like this logged:</p> -<pre class="brush: js notranslate">Object { subject: "Clarice" }</pre> +<pre class="brush: js">Object { subject: "Clarice" }</pre> <p>The object property <code>subject</code> corresponds to the <code>subject</code> prop we added to our <code><App /></code> component call, and the string <code>Clarice</code> corresponds to its value. Component props in React are always collected into objects in this fashion.</p> <p>Now that <code>subject</code> is one of our props, let's utilize it in <code>App.js</code>. Change the <code>subject</code> constant so that, instead of defining it as the string <code>React</code>, you are reading the value of <code>props.subject</code>. You can also delete your <code>console.log()</code> if you want.</p> -<pre class="brush: js notranslate">function App(props) { +<pre class="brush: js">function App(props) { const subject = props.subject; return ( // return statement @@ -429,40 +429,40 @@ ReactDOM.render(<App />, document.getElementById('root'));</pre> <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> </ul> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html index a93b2a044c..0ea2852a83 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html @@ -11,18 +11,18 @@ translation_of: >- <div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> -<p class="summary">Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</p> +<p>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</p> -<div class="blockIndicator note"> -<p class="summary"><strong>Note</strong>: If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> +<div class="note"> +<p><strong>Note :</strong> If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> </div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> <td> - <p>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> + <p>Familiarity with the core <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, and <a href="/fr/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> </td> </tr> <tr> @@ -60,7 +60,7 @@ translation_of: >- <p>Then, copy and paste the following commands into your terminal to delete some unneeded files. Make sure you’re starting in the app's root directory!</p> -<pre class="brush: bash notranslate"># Move into the src directory of your project +<pre class="brush: bash"># Move into the src directory of your project cd src # Delete a few files rm -- App.test.js App.css logo.svg serviceWorker.js setupTests.js @@ -82,7 +82,7 @@ cd ..</pre> <p>Copy the following snippet to your clipboard, then paste it into <code>App.js</code> so that it replaces the existing <code>App()</code> function:</p> -<pre class="brush: js notranslate">function App(props) { +<pre class="brush: js">function App(props) { return ( <div className="todoapp stack-large"> <h1>TodoMatic</h1> @@ -181,21 +181,21 @@ cd ..</pre> ); }</pre> -<p>Now open <code>public/index.html</code> and change the <code><a href="/en-US/docs/Web/HTML/Element/title"><title></a></code> element’s text to <code>TodoMatic</code>. This way, it will match the <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> at the top of our app.</p> +<p>Now open <code>public/index.html</code> and change the <code><a href="/fr/docs/Web/HTML/Element/title"><title></a></code> element’s text to <code>TodoMatic</code>. This way, it will match the <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> at the top of our app.</p> -<pre class="brush: html notranslate"><title>TodoMatic</title></pre> +<pre class="brush: html"><title>TodoMatic</title></pre> <p>When your browser refreshes, you should see something like this:</p> -<p><img alt="todo-matic app, unstyled, showing a jumbled mess of labels, inputs, and buttons" src="https://mdn.mozillademos.org/files/17253/unstyled-app.png" style="border-style: solid; border-width: 1px; height: 743px; width: 838px;"></p> +<p><img alt="todo-matic app, unstyled, showing a jumbled mess of labels, inputs, and buttons" src="unstyled-app.png"></p> <p>It's ugly, and doesn’t function yet, but that's okay — we'll style it in a moment. First, consider the JSX we have, and how it corresponds to our user stories:</p> <ul> - <li>We have a <code><a href="/en-US/docs/Web/HTML/Element/form"><form></a></code> element, with an <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code> for writing out a new task, and a button to submit the form.</li> + <li>We have a <code><a href="/fr/docs/Web/HTML/Element/form"><form></a></code> element, with an <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code> for writing out a new task, and a button to submit the form.</li> <li>We have an array of buttons that will be used to filter our tasks.</li> <li>We have a heading that tells us how many tasks remain.</li> - <li>We have our 3 tasks, arranged in an un-ordered list. Each task is a list item (<code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code>), and has buttons to edit and delete it and a checkbox to check it off as done.</li> + <li>We have our 3 tasks, arranged in an un-ordered list. Each task is a list item (<code><a href="/fr/docs/Web/HTML/Element/li"><li></a></code>), and has buttons to edit and delete it and a checkbox to check it off as done.</li> </ul> <p>The form will allow us to <em>make</em> tasks; the buttons will let us <em>filter</em> them; the heading and list are our way to <em>read</em> them. The UI for <em>editing</em> a task is conspicuously absent for now. That's okay – we'll write that later.</p> @@ -204,7 +204,7 @@ cd ..</pre> <p>You may notice some unusual attributes here. For example:</p> -<pre class="brush: html notranslate"><button type="button" className="btn toggle-btn" aria-pressed="true"> +<pre class="brush: html"><button type="button" className="btn toggle-btn" aria-pressed="true"> <span className="visually-hidden">Show </span> <span>all</span> <span className="visually-hidden"> tasks</span> @@ -214,9 +214,9 @@ cd ..</pre> <p>The class <code>visually-hidden</code> has no effect yet, because we have not included any CSS. Once we have put our styles in place, though, any element with this class will be hidden from sighted users and still available to screen reader users — this is because these words are not needed by sighted users; they are there to provide more information about what the button does for screenreader users that do not have the extra visual context to help them.</p> -<p>Further down, you can find our <code><a href="/en-US/docs/Web/HTML/Element/ul"><ul></a></code> element:</p> +<p>Further down, you can find our <code><a href="/fr/docs/Web/HTML/Element/ul"><ul></a></code> element:</p> -<pre class="brush: html notranslate"><ul +<pre class="brush: html"><ul role="list" className="todo-list stack-large stack-exception" aria-labelledby="list-heading" @@ -228,7 +228,7 @@ cd ..</pre> <p>Finally, the labels and inputs in our list items have some attributes unique to JSX:</p> -<pre class="brush: html notranslate"><input id="todo-0" type="checkbox" defaultChecked={true} /> +<pre class="brush: html"><input id="todo-0" type="checkbox" defaultChecked={true} /> <label className="todo-label" htmlFor="todo-0"> Eat </label></pre> @@ -248,7 +248,7 @@ cd ..</pre> <p>Paste the following CSS code into <code>src/index.css</code> so that it replaces what's currently there:</p> -<pre class="brush: css notranslate">/* RESETS */ +<pre class="brush: css">/* RESETS */ *, *::before, *::after { @@ -552,52 +552,52 @@ body { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> <li>Svelte <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> </ul> </li> </ul> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html index 71718ed008..b2b0040f91 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -9,14 +9,14 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> </div> -<p class="summary">Présentons Maintenant Vue, le troisième de nos cadres. Dans cet article, nous allons examiner un peu de fond Vue, apprendre à l’installer et créer un nouveau projet, étudier la structure de haut niveau de l’ensemble du projet et un composant individuel, voir comment exécuter le projet localement, et le préparer à commencer à construire notre exemple.</p> +<p>Présentons Maintenant Vue, le troisième de nos cadres. Dans cet article, nous allons examiner un peu de fond Vue, apprendre à l’installer et créer un nouveau projet, étudier la structure de haut niveau de l’ensemble du projet et un composant individuel, voir comment exécuter le projet localement, et le préparer à commencer à construire notre exemple.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Conditions préalables:</th> <td> - <p>Familiarité avec les langages <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>et <a href="/en-US/docs/Learn/JavaScript">JavaScript,</a> connaissance de la <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ligne terminal/commande</a>.</p> + <p>Familiarité avec les langages <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>et <a href="/fr/docs/Learn/JavaScript">JavaScript,</a> connaissance de la <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ligne terminal/commande</a>.</p> <p>Les composants Vue sont écrits sous la forme d’une combinaison d’objets JavaScript qui gèrent les données de l’application et d’une syntaxe de modèle html qui cartographie la structure DOM sous-jacente. Pour l’installation et pour utiliser certaines des fonctionnalités les plus avancées de Vue (comme les composants de fichier unique ou les fonctions de rendu), vous aurez besoin d’un terminal avec nœud + npm installé.</p> </td> @@ -30,7 +30,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="Une_Vue_plus_claire">Une Vue plus claire</h2> -<p>Vue est un cadre JavaScript moderne qui fournit des installations utiles pour une amélioration progressive - contrairement à beaucoup d’autres cadres, vous pouvez utiliser Vue pour améliorer html existant. Cela vous permet d’utiliser Vue comme un remplacement de drop-in pour une bibliothèque comme <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p> +<p>Vue est un cadre JavaScript moderne qui fournit des installations utiles pour une amélioration progressive - contrairement à beaucoup d’autres cadres, vous pouvez utiliser Vue pour améliorer html existant. Cela vous permet d’utiliser Vue comme un remplacement de drop-in pour une bibliothèque comme <a href="/fr/docs/Glossary/jQuery">JQuery</a>.</p> <p>Cela étant dit, vous pouvez également utiliser Vue pour écrire des applications à page unique entières (SPA). Cela vous permet de créer un balisage géré entièrement par Vue, ce qui peut améliorer l’expérience et les performances des développeurs lors de la gestion d’applications complexes. Il vous permet également de profiter des bibliothèques pour le routage côté client et la gestion de l’État lorsque vous en avez besoin. En outre, Vue adopte une approche « intermédiaire » pour l’outillage comme le routage côté client et la gestion de l’État. Bien que l’équipe de base de Vue gère des bibliothèques suggérées pour ces fonctions, elles ne sont pas directement regroupées dans Vue. Cela vous permet de sélectionner une bibliothèque de routage/gestion d’état différente si elle correspond mieux à votre application.</p> @@ -41,18 +41,18 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <h2 id="Installation">Installation</h2> -<p><font>Pour utiliser Vue dans un site existant, vous pouvez déposer l’un des éléments suivants sur une page. Cela vous permet de commencer à utiliser Vue sur les sites existants, c’est pourquoi Vue se targue d’être un cadre progressif. Il s’agit d’une excellente option lors de la migration d’un projet existant à l’aide d’une bibliothèque comme JQuery à Vue. Avec cette méthode, vous pouvez utiliser un grand nombre des fonctionnalités de base de Vue, telles que les attributs, les composants personnalisés et la gestion des données.</font><code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code></p> +<p>Pour utiliser Vue dans un site existant, vous pouvez déposer l’un des éléments suivants sur une page. Cela vous permet de commencer à utiliser Vue sur les sites existants, c’est pourquoi Vue se targue d’être un cadre progressif. Il s’agit d’une excellente option lors de la migration d’un projet existant à l’aide d’une bibliothèque comme JQuery à Vue. Avec cette méthode, vous pouvez utiliser un grand nombre des fonctionnalités de base de Vue, telles que les attributs, les composants personnalisés et la gestion des données.<code><a href="/fr/docs/Web/HTML/Element/script"><script></a></code></p> <ul> <li> <p>Script de développement (Non optimisé, mais inclut les avertissements de console. Idéal pour le développement</p> - <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></pre> + <pre class="brush: html"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></pre> </li> <li> <p>Production Script (Optimized version, minimal console warnings. It is recommended that you specify a version number when including Vue on your site so that any framework updates do not break your live site without you knowing.)</p> - <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></pre> + <pre class="brush: html"><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></pre> </li> </ul> @@ -63,19 +63,19 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <li>npm or yarn.</li> </ol> -<div class="blockIndicator note"> -<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> +<div class="note"> +<p><strong>Note :</strong> If you don't have the above installed, find out <a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> </div> <p>To install the CLI, run the following command in your terminal:</p> -<pre class="brush: bash notranslate">npm install --global @vue/cli</pre> +<pre class="brush: bash">npm install --global @vue/cli</pre> <p>Or if you'd prefer to use yarn:</p> -<pre class="brush: bash notranslate">yarn global add @vue/cli</pre> +<pre class="brush: bash">yarn global add @vue/cli</pre> -<p><font>Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run . The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.</font><code>vue create <project-name></code></p> +<p>Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run . The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.<code>vue create <project-name></code></p> <p>We’ll look at using this below.</p> @@ -84,21 +84,21 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <p>To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:</p> <ol> - <li><font>In terminal, to where you'd like to create your sample app, then run .</font><code>cd</code><code>vue create moz-todo-vue</code></li> - <li><font>Use the arrow keys and to select the "Manually select features" option.</font><kbd>Enter</kbd></li> - <li><font>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press to proceed.</font><kbd>Enter</kbd></li> - <li><font>Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit again. This will help us catch common errors, but not be overly opinionated.</font><kbd>Enter</kbd></li> - <li><font>Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit to continue.</font><kbd>Enter</kbd></li> - <li><font>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's file. Select "In dedicated config files" and push .</font><code>package.json</code><kbd>Enter</kbd></li> - <li><font>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type , otherwise type .</font><kbd>y</kbd><kbd>n</kbd></li> + <li>In terminal, to where you'd like to create your sample app, then run .<code>cd</code><code>vue create moz-todo-vue</code></li> + <li>Use the arrow keys and to select the "Manually select features" option.<kbd>Enter</kbd></li> + <li>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press to proceed.<kbd>Enter</kbd></li> + <li>Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit again. This will help us catch common errors, but not be overly opinionated.<kbd>Enter</kbd></li> + <li>Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit to continue.<kbd>Enter</kbd></li> + <li>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's file. Select "In dedicated config files" and push .<code>package.json</code><kbd>Enter</kbd></li> + <li>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type , otherwise type .<kbd>y</kbd><kbd>n</kbd></li> </ol> <p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p> -<p><font>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run . So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .</font><code>--packageManager=<package-manager></code><code>vue create</code><code>moz-todo-vue</code><code>vue create moz-todo-vue --packageManager=npm</code></p> +<p>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run . So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .<code>--packageManager=<package-manager></code><code>vue create</code><code>moz-todo-vue</code><code>vue create moz-todo-vue --packageManager=npm</code></p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p> +<div class="note"> +<p><strong>Note :</strong> We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p> </div> <h2 id="Project_structure">Project structure</h2> @@ -106,56 +106,57 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ge <p>If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:</p> <ul> - <li><code>.eslintrc.js</code><font>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</font></li> - <li><code>babel.config.js</code><font>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</font></li> - <li><code>.browserslistrc</code><font>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</font></li> - <li><code>public</code><font>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; gets some processing).</font><code>index.html</code> + <li><code>.eslintrc.js</code>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</li> + <li><code>babel.config.js</code>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</li> + <li><code>.browserslistrc</code>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</li> + <li><code>public</code>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; gets some processing).<code>index.html</code> <ul> - <li><code>favicon.ico</code><font>: This is the favicon for your app. Currently, it's the Vue logo.</font></li> - <li><code>index.html</code><font>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.</font> - <div class="note"><strong>Note</strong>: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</div> + <li><code>favicon.ico</code>: This is the favicon for your app. Currently, it's the Vue logo.</li> + <li><code>index.html</code>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it. + <div class="note"> + <p><strong>Note :</strong> this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</p></div> </li> </ul> </li> - <li><code>src</code><font>: This directory contains the core of your Vue app.</font> + <li><code>src</code>: This directory contains the core of your Vue app. <ul> - <li><code>main.js</code><font>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the file your app should be attached to. This file is often where you register global components or additional Vue libraries.</font><code>index.html</code></li> - <li><code>App.vue</code><font>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</font></li> - <li><code>components</code><font>: this directory is where you keep your components. Currently it just has one example component.</font></li> - <li><code>assets</code><font>: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</font></li> + <li><code>main.js</code>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the file your app should be attached to. This file is often where you register global components or additional Vue libraries.<code>index.html</code></li> + <li><code>App.vue</code>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</li> + <li><code>components</code>: this directory is where you keep your components. Currently it just has one example component.</li> + <li><code>assets</code>: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</li> </ul> </li> </ul> -<div class="blockIndicator note"> -<p><font><strong>Note</strong>: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a directory).</font><code>views</code></p> +<div class="note"> +<p><strong>Note :</strong> Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a directory).<code>views</code></p> </div> <h2 id=".vue_files_single_file_components">.vue files (single file components)</h2> <p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p> -<p><font>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in . These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</font><code>.vue</code></p> +<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in . These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.<code>.vue</code></p> -<p><font>As a bonus, projects created with the Vue CLI are configured to use files with Webpack out of the box. In fact, if you look inside the folder in the project we created with the CLI, you'll see your first file: .</font><code>.vue</code><code>src</code><code>.vue</code><code>App.vue</code></p> +<p>As a bonus, projects created with the Vue CLI are configured to use files with Webpack out of the box. In fact, if you look inside the folder in the project we created with the CLI, you'll see your first file: .<code>.vue</code><code>src</code><code>.vue</code><code>App.vue</code></p> <p>Let's explore this now.</p> <h3 id="App.vue">App.vue</h3> -<p><font>Open your file — you’ll see that it has three parts: , , and , which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</font><code>App.vue</code><code><template></code><code><script></code><code><style></code></p> +<p>Open your file — you’ll see that it has three parts: , , and , which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.<code>App.vue</code><code><template></code><code><script></code><code><style></code></p> -<p><code><template></code><font> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</font></p> +<p><code><template></code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p> -<div class="blockIndicator note"> -<p><font><strong>Note</strong>: By setting the attribute on the tag, you can use Pug template syntax instead of standard HTML — . We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</font><code>lang</code><code><template></code><code><template lang="pug"></code></p> +<div class="note"> +<p><strong>Note :</strong> By setting the attribute on the tag, you can use Pug template syntax instead of standard HTML — . We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.<code>lang</code><code><template></code><code><template lang="pug"></code></p> </div> -<p><code><script></code><font> contains all of the non-display logic of your component. Most importantly, your tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a function.</font><code><script></code><code>render()</code></p> +<p><code><script></code> contains all of the non-display logic of your component. Most importantly, your tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a function.<code><script></code><code>render()</code></p> -<p><font>In the case of , our default export sets the name of the component to and registers the component by adding it into the property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</font><code>App.vue</code><code>app</code><code>HelloWorld</code><code>components</code></p> +<p>In the case of , our default export sets the name of the component to and registers the component by adding it into the property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.<code>App.vue</code><code>app</code><code>HelloWorld</code><code>components</code></p> -<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'; +<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'; export default { name: 'app', @@ -165,23 +166,23 @@ export default { } };</pre> -<div class="blockIndicator note"> -<p><font><strong>Note</strong>: If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the attribute on the tag to signify to the compiler that you're using TypeScript — .</font><code>lang</code><code><script></code><code><script lang="ts"></code></p> +<div class="note"> +<p><strong>Note :</strong> If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the attribute on the tag to signify to the compiler that you're using TypeScript — .<code>lang</code><code><script></code><code><script lang="ts"></code></p> </div> -<p><code><style></code><font> is where you write your CSS for the component. If you add a attribute — — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</font><code>scoped</code><code><style scoped></code></p> +<p><code><style></code> is where you write your CSS for the component. If you add a attribute — — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.<code>scoped</code><code><style scoped></code></p> -<div class="blockIndicator note"> -<p><font><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a attribute to the tag so that the contents can be processed by Webpack at build time. For example, will allow you to use SCSS syntax in your styling information.</font><code>lang</code><code><style></code><code><style lang="scss"></code></p> +<div class="note"> +<p><strong>Note :</strong> If you select a CSS pre-processor when creating the project via the CLI, you can add a attribute to the tag so that the contents can be processed by Webpack at build time. For example, will allow you to use SCSS syntax in your styling information.<code>lang</code><code><style></code><code><style lang="scss"></code></p> </div> <h2 id="Running_the_app_locally">Running the app locally</h2> -<p><font>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a command to the project’s file as an npm script, so you can easily run it.</font><code>serve</code><code>package.json</code></p> +<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a command to the project’s file as an npm script, so you can easily run it.<code>serve</code><code>package.json</code></p> -<p><font>In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:</font><code>npm run serve</code><code>yarn serve</code></p> +<p>In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:<code>npm run serve</code><code>yarn serve</code></p> -<pre class="notranslate">INFO Starting development server... +<pre>INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 18121ms @@ -193,43 +194,43 @@ export default { Note that the development build is not optimized. To create a production build, run npm run build.</pre> -<p><font>If you navigate to the “local” address in a new browser tab (this should be something like as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</font><code>http://localhost:8080</code></p> +<p>If you navigate to the “local” address in a new browser tab (this should be something like as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.<code>http://localhost:8080</code></p> -<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p> +<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="vue-default-app.png"></p> <h2 id="Making_a_couple_of_changes">Making a couple of changes</h2> -<p><font>Let's make our first change to the app — we’ll delete the Vue logo. Open the file, and delete the element from the template section:</font><code>App.vue</code><code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code></p> +<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the file, and delete the element from the template section:<code>App.vue</code><code><a href="/fr/docs/Web/HTML/Element/img"><img></a></code></p> -<pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd"><img alt="Vue logo" src="./assets/logo.png"></span></pre> +<pre class="brush: html"><img alt="Vue logo" src="./assets/logo.png"></pre> -<p><font>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the component from our template.</font><code>HelloWorld</code></p> +<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the component from our template.<code>HelloWorld</code></p> <p>First of all delete this line:</p> -<pre class="brush: html notranslate"><HelloWorld msg="Welcome to Your Vue.js App"/></pre> +<pre class="brush: html"><HelloWorld msg="Welcome to Your Vue.js App"/></pre> -<p><font>If you save your file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the element that import and register the component:</font><code>App.vue</code><code><script></code></p> +<p>If you save your file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the element that import and register the component:<code>App.vue</code><code><script></code></p> <p>Delete these lines now:</p> -<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'</pre> +<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'</pre> -<pre class="brush: js notranslate">components: { +<pre class="brush: js">components: { HelloWorld }</pre> -<p><font>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside .</font><code><template></code></p> +<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside .<code><template></code></p> -<p><font>Let’s add a new inside . Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</font><code><h1></code><code><div id="app"></code></p> +<p>Let’s add a new inside . Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:<code><h1></code><code><div id="app"></code></p> -<pre class="brush: html notranslate"><template> +<pre class="brush: html"><template> <div id="app"> <h1>To-Do List</h1> </div> </template></pre> -<p><code>App.vue</code><font> will now show our heading, as you'd expect.</font></p> +<p><code>App.vue</code> will now show our heading, as you'd expect.</p> <h2 id="Summary">Summary</h2> @@ -244,52 +245,52 @@ export default { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> - <li><font>React</font> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li>React <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> </ul> </li> - <li><font>Ember</font> + <li>Ember <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> </ul> </li> - <li><font>Vue</font> + <li>Vue <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> </ul> </li> - <li><font>Svelte</font> + <li>Svelte <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> </ul> </li> </ul> diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html index b98eb7323a..9ed0cc97e7 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html @@ -20,14 +20,14 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité <div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> -<p class="summary">Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.</p> +<p>Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> <td> - <p>Connaissances avec le noyau des langages <a href="https://developer.mozilla.org/fr/Apprendre/HTML">HTML</a>, <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> et <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript">JavaScript</a> ; une idée du haut niveau des principes du <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">test en navigateur croisé</a>.</p> + <p>Connaissances avec le noyau des langages <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/Apprendre/JavaScript">JavaScript</a> ; une idée du haut niveau des principes du <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">test en navigateur croisé</a>.</p> </td> </tr> <tr> @@ -58,12 +58,12 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité <li>Les utilisateurs avec des appareils aux caractéristiques basses qui peuvent avoir des processeurs lents.</li> </ul> -<p>D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. <a href="https://developer.mozilla.org/fr/Apprendre/a11y/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a> décrit plus largement et précisément l'accessibilité que cet article ne le fait.</p> +<p>D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. <a href="/fr/Apprendre/a11y/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a> décrit plus largement et précisément l'accessibilité que cet article ne le fait.</p> -<p>Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_probl%C3%A8mes_de_responsive_design">responsive design</a> et la <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Les_probl%C3%A8mes_de_performance">performance</a> à d'autres endroits dans ce module.</p> +<p>Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_probl%C3%A8mes_de_responsive_design">responsive design</a> et la <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Les_probl%C3%A8mes_de_performance">performance</a> à d'autres endroits dans ce module.</p> <div class="note"> -<p><strong>Note </strong>: Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.</p> +<p><strong>Note :</strong> Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.</p> </div> <h2 id="Problèmes_d'accessibilité_courants">Problèmes d'accessibilité courants</h2> @@ -71,7 +71,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité <p>Dans cette section nous détaillerons certains des problèmes principaux qui se manifestent autour de l'accessibilité, liée à des technologies spécifiques, avec les bonnes pratiques à adopter, et quelques tests rapides que vous pouvez faire pour voir si vos sites vont dans le bon sens.</p> <div class="note"> -<p><strong>Note </strong>: L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidlines and the law</a>.</p> +<p><strong>Note :</strong> L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidlines and the law</a>.</p> </div> <h3 id="HTML">HTML</h3> @@ -127,7 +127,7 @@ This is the second subsection of my content. I think is more interesting than th <p>Vous pouvez essayer ceci en utilisant notre exemple <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">code source</a>) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> +<p><img alt="" src="button-focused-unfocused.png"></p> <p>Vous pouvez ensuite presser Entrée/Retour pour accéder à un lien focalisé ou presser un bouton (nous avons inclus un peu de JavaScript pour que les boutons renvoies un message d'alerte), ou commencer à taper pour entrer du texte dans un des input texte (d'autres éléments de formulaire ont différents contrôles, par exemple l'élément {{htmlelement("select")}} peut avoir ses options affichées et navigable en utilisant les touches haut et bas).</p> @@ -139,12 +139,12 @@ This is the second subsection of my content. I think is more interesting than th </ul> <div class="warning"> -<p><strong>Important </strong>: Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.</p> +<p><strong>Attention :</strong> Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.</p> </div> <p>Cet exemple souligne l'importance de l'utilisation de la sémantique correcte d'élément pour le travail correct. C'est possible de styler <em>n'importe quel</em> élément pour qu'il ressemble à un lien ou un bouton avec le CSS, et de le faire se comporter comme un lien ou un bouton avec JavaScript, mais ils ne seront toujours pas des liens ou des boutons, et vous perdrez beaucoup de l'accessibilité que ces éléments vous fournissent pour rien. Donc ne le faîte pas si vous pouvez l'éviter.</p> -<p>Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class <a href="https://developer.mozilla.org/fr/docs/Web/CSS/:focus">:focus</a>. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :</p> +<p>Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class <a href="/fr/docs/Web/CSS/:focus">:focus</a>. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :</p> <pre class="brush: css">a:hover, input:hover, button:hover, select:hover, a:focus, input:focus, button:focus, select:focus { @@ -152,7 +152,7 @@ a:focus, input:focus, button:focus, select:focus { }</pre> <div class="note"> -<p><strong>Note </strong>: Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.</p> +<p><strong>Note :</strong> Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.</p> </div> <h4 id="Intégrer_l'accessibilité_clavier">Intégrer l'accessibilité clavier</h4> @@ -160,8 +160,8 @@ a:focus, input:focus, button:focus, select:focus { <p>Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des <code><div></code>s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément <code><video></code> avec les contrôles par défaut du navigateur). Vous avez quelques options ici :</p> <ol> - <li>Créer des contrôles personnalisés en utilisant les éléments <code><button></code> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li> - <li>Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Desktop mouse and keyboard controls</a> pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.</li> + <li>Créer des contrôles personnalisés en utilisant les éléments <code><button></code> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li> + <li>Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir <a href="/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Desktop mouse and keyboard controls</a> pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.</li> <li>Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">code source</a>). Nous donnons à nos faux boutons <code><div></code> la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut <code>tabindex="0"</code> (voir l'<a href="https://webaim.org/techniques/keyboard/tabindex">article tabindex</a> de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :</li> <li> <pre class="brush: js">document.onkeydown = function(e) { @@ -169,11 +169,11 @@ a:focus, input:focus, button:focus, select:focus { document.activeElement.onclick(e); } };</pre> - Ici nous ajoutons un listener à l'objet <code>document</code> pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le <code>onclick</code> du bouton en utilisant <code>document.activeElement.onclick()</code>. <code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> nous donne l'élément courant qui est focalisé sur la page.</li> + Ici nous ajoutons un listener à l'objet <code>document</code> pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet <a href="/fr/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le <code>onclick</code> du bouton en utilisant <code>document.activeElement.onclick()</code>. <code><a href="/fr/docs/Web/API/Document/activeElement">activeElement</a></code> nous donne l'élément courant qui est focalisé sur la page.</li> </ol> <div class="note"> -<p><strong>Note </strong>: Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. <code>onclick</code>). <code>addEventListener</code> ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.</p> +<p><strong>Note :</strong> Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. <code>onclick</code>). <code>addEventListener</code> ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.</p> </div> <h4 id="Les_textes_alternatifs">Les textes alternatifs</h4> @@ -181,12 +181,12 @@ a:focus, input:focus, button:focus, select:focus { <p>Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut <code>alt</code>, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.</p> <div class="note"> -<p><strong>Note </strong>: Pour plus d'informations, lisez <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> +<p><strong>Note :</strong> Pour plus d'informations, lisez <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> </div> <p>L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité.</p> -<p>Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> (voir <a href="https://developer.mozilla.org/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous-titres à des vidéos HTML5</a> pour un tutoriel détaillé). <a href="https://developer.mozilla.org/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Compatibilit%C3%A9_entre_navigateurs">La compatibilité entre navigateur</a> pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.</p> +<p>Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format <a href="/fr/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> (voir <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous-titres à des vidéos HTML5</a> pour un tutoriel détaillé). <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Compatibilit%C3%A9_entre_navigateurs">La compatibilité entre navigateur</a> pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.</p> <h4 id="Relations_et_contexte_entre_élément">Relations et contexte entre élément</h4> @@ -197,7 +197,7 @@ a:focus, input:focus, button:focus, select:focus { <p>Le suivant sur notre liste, l'élément de formulaire {{htmlelement("label")}} est une des fonctionnalités centrales qui nous permet de rendre les formulaires accessibles. Le problème avec les formulaires c'est que vous avez besoin de libellés pour dire quelle donnée doit être entrée dans chaque champs du formulaire. Chaque libellé doit être inclus dans un {{htmlelement("label")}} pour le relier clairement à son champs partenaire (chaque valeur de l'attribut <code>for</code> de <code><label></code> doit aller avec la valeur de l'<code>id</code> de l'élément du formulaire), et cela aura du sens même si le code source n'est pas totalement logique (ce qui pour être tout à fait juste devrait être fait).</p> <div class="note"> -<p><strong>Note </strong>: Lisez <a href="/en-US/docs/Learn/Accessibility/HTML#Meaningful_text_labels">Meaningful text labels</a>, pour plus d'information à propos des textes de type lien et les libellés des formulaires.</p> +<p><strong>Note :</strong> Lisez <a href="/fr/docs/Learn/Accessibility/HTML#Meaningful_text_labels">Meaningful text labels</a>, pour plus d'information à propos des textes de type lien et les libellés des formulaires.</p> </div> <p>Pour terminer, un mot rapide sur les tableaux de données. Un tableau de données basique peut être écrit avec des indications très simples (voir <code>bad-table.html</code> <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">en direct</a>, et <a href="https://github.com/mdn/learning-area/blob/master/accessibility/html/bad-table.html">la source</a>), mais il y a des problèmes — il n'y a aucun moyen pour un utilisateur de lecteur d'écran d'associer des lignes ou des colonnes ensembles comme un groupe de données — pour faire cela vous devez connaître les lignes d'en-têtes, et si elles se dirigent en lignes, colonnes, etc. Cela ne peut être fait qu'en visuel pour un tel tableau.</p> @@ -205,7 +205,7 @@ a:focus, input:focus, button:focus, select:focus { <p>Si vous regardez plutôt notre exemple <code>punk-band-complete.html</code> (<a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">direct</a>, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">source</a>), vous pouvez voir plusieurs aides à l'accessibilité en place, comme les entêtes de tableau ({{htmlelement("th")}} et les attributs <code>scope</code>), l'élément {{htmlelement("caption")}}, etc.</p> <div class="note"> -<p><strong>Note </strong>: Lisez <a href="/en-US/docs/Learn/Accessibility/HTML#Accessible_data_tables">Accessible data tables</a>, pour plus d'information à propos des tableaux accessibles.</p> +<p><strong>Note :</strong> Lisez <a href="/fr/docs/Learn/Accessibility/HTML#Accessible_data_tables">Accessible data tables</a>, pour plus d'information à propos des tableaux accessibles.</p> </div> <h3 id="CSS">CSS</h3> @@ -227,21 +227,21 @@ a:focus, input:focus, button:focus, select:focus { <p>Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge.</p> <div class="note"> -<p><strong>Note </strong>: un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.</p> +<p><strong>Note :</strong> un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.</p> </div> <h4 id="Cacher_du_contenu">Cacher du contenu</h4> -<p>Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Exemple de boîte d'info avec onglets</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>) nous avons trois panneau d'information, mais nous les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnons</a> les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).</p> +<p>Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Exemple de boîte d'info avec onglets</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>) nous avons trois panneau d'information, mais nous les <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnons</a> les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> +<p><img alt="" src="tabbed-info-box.png"></p> <p>Les utilisateurs de lecteur d'écran ne se soucient pas vraiment de cela — ils sont satisfaits tant que le contenu a du sens dans le code source, et qu'ils peuvent entièrement y accéder. Le positionnement absolute (comme utilisé dans cet exemple) est souvent vu comme l'un des meilleur mécanismes pour cacher du contenu pour des effets visuels, parce que ça n'empêche pas les lecteur d'écran d'y accéder.</p> <p>D'un autre côté, vous ne devriez pas utiliser {{cssxref("visibility")}}<code>:hidden</code> ou {{cssxref("display")}}<code>:none</code>, parce qu'il cache le contenu aux lecteurs d'écran. A moins que, bien entendu, il y est une bonne raison qui justifie que ce contenu soit caché aux lecteurs d'écran.</p> <div class="note"> -<p><strong>Note </strong>: <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> vous décrira beaucoup de détails utilesà propos de ce sujet. </span></p> +<p><strong>Note :</strong> <a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> vous décrira beaucoup de détails utilesà propos de ce sujet. </p> </div> <h3 id="JavaScript">JavaScript</h3> @@ -258,18 +258,18 @@ a:focus, input:focus, button:focus, select:focus { </ul> <div class="note"> -<p><strong>Note </strong>: <a href="http://webaim.org/techniques/javascript/">Accessible JavaScript</a> de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.</p> +<p><strong>Note :</strong> <a href="http://webaim.org/techniques/javascript/">Accessible JavaScript</a> de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.</p> </div> -<p>Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec <a href="https://developer.mozilla.org/fr/Apprendre/WebGL">WebGL</a> accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.</p> +<p>Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec <a href="/fr/Apprendre/WebGL">WebGL</a> accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des <a href="/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.</p> <h4 id="Fonctionnalité_complexe">Fonctionnalité complexe</h4> <p>L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale.</p> -<p>Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <code><div></code>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. <a href="http://getbootstrap.com/">Bootstrap</a> à l'air d'être assez bon pour l'accessibilité, par exemple, bien que <span class="l-d-i l-pa2 t-bg-white"><a href="https://www.sitepoint.com/making-bootstrap-accessible/">Making Bootstrap a Little More Accessible</a> de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.</span></p> +<p>Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <code><div></code>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. <a href="http://getbootstrap.com/">Bootstrap</a> à l'air d'être assez bon pour l'accessibilité, par exemple, bien que <a href="https://www.sitepoint.com/making-bootstrap-accessible/">Making Bootstrap a Little More Accessible</a> de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.</p> -<p>Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API">Fetch</a>, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.</p> +<p>Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.</p> <h4 id="WAI-ARIA">WAI-ARIA</h4> @@ -292,7 +292,7 @@ a:focus, input:focus, button:focus, select:focus { <p>Vous pouvez voir un exemple en action sur l'exemple <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA (Accessible Rich Internet Applications) Live Regions</a> de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm">ARIA Live Regions - Atomic</a> apporte un autre exemple utile.</p> -<p>Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p> +<p>Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p> <h2 id="Les_outils_d'accessibilité">Les outils d'accessibilité</h2> @@ -316,12 +316,12 @@ a:focus, input:focus, button:focus, select:focus { <li>Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.</li> </ol> -<p><img alt="" src="https://mdn.mozillademos.org/files/14217/tenon-screenshot.png" style="border-style: solid; border-width: 1px; display: block; height: 593px; margin: 0px auto; width: 870px;"></p> +<p><img alt="" src="tenon-screenshot.png"></p> <p>Il y a également des options que vous pouvez examiner (voir le lien <em>Show Options</em> vers le haut de la page), ainsi qu'une API pour utiliser Tenon comme un programme.</p> <div class="note"> -<p><strong>Note </strong>: De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.</p> +<p><strong>Note :</strong> De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.</p> </div> <h3 id="Les_outils_d'automatisation">Les outils d'automatisation</h3> @@ -335,11 +335,11 @@ a:focus, input:focus, button:focus, select:focus { <p>Cela ajoute un onglet accessibilité aux outils de développeur du navigateur, nous avons installé la version pour Firefox, puis nous l'avons utilisé pour auditer notre exemple <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a>. Nous obtenons les résultats suivants :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14213/aXe-screenshot.png" style="display: block; height: 580px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="aXe-screenshot.png"></p> <p>aXe est également installable en utilisant <code>npm</code>, et peut-être intégré avec des exécuteurs de tâche comme <a href="http://gruntjs.com/">Grunt</a> et <a href="http://gulpjs.com/">Gulp</a>, des frameworks d'automatisation comme <a href="http://www.seleniumhq.org/">Selenium</a> et <a href="https://cucumber.io/">Cucumber</a>, des framework de test unitaire comme <a href="http://jasmine.github.io/">Jasmin</a>, et d'autres encore (une fois encore, voir la <a href="https://www.deque.com/products/axe/">page principale d'aXe</a> pour plus de détails).</p> -<h3 id="Les_lecteurs_d'écran"><a id="Screenreaders" name="Screenreaders"></a>Les lecteurs d'écran</h3> +<h3 id="Les_lecteurs_d'écran">Les lecteurs d'écran</h3> <p>Il faut définitivement tester avec un lecteur d'écran pour s'habituer à comment les personnes malvoyantes utilisent le Web. Il y a plusieurs lecteurs d'écran disponible : </p> @@ -354,7 +354,7 @@ a:focus, input:focus, button:focus, select:focus { <p>Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux.</p> <div class="note"> -<p><strong>Note </strong>: <a href="http://webaim.org/techniques/screenreader/">Designing for Screen Reader Compatibility</a> de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir <a href="http://webaim.org/projects/screenreadersurvey6/#used">Screen Reader User Survey #6 Results</a> pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.</p> +<p><strong>Note :</strong> <a href="http://webaim.org/techniques/screenreader/">Designing for Screen Reader Compatibility</a> de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir <a href="http://webaim.org/projects/screenreadersurvey6/#used">Screen Reader User Survey #6 Results</a> pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.</p> </div> <h4 id="VoiceOver">VoiceOver</h4> @@ -364,12 +364,12 @@ a:focus, input:focus, button:focus, select:focus { <p>Pour le démarrer, pressez Cmd + Fn + F5. Si vous n'avez jamais utilisé VO auparavant, vous obtiendrez un écran de bienvenue où vous pouvez choisir de démarrer VO ou de ne pas le démarrer, et vous parcourrez un tutoriel utile pour apprendre à comment l'utiliser. Pour l'arrêter, pressez Cmd + Fn + F5 à nouveau.</p> <div class="note"> -<p><strong>Note </strong>: Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.</p> +<p><strong>Note :</strong> Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.</p> </div> <p>Lorsque VO est démarré, l'affichage ressemblera à peu près à cela, mais vous verrez une boîte noire en bas à gauche de l'écran qui contient l'information sur quoi est-ce que VO est actuellement sélectionné. La sélection courante sera également mise en avant, avec une bordure noire — cette mise en avant est connue comme le <strong>curseur VO</strong>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14219/voiceover.png" style="border-style: solid; border-width: 1px; display: block; height: 386px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="voiceover.png"></p> <p>Pour utiliser VO, vous aller beaucoup utiliser le "modificateur VO" — c'est une touche ou une combinaison de touches que vous devez presser en plus de l'actuel raccourci VO pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leur propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de VO, le modificateur peut aussi être VerrMaj, ou Ctrl + Option.</p> @@ -490,7 +490,7 @@ a:focus, input:focus, button:focus, select:focus { <p>Pour utiliser NVDA, vous aller beaucoup utiliser le "modificateur NVDA" — c'est une touche que vous devez presser en plus de l'actuel raccourci NVDA pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leurs propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de NVDA, le modificateur peut aussi être Insert (par défaut), ou VerrMaj (peut être choisi en cochant la première case à cocher dans la boîte de dialogue de bienvenue avant d'appuyer sur <em>OK</em>).</p> <div class="note"> -<p><strong>Note </strong>: NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.</p> +<p><strong>Note :</strong> NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.</p> </div> <p>NVDA a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "NVDA" veut dire "le modificateur NVDA".</p> @@ -635,29 +635,29 @@ a:focus, input:focus, button:focus, select:focus { <h3 id="Test_utilisateur">Test utilisateur</h3> -<p>Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Les_tests_utilisateurs">Test Utilisateur</a> plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.</p> +<p>Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Les_tests_utilisateurs">Test Utilisateur</a> plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.</p> <h2 id="Checklist_de_tests_d'accessibilité">Checklist de tests d'accessibilité</h2> <p>La liste suivante vous fournit une checklist à suivre pour vous assurer de mener à bien les tests d'accessibilité recommandés pour votre projet :</p> <ol> - <li>Assurez-vous que votre HTML est sémantiquement correct au possible. <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#La_validation">Le valider</a> est un bon début, comme utiliser un <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">outil d'Audit</a>.</li> + <li>Assurez-vous que votre HTML est sémantiquement correct au possible. <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#La_validation">Le valider</a> est un bon début, comme utiliser un <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">outil d'Audit</a>.</li> <li>Vérifiez que votre contenu a du sens lorsque le CSS est désactivé.</li> - <li>Assurez-vous que votre fonctionnalité est <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">accessible au clavier</a>. Testez en utilisant Tab, Retour/Entrée, etc.</li> - <li>Assurez-vous que votre contenu non-textuel a un <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">texte alternatif</a>. Un <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">Outil d'audit</a> est bien pour repérer ce type de problèmes.</li> - <li>Assurez-vous que votre <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Color_and_color_contrast">contraste de couleurs</a> est acceptable, en utilisant un outil de vérification approprié.</li> - <li>Assurez-vous que le <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Hiding_content">contenu caché</a> est visible par les lecteurs d'écran.</li> + <li>Assurez-vous que votre fonctionnalité est <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">accessible au clavier</a>. Testez en utilisant Tab, Retour/Entrée, etc.</li> + <li>Assurez-vous que votre contenu non-textuel a un <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">texte alternatif</a>. Un <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">Outil d'audit</a> est bien pour repérer ce type de problèmes.</li> + <li>Assurez-vous que votre <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Color_and_color_contrast">contraste de couleurs</a> est acceptable, en utilisant un outil de vérification approprié.</li> + <li>Assurez-vous que le <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Hiding_content">contenu caché</a> est visible par les lecteurs d'écran.</li> <li>Assurez-vous qu'une fonctionnalité est utilisable sans JavaScript autant que possible.</li> <li>Utilisez ARIA pour améliorer l'accessibilité quand c'est approprié.</li> - <li>Exécutez votre site dans un <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">Outil d'audit</a>.</li> + <li>Exécutez votre site dans un <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">Outil d'audit</a>.</li> <li>Testez avec un lecteur d'écran.</li> <li>Incluez une politique/déclaration d'accessibilité à un endroit que l'on peut trouver sur votre site pour dire ce que vous avez fait.</li> </ol> <h2 id="Trouver_de_l'aide">Trouver de l'aide</h2> -<p>Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Trouver_de_l'aide">la section Trouver de l'aide</a> de l'article sur le HTML et le CSS pour des bonnes directions.</p> +<p>Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Trouver_de_l'aide">la section Trouver de l'aide</a> de l'article sur le HTML et le CSS pour des bonnes directions.</p> <h2 id="Résumé">Résumé</h2> @@ -672,14 +672,14 @@ a:focus, input:focus, button:focus, select:focus { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/">Introduction au test en navigateur croisé</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Stratégies pour mener à bien vos tests</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS">Gérer les problèmes courants en HTML et CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Gérer les problèmes courants en JavaScript</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/fr/docs/">Introduction au test en navigateur croisé</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Stratégies pour mener à bien vos tests</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS">Gérer les problèmes courants en HTML et CSS</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Gérer les problèmes courants en JavaScript</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> <p> </p> diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index a8914efdd9..1b55de47f6 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -17,14 +17,14 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> -<p class="summary">Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le <a href="https://stackoverflow.com/questions/8503559/what-is-linting">linting code</a>, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des <a href="https://developer.mozilla.org/fr/docs/Glossaire/Polyfill">polyfills</a> pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.</p> +<p>Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le <a href="https://stackoverflow.com/questions/8503559/what-is-linting">linting code</a>, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des <a href="/fr/docs/Glossaire/Polyfill">polyfills</a> pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> <td> - <p>Connaissances avec le noyau des langages <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> ; une idée du haut niveau des <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">principes du test en navigateur croisé</a>.</p> + <p>Connaissances avec le noyau des langages <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ; une idée du haut niveau des <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">principes du test en navigateur croisé</a>.</p> </td> </tr> <tr> @@ -44,21 +44,21 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <h2 id="Commençons_par_le_commencement_résoudre_les_problèmes_généraux">Commençons par le commencement : résoudre les problèmes généraux</h2> -<p>Nous disions dans le <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery">premier article de cette série</a> que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.</p> +<p>Nous disions dans le <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery">premier article de cette série</a> que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.</p> -<p>Dans nos articles <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a> et <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.</p> +<p>Dans nos articles <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a> et <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.</p> <p>Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe.</p> <div class="note"> -<p><strong>Note </strong>: Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "<a href="https://developer.mozilla.org/fr/docs/Glossaire/Namespace">espace de noms</a>" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple <code>.audio-player ul a</code>.</p> +<p><strong>Note :</strong> Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "<a href="/fr/docs/Glossaire/Namespace">espace de noms</a>" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple <code>.audio-player ul a</code>.</p> </div> <h3 id="La_validation">La validation</h3> <p>Pour le HTML, la validation implique de s'assurer que toutes vos balises sont correctement fermées et imbriquées, que vous utilisez un DOCTYPE, et que vous utilisez les balises à leur fin prévue. Une bonne stratégie est de valider régulièrement votre code. On service qui peut le faire est le W3C <a href="https://validator.w3.org/">Markup Validation Service</a>, qui vous permet de montrer votre code, et retourne une liste d'erreurs :</p> -<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="The HTML validator homepage" src="validator.png"></p> <p>Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un <a class="external external-icon" href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> également disponible à cet effet.</p> @@ -68,7 +68,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <p>Il y a beaucoup d'applications linter en ligne, les meilleures d'entre elles sont probablement <a href="https://www.dirtymarkup.com/">Dirty Markup</a> (HTML, CSS, JavaScript), et <a href="http://csslint.net/">CSS Lint</a> (seulement CSS). Elles vous permettent de coller votre code dans une fenêtre, et mettront en évidence toutes les erreurs avec des croix, qui peuvent être survolées pour obtenir un message d'erreur décrivant le problème. Dirty Markup vous permet également de faire des fixs dans votre code en utilisant le bouton <em>Clean</em>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14113/dirty-markup.png" style="border-style: solid; border-width: 1px; display: block; height: 203px; margin: 0px auto; width: 1204px;"></p> +<p><img alt="" src="dirty-markup.png"></p> <p>Néanmoins, ce n'est pas très pratique de devoir copier et coller votre code dans une page web pour vérifier sa validité plusieurs fois. Ce dont vous avez vraiment besoin c'est d'un linter qui s'installera dans votre espace de travail standard avec le minimum de prise de tête.</p> @@ -86,7 +86,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS -<p><img alt="" src="https://mdn.mozillademos.org/files/14109/atom-htmltidy.png" style="display: block; margin: 0 auto;"><img alt="" src="https://mdn.mozillademos.org/files/14107/atom-csslint.png" style="display: block; height: 516px; margin: 0px auto; width: 700px;"></p> +<p><img alt="" src="atom-htmltidy.png"><img alt="" src="atom-csslint.png"></p> <p>D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple :</p> @@ -100,12 +100,12 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <p>Les outils de développement inclus dans la plupart des navigateurs fournissent également des outils pour traquer les erreurs, en particulier pour le CSS.</p> <div class="note"> -<p><strong>Note</strong> : Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.</p> +<p><strong>Note :</strong> Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.</p> </div> <p>As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14111/css-message-devtools.png" style="display: block; height: 311px; margin: 0px auto; width: 451px;"></p> +<p><img alt="" src="css-message-devtools.png"></p> <p>Les outils de dev des autres navigateurs ont des fonctionnalités semblables.</p> @@ -115,7 +115,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <h3 id="Les_vieux_navigateurs_ne_supportant_pas_les_fonctionnalités_récentes">Les vieux navigateurs ne supportant pas les fonctionnalités récentes</h3> -<p>C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, ou <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, ou encore plus récent, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> ou <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p> +<p>C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, ou <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, ou encore plus récent, <a href="/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> ou <a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p> <p>Une fois que vous avez identifié une liste des potentielles technologies à problèmes que vous allez utiliser, c'est une bonne initiative des rechercher sur quels navigateurs elles sont supportées, et quelles techniques associées sont utiles. Voir {{anch("Finding help")}} plus bas.</p> @@ -123,41 +123,41 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <p>Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.</p> -<p>Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer <code><span style="font-size: 10.0pt;">display: block;</span></code> sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.</p> +<p>Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer <code>display: block;</code> sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.</p> <div class="note"> -<p><strong>Note </strong>: Voir {{anch("IE conditional comments")}} pour une application efficace.</p> +<p><strong>Note :</strong> Voir {{anch("IE conditional comments")}} pour une application efficace.</p> </div> -<p>Des éléments HTML plus complexes comme <a href="/en-US/docs/Web/HTML/Element/video"><span style='font-family: "Courier New"; font-size: 10.0pt;'><video></span></a>, <a href="/en-US/docs/Web/HTML/Element/audio"><span style='font-family: "Courier New"; font-size: 10.0pt;'><audio></span></a>, et <a href="/en-US/docs/Web/HTML/Element/canvas"><span style='font-family: "Courier New"; font-size: 10.0pt;'><canvas></span></a> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.</p> +<p>Des éléments HTML plus complexes comme <a href="/fr/docs/Web/HTML/Element/video"><video></a>, <a href="/fr/docs/Web/HTML/Element/audio"><audio></a>, et <a href="/fr/docs/Web/HTML/Element/canvas"><canvas></a> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.</p> <p>Par exemple :</p> -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video<span class="punctuation token">"</span></span> <span class="attr-name token">controls</span> <span class="attr-name token">preload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>metadata<span class="punctuation token">"</span></span> <span class="attr-name token">poster</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img/poster.jpg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"> <</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.webm<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/webm<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.ogg<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/ogg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="comment token"><!-- Flash fallback --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>object</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/x-shockwave-flash<span class="punctuation token">"</span></span> <span class="attr-name token">data</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flash-player.swf?videoUrl<span class="punctuation token">=</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1024<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>576<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>movie<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flash-player.swf?videoUrl<span class="punctuation token">=</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>allowfullscreen<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>wmode<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flashvars<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controlbar<span class="punctuation token">=</span>over&amp;image<span class="punctuation token">=</span>img/poster.jpg&amp;file<span class="punctuation token">=</span>flash-player.swf?videoUrl<span class="punctuation token">=</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Tears of Steel poster image<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img/poster.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1024<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>428<span class="punctuation token">"</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>No video playback possible, please download the video from the link below<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>object</span><span class="punctuation token">></span></span> - <span class="comment token"><!-- Offer download --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Download MP4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> - -<p>Cette exemple (issu de <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.</p> +<pre class="brush: html"><video id="video" controls preload="metadata" poster="img/poster.jpg"> + <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> + <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> + <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> + <!-- Flash fallback --> + <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> + <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" /> + <param name="allowfullscreen" value="true" /> + <param name="wmode" value="transparent" /> + <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" /> + <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" /> + </object> + <!-- Offer download --> + <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a> +</video></pre> + +<p>Cette exemple (issu de <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.</p> <div class="note"> -<p><strong>Note</strong> : les librairies tierces comme <a href="http://videojs.com/">Video.js</a> et <a href="https://www.jwplayer.com/">JW Player</a> utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.</p> +<p><strong>Note :</strong> les librairies tierces comme <a href="http://videojs.com/">Video.js</a> et <a href="https://www.jwplayer.com/">JW Player</a> utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.</p> </div> -<p>Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.</p> +<p>Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<code><a href="/fr/docs/Web/HTML/Element/input"><input></a></code> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.</p> <p>L'exemple suivant montre des inputs date et time :</p> @@ -172,12 +172,11 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS </div> </form></pre> -<p>Le résultat de ce code est le suivant :</p> +<h5>Résultat </h5> -<div class="hidden"> -<h6 id="Hidden_example">Hidden example</h6> +<p>Le résultat de ce code est le suivant :</p> -<pre class="brush: css">label { +<pre class="brush: css hidden">label { float: left; width: 30%; text-align: right; @@ -204,7 +203,7 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS -<pre class="brush: html"><form> +<pre class="brush: html hidden"><form> <div> <label for="date">Enter a date:</label> <input id="date" type="date"> @@ -214,12 +213,11 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <input id="time" type="time"> </div> </form></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_example', '100%', 150) }}</p> +<p>{{ EmbedLiveSample('Résultat', '100%', 150) }}</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez également le voir exécuté en direct depuis <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html">forms-test.html</a> sur GitHub (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/forms-test.html">code source</a>).</p> +<p><strong>Note :</strong> Vous pouvez également le voir exécuté en direct depuis <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html">forms-test.html</a> sur GitHub (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/forms-test.html">code source</a>).</p> </div> <p>Si vous consultez l'exemple sur un navigateur qui supporte les technologies récentes comme Android Chrome ou iOS Safari, vous verrez le widget/fonctionnalité spécial en action quand vous essaierai de saisir des données. Sur des plateformes non compatibles comme Firefox ou Internet Explorer, les inputs vont juste recourir à un input texte normal, finalement l'utilisateur peut toujours entrer des informations.</p> @@ -229,15 +227,14 @@ original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS <h4 id="Comportement_naturel_du_CSS">Comportement naturel du CSS</h4> - <p>Le CSS est sans doute meilleur en solution de recours que le HTML. Si un navigateur rencontre une déclaration ou une règle qu'il ne comprend pas, il la passe complètement sans l'appliquer ou provoquer une erreur. Cela peut être frustrant pour vous et vos utilisateurs si de telles erreurs se glissent à travers le code en production, mais au moins cela veut dire que l'ensemble du site ne va pas crasher à cause d'une erreur, et si utilisé intelligemment vous pouvez vous en servir à votre avantage.</p> <p>Observons un exemple — une simple boîte stylée avec du CSS, qui a certains styles apportés par différentes caractéristiques CSS3 :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14141/blingy-button.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="blingy-button.png"></p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">button-with-fallback.html</a> (voir aussi le <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">code source</a>).</p> +<p><strong>Note :</strong> Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">button-with-fallback.html</a> (voir aussi le <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">code source</a>).</p> </div> <p>Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes :</p> @@ -260,29 +257,29 @@ button:active { inset -1px -1px 3px rgba(255,255,255,0.4); }</pre> -<p>Ici on fournit un {{cssxref("background-color")}} <a href="/en-US/docs/Web/CSS/color_value#rgba()">RGBA</a> qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !</p> +<p>Ici on fournit un {{cssxref("background-color")}} <a href="/fr/docs/Web/CSS/color_value#rgba()">RGBA</a> qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14135/unreadable-button.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="unreadable-button.png"></p> <p>Pour résoudre ce problème, nous avons ajouté une deuxième déclaration <code>background-color</code>, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur <code>background-color</code> ; lorsqu'il sélectionne la deuxième déclaration <code>background-color</code>, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.</p> <div class="note"> -<p><strong>Note </strong>: Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="/en-US/docs/Web/CSS/@font-face">@font-face</a></code> et <code><a href="/en-US/docs/Web/CSS/@supports">@supports</a></code> — s'ils ne sont pas supportés, le navigateur va juste les ignorer.</p> +<p><strong>Note :</strong> Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> et <code><a href="/fr/docs/Web/CSS/@supports">@supports</a></code> — s'ils ne sont pas supportés, le navigateur va juste les ignorer.</p> </div> <h4 id="Les_commentaires_conditionnels_dIE">Les commentaires conditionnels d'IE</h4> <p>Les commentaires conditionnels d'IE sont une propriété modifiée de la syntaxe des commentaires HTML, qui peuvent être utilisés pour appliquer du code HTML de manière sélective à différentes versions d'IE. Cela s'est avéré être un mécanisme très efficace pour résoudre les bugs en navigateur croisé. La syntaxe ressemble à ça :</p> -<pre class="brush: html"><span class="c"><!--[if lte IE 8]> - <script src="ie-fix.js"></script></span> +<pre class="brush: html"><!--[if lte IE 8]> + <script src="ie-fix.js"></script> <link href="ie-fix.css" rel="stylesheet" type="text/css"> -<span class="c"><![endif]--></span></pre> +<![endif]--></pre> <p>Ce block appliquera les CSS et Javascript spécifiques à IE uniquement si le navigateur qui affiche la page est IE 8 ou plus vieux. <code>lte</code> veux dire "moins que ou égal", mais vous pouvez aussi utiliser lt, gt, gte, <code>!</code> pour NOT, et d'autre syntaxe logique.</p> <div class="note"> -<p><strong>Note </strong>: L'article <span class="l-d-i l-pa2 t-bg-white"><a href="https://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/">Internet Explorer Conditional Comments</a> de </span>Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.</p> +<p><strong>Note :</strong> L'article <a href="https://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/">Internet Explorer Conditional Comments</a> de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.</p> </div> <p>Comme vous pouvez le voir, c'est particulièrement utile pour appliquer des fixes aux vieilles versions d'IE. Le cas d'usage que nous avons mentionné plus tôt (rendre les éléments sémantiques modernes stylables sur les vieilles versions d'IE) peut être atteint facilement en utilisant des commentaires conditionnels, par exemple vous pouvez mettre quelque chose comme ça dans votre feuille de style IE :</p> @@ -300,11 +297,11 @@ button:active { <h4 id="Support_de_sélecteur">Support de sélecteur</h4> -<p>Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">sélecteurs</a> pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.</p> +<p>Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors">sélecteurs</a> pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.</p> <p>Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14139/dom-breadcrumb-trail.png" style="display: block; height: 24px; margin: 0px auto; width: 448px;"></p> +<p><img alt="" src="dom-breadcrumb-trail.png"></p> <p>Si pour cet exemple vous essayez d'utiliser ce sélecteur, vous vous rendrez compte qu'il ne sélectionnera pas l'élément input comme désiré :</p> @@ -312,7 +309,7 @@ button:active { <p>(L'input <code>date</code> du formulaire n'est pas directement dans le <code><form></code> ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant).</p> -<p>Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme <code><a href="/en-US/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="/en-US/docs/Web/CSS/:not">:not</a></code>, <code><a href="/en-US/docs/Web/CSS/::selection">::selection</a></code>, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie <a href="http://selectivizr.com/">Selectivizr</a> de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme <a href="http://jquery.com/">jQuery</a> ou <a href="http://mootools.net/">MooTools</a>.</p> +<p>Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme <code><a href="/fr/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="/fr/docs/Web/CSS/:not">:not</a></code>, <code><a href="/fr/docs/Web/CSS/::selection">::selection</a></code>, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie <a href="http://selectivizr.com/">Selectivizr</a> de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme <a href="http://jquery.com/">jQuery</a> ou <a href="http://mootools.net/">MooTools</a>.</p> <ol> <li>Afin de tester cet exemple, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html">selectivizr-example-start.html</a>. Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec <code>p:first-child</code>, qui ne fonctionne pas sur les anciennes versions d'IE.</li> @@ -327,7 +324,7 @@ button:active { <p>Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14137/new-selector-ie7.png" style="border-style: solid; border-width: 1px; display: block; height: 516px; margin: 0px auto; width: 771px;"></p> +<p><img alt="" src="new-selector-ie7.png"></p> <h4 id="Gestion_des_préfixes_CSS">Gestion des préfixes CSS</h4> @@ -350,7 +347,7 @@ background-image: linear-gradient(to right,green,yellow); <p>La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe <code>-webkit-</code> — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).</p> -<p>Les trois dernières images montrent trois versions différentes de la fonction <code><a href="/en-US/docs/Web/CSS/linear-gradient">linear-gradient()</a></code>, qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :</p> +<p>Les trois dernières images montrent trois versions différentes de la fonction <code><a href="/fr/docs/Web/CSS/linear-gradient">linear-gradient()</a></code>, qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :</p> <ol> <li>La première a un préfixe <code>-moz-</code>, et montre une version plutôt ancienne de la syntaxe (Firefox)</li> @@ -371,7 +368,7 @@ background-image: linear-gradient(to right,green,yellow); <li>Entreposer une référence à cet élément dans une variable, par exemple : <pre class="brush: js">var test = document.getElementById('hplogo');</pre> </li> - <li>Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété <a href="/en-US/docs/Web/API/HTMLElement/style">style</a> de l'élément, par exemple essayez de taper ça dans votre console Javascript :</li> + <li>Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété <a href="/fr/docs/Web/API/HTMLElement/style">style</a> de l'élément, par exemple essayez de taper ça dans votre console Javascript :</li> <li> <pre class="brush: js">test.style.transform = 'rotate(90deg)' test.style.webkitTransform = 'rotate(90deg)'</pre> @@ -434,22 +431,22 @@ transform: rotate(90deg);</pre> </ul> <div class="note"> -<p><strong>Note</strong> : Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le <a href="https://necolas.github.io/normalize.css/">normalize.css</a>, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.</p> +<p><strong>Note :</strong> Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le <a href="https://necolas.github.io/normalize.css/">normalize.css</a>, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.</p> </div> <div class="note"> -<p><strong>Note </strong>: Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir <a href="http://www.otsukare.info/2016/10/05/debugging-css" rel="bookmark" title="Permalink to Debug your CSS with outline visualizations.">Debug your CSS with outline visualizations</a> pour plus de détails...</p> +<p><strong>Note :</strong> Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir <a href="http://www.otsukare.info/2016/10/05/debugging-css" rel="bookmark" title="Permalink to Debug your CSS with outline visualizations.">Debug your CSS with outline visualizations</a> pour plus de détails...</p> </div> <h4 id="Support_pour_les_nouvelles_caractéristiques_de_disposition">Support pour les nouvelles caractéristiques de disposition</h4> -<p>La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a> — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p> +<p>La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">floats</a> — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p> -<p>Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> et <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :</p> +<p>Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> et <a href="/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :</p> <ul> <li>Les grilles CSS sont très récentes ; au moment de la rédaction, elles n'étaient <a href="http://gridbyexample.com/browsers/">supportées</a> que par les toutes nouvelles versions des navigateurs modernes.</li> - <li>Flexbox est <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">bien supportée</a> dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> pour vous faire une idée).</li> + <li>Flexbox est <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">bien supportée</a> dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> pour vous faire une idée).</li> </ul> <p>Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir).</p> @@ -457,14 +454,14 @@ transform: rotate(90deg);</pre> <p>Par exemple, vous pourriez appliquer une disposition flexbox sur les navigateurs modernes, et aussi appliquer une disposition en float pour les plus vieux navigateurs qui ne supportent pas flexbox.</p> <div class="note"> -<p><strong>Note </strong>: Il y a une fonctionnalité assez récente en CSS appelé <code><a href="/en-US/docs/Web/CSS/@supports">@supports</a></code>, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.</p> +<p><strong>Note :</strong> Il y a une fonctionnalité assez récente en CSS appelé <code><a href="/fr/docs/Web/CSS/@supports">@supports</a></code>, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.</p> </div> <h4 id="Les_problèmes_de_responsive_design">Les problèmes de responsive design</h4> -<p>Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a>, et assurez-vous qu'il est appliqué correctement en utilisant <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. Vous pouvez trouver un bilan précis de telles pratiques dans <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p> +<p>Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les <a href="/fr/docs/Web/CSS/Media_Queries">media queries</a>, et assurez-vous qu'il est appliqué correctement en utilisant <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. Vous pouvez trouver un bilan précis de telles pratiques dans <a href="/fr/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p> -<p>La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples <a href="/en-US/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, aux plus complexes <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p> +<p>La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples <a href="/fr/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, aux plus complexes <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p> <p>Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme <a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a> ou <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p> @@ -477,14 +474,14 @@ transform: rotate(90deg);</pre> <p>Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles :</p> <ul> - <li>Du contenu de référence sur le support navigateur pour les technologies web côté client, par ex. la <a href="/en-US/docs/Web/HTML/Element/video">page de référence <video></a>.</li> - <li>D'autres références de support, par ex. <a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li> - <li>Des tutoriaux utiles qui résolvent des problèmes spécifiques, par exemple <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Créer un lecteur vidéo en navigateur croisé</a>.</li> + <li>Du contenu de référence sur le support navigateur pour les technologies web côté client, par ex. la <a href="/fr/docs/Web/HTML/Element/video">page de référence <video></a>.</li> + <li>D'autres références de support, par ex. <a href="/fr/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li> + <li>Des tutoriaux utiles qui résolvent des problèmes spécifiques, par exemple <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Créer un lecteur vidéo en navigateur croisé</a>.</li> </ul> <p><a href="http://caniuse.com/">caniuse.com</a> fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir <a href="http://caniuse.com/#search=video">http://caniuse.com/#search=video</a> (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)</p> -<p><a href="http://stackoverflow.com/">stackoverflow.com</a> (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution <a class="question-hyperlink" href="http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility">HTML5 Video with full cross browser compatibility</a> est remontée.</p> +<p><a href="http://stackoverflow.com/">stackoverflow.com</a> (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution <a href="http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility">HTML5 Video with full cross browser compatibility</a> est remontée.</p> <p>Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous</p> @@ -499,12 +496,12 @@ transform: rotate(90deg);</pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/index.html index 22d0837e04..4aa0ab6aaa 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/index.html +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/index.html @@ -20,29 +20,29 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing --- <div>{{LearnSidebar}}</div> -<p class="summary">Ce module se concentre sur le test de projets Web sur différents navigateurs. Nous cherchons à identifier votre public cible (par exemple, de quels utilisateurs, navigateurs et appareils avez-vous le plus besoin de vous soucier?), comment procéder aux tests, les principaux problèmes auxquels vous serez confronté avec différents types de code et comment les atténuer, quels outils sont les plus utiles pour vour aider à tester et résoudre les problèmes, et comment utiliser l'automatisation pour accélérer les tests.</p> +<p>Ce module se concentre sur le test de projets Web sur différents navigateurs. Nous cherchons à identifier votre public cible (par exemple, de quels utilisateurs, navigateurs et appareils avez-vous le plus besoin de vous soucier?), comment procéder aux tests, les principaux problèmes auxquels vous serez confronté avec différents types de code et comment les atténuer, quels outils sont les plus utiles pour vour aider à tester et résoudre les problèmes, et comment utiliser l'automatisation pour accélérer les tests.</p> <h2 id="Prérequis">Prérequis</h2> -<p>Vous devez vraiment apprendre les bases des langages <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> de base avant d'essayer d'utiliser les outils détaillés ici.</p> +<p>Vous devez vraiment apprendre les bases des langages <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> de base avant d'essayer d'utiliser les outils détaillés ici.</p> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction aux tests multi-navigateurs</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction aux tests multi-navigateurs</a></dt> <dd>Cet article débute le module en donnant un aperçu du sujet des tests multi-navigateurs, en répondant à des questions telles que "qu'est-ce que les tests multi-navigateurs?", "quels sont les types de problèmes les plus courants que vous rencontrerez?", et "quelles sont les principales approches pour tester, identifier et résoudre les problèmes?"</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Stratégies de réalisation des tests</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Stratégies de réalisation des tests</a></dt> <dd>Ensuite, nous explorons la réalisation de tests, en cherchant à identifier un public cible (par exemple, quels navigateurs, appareils et autres segments devez-vous vous assurer qu'ils soient testés), des stratégies de test low fi (procurez-vous une gamme d'appareils et de machines virtuelles et faire des tests adhoc si nécessaire), des stratégies de haute technologie (automatisation, utilisation d'applications de test dédiées), et des tests avec des groupes d'utilisateurs.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Gérer les problèmes HTML et CSS courants</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Gérer les problèmes HTML et CSS courants</a></dt> <dd>Nous allons maintenant examiner spécifiquement les problèmes courants entre navigateurs que vous rencontrerez dans le code HTML et CSS, et quels outils peuvent être utilisés pour éviter les problèmes ou résoudre les problèmes qui se produisent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation d'outils de développement de navigateur pour localiser les problèmes, utiliser des polyfills pour ajouter un support dans les navigateurs, résoudre les problèmes de design responsive, etc.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Gestion des problèmes JavaScript courants</a></dt> - <dd>Nous allons maintenant examiner les problèmes JavaScript courants entre navigateurs et comment les résoudre. Cela inclu des informations sur l'utilisation des outils de développement de navigateur pour localiser et résoudre les problèmes, l'utilisation de polyfills et de librairies pour contourner les problèmes, la mise en <span class="tlid-translation translation" lang="fr"><span title="">œuvre</span></span> des fonctionnalités JavaScript modernes dans les navigateurs plus anciens, etc.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Gérer les problèmes d'accessibilité courants</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Gestion des problèmes JavaScript courants</a></dt> + <dd>Nous allons maintenant examiner les problèmes JavaScript courants entre navigateurs et comment les résoudre. Cela inclu des informations sur l'utilisation des outils de développement de navigateur pour localiser et résoudre les problèmes, l'utilisation de polyfills et de librairies pour contourner les problèmes, la mise en œuvre des fonctionnalités JavaScript modernes dans les navigateurs plus anciens, etc.</dd> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Gérer les problèmes d'accessibilité courants</a></dt> <dd>Ensuite, nous tournons notre attention vers l'accessibilité, en fournissant des informations sur les problèmes courants, comment faire des tests simples, et comment utiliser les outils d'audit / d'automatisation pour trouver les problèmes d'accessibilité.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implémentation de la détection des fonctionnalités</a></dt> - <dd>La détection de fonctionnalités implique de déterminer si un navigateur prend en charge un certain bloc de code et d'exécuter un code différent selon qu'il le fait (ou non), afin que le navigateur puisse toujours fournir une expérience de travail plutôt en panne / erreur dans certains navigateurs. Cet article explique comment écrire votre propre détection de fonctionnalités simple, comment utiliser une librairie pour accélérer la mise en <span class="tlid-translation translation" lang="fr"><span title="">œuvre</span></span> et des fonctionnalités natives pour la détection de fonctionnalités telles que <code>@supports</code>.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction aux tests automatisés</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implémentation de la détection des fonctionnalités</a></dt> + <dd>La détection de fonctionnalités implique de déterminer si un navigateur prend en charge un certain bloc de code et d'exécuter un code différent selon qu'il le fait (ou non), afin que le navigateur puisse toujours fournir une expérience de travail plutôt en panne / erreur dans certains navigateurs. Cet article explique comment écrire votre propre détection de fonctionnalités simple, comment utiliser une librairie pour accélérer la mise en œuvre et des fonctionnalités natives pour la détection de fonctionnalités telles que <code>@supports</code>.</dd> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction aux tests automatisés</a></dt> <dd>Exécuter manuellement des tests sur plusieurs navigateurs et appareils, plusieurs fois par jour, peut devenir fastidieux et prendre du temps. Pour gérer cela efficacement, vous devez vous familiariser avec les outils d'automatisation. Dans cet article, nous examinons ce qui est disponible, comment utiliser les exécuteurs de tâches et les bases de l'utilisation des applications d'automatisation de test de navigateur commerciales telles que Sauce Labs et Browser Stack.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Configuration de votre propre environnement d'automatisation de test</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Configuration de votre propre environnement d'automatisation de test</a></dt> <dd>Dans cet article, nous allons vous apprendre à installer votre propre environnement d'automatisation et à exécuter vos propres tests à l'aide de Selenium/WebDriver et d'une librairie de test telle que selenium-webdriver pour Node. Nous verrons également comment intégrer votre environnement de test local avec des applications commerciales telles que celles décrites dans l'article précédent.</dd> </dl> diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html index 64ee2e66ef..bfd78a3d43 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html @@ -13,13 +13,13 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <div>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> -<p class="summary">Cet article commence en donnant un aperçu sur le sujet des test sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé?", "Quels sont les problèmes les plus communs que vous allez rencontrer?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes?"</p> +<p>Cet article commence en donnant un aperçu sur le sujet des test sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé?", "Quels sont les problèmes les plus communs que vous allez rencontrer?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes?"</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Etre familier avec les bases des langage <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> + <td>Etre familier avec les bases des langage <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -41,22 +41,22 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p>Souvenez-vous que vous n'êtes pas votre utilisateur — uniquement parce que votre site fonctionne sur votre Macbook Pro ou votre Galaxy Nexus haut de gamme, cela ne veut pas dire qu'il fonctionnera pour tout vos utilisateurs — Il y a encore un paquet de tests à effectuer !</p> <div class="note"> -<p><strong>Note</strong>: <a href="https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/">Make the web work for everyone</a> fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs.</p> +<p><strong>Note :</strong> <a href="https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/">Make the web work for everyone</a> fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs.</p> </div> <p>Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail.</p> <p>D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site.</p> -<p>De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web.</p> +<p>De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web.</p> <div class="note"> -<p><strong>Note</strong>: Nous traiterons également du code préventif dans ce module.</p> +<p><strong>Note :</strong> Nous traiterons également du code préventif dans ce module.</p> </div> <h2 id="Pourquoi_y'a-t-il_des_problèmes_en_navigateur_croisé">Pourquoi y'a-t-il des problèmes en navigateur croisé?</h2> -<p>Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateur croisé, et notez qu'ici nous parlons des bug qui se comportent différemment selon les navigateurs / supports / préférences de navigateurs. Avant même d'attaquer les problèmes en navigateurs croisés, commencez déjà par fixer encore et encore tous les bugs présents dans votre propre code (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, et <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a> des sujets précédents afin de vous rafraichir la mémoire si nécessaire).</p> +<p>Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateur croisé, et notez qu'ici nous parlons des bug qui se comportent différemment selon les navigateurs / supports / préférences de navigateurs. Avant même d'attaquer les problèmes en navigateurs croisés, commencez déjà par fixer encore et encore tous les bugs présents dans votre propre code (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, et <a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a> des sujets précédents afin de vous rafraichir la mémoire si nécessaire).</p> <p>Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que :</p> @@ -95,7 +95,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p>Vous devriez mettre en place une liste des différents champs de problèmes potentiels.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter <a href="http://caniuse.com/">caniuse.com</a>, pour d'autres détails utiles.</p> +<p><strong>Note :</strong> Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter <a href="http://caniuse.com/">caniuse.com</a>, pour d'autres détails utiles.</p> </div> <p>Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site.</p> @@ -126,7 +126,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p>A cet instant, résolvez tous les problèmes que vous avez trouvé sur votre nouveau code.</p> -<p>Ensuite, vous devriez essayer d'étendre votre liste de navigaturs de test à une liste complète des navigateurs du public cible et commencer à vous concentrer sur l'élimination des problèmes en navigateurs croisés (voir le prochaine article <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">determining your target browsers</a> pour plus d'informations). Par exemple:</p> +<p>Ensuite, vous devriez essayer d'étendre votre liste de navigaturs de test à une liste complète des navigateurs du public cible et commencer à vous concentrer sur l'élimination des problèmes en navigateurs croisés (voir le prochaine article <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">determining your target browsers</a> pour plus d'informations). Par exemple:</p> <ul> <li>Essayez de tester vos dernières modifications sur tous les navigateurs modernes que vous pouvez — incluant Firefox, Chrome, Opera, IE, Edge, et Safari sur ordinateur (Mac, Windows, et Linux, idéallement).</li> @@ -171,7 +171,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <p>Ce n'est pas forcément de votre faute — si un bug existe sur un navigateur, alors on peut espérer que le distributeur le fixera rapidement. Il est peut-être même déjà réparé — par exemple si un bug est présent sur la release 49 de Firefox, mais qu'il n'existe plus sur Firefox Nightly (version52), alors il a été fixé. S'il n'a pas été résolu, alors vous pouvez déposer un bug (voir {{anch("Reporting bugs")}}, plus bas).</p> -<p>Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, et <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.</p> +<p>Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, et <a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.</p> <p>Lorsque le fix a été créé, vous devrez repéter votre processus de test afin de vous assurer que votre réparation fonctionne bien, et n'a pas causé une faille autre part sur le site ou sur un autre navigateur.</p> @@ -196,12 +196,12 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction <h2 id="Sur_ce_module">Sur ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html index 956c757ad4..d49fe44c33 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html @@ -17,14 +17,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript <div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> -<p class="summary">Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.</p> +<p>Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> <td> - <p>Connaissances de la base des langages <a href="https://developer.mozilla.org/fr/Apprendre/HTML">HTML</a>, <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> ; une idée du haut niveau des <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">principes du test en navigateur croisé</a>.</p> + <p>Connaissances de la base des langages <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ; une idée du haut niveau des <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">principes du test en navigateur croisé</a>.</p> </td> </tr> <tr> @@ -40,44 +40,44 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript <p>Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs.</p> -<p>De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans <a href="https://developer.mozilla.org/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Lancement d'une requête HTTP</a>) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir <code><a href="http://api.jquery.com/jquery.ajax/">jQuery.ajax()</a></code>). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire.</p> +<p>De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans <a href="/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Lancement d'une requête HTTP</a>) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir <code><a href="http://api.jquery.com/jquery.ajax/">jQuery.ajax()</a></code>). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire.</p> -<p class="entry-title">Les choses se sont bien améliorées depuis ; les navigateurs modernes font un bon travail en supportant "les fonctionnalités classiques de JavaScript", et les conditions pour utiliser ce genre de code ont diminué comme les prérequis pour supporter les plus vieux navigateurs ont diminué (gardez toutefois à l'esprit qu'elles n'ont pas tout entièrement disparues).</p> +<p>Les choses se sont bien améliorées depuis ; les navigateurs modernes font un bon travail en supportant "les fonctionnalités classiques de JavaScript", et les conditions pour utiliser ce genre de code ont diminué comme les prérequis pour supporter les plus vieux navigateurs ont diminué (gardez toutefois à l'esprit qu'elles n'ont pas tout entièrement disparues).</p> -<p class="entry-title">De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont :</p> +<p>De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont :</p> <ul> - <li>Lorsque la mauvaise qualité du détecteur de code du navigateur, la fonctionnalité de détection de code ou l'utilisation des <a href="https://developer.mozilla.org/fr/docs/Glossaire/Pr%C3%A9fixe_Vendeur">préfixes vendeurs</a> empêchent les navigateurs d'exécuter du code qu'autrement ils pourraient utiliser sans difficultés.</li> - <li>Lorsque les développeurs se servent de fonctionnalités nouvelles/naissantes JavaScript (par exemple les fonctionnalités <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a> / <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next</a>, les APIs web modernes...) dans leur code, et trouvent que de telles fonctionnalités ne marchent pas sur d'anciens navigateurs.</li> + <li>Lorsque la mauvaise qualité du détecteur de code du navigateur, la fonctionnalité de détection de code ou l'utilisation des <a href="/fr/docs/Glossaire/Pr%C3%A9fixe_Vendeur">préfixes vendeurs</a> empêchent les navigateurs d'exécuter du code qu'autrement ils pourraient utiliser sans difficultés.</li> + <li>Lorsque les développeurs se servent de fonctionnalités nouvelles/naissantes JavaScript (par exemple les fonctionnalités <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a> / <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next</a>, les APIs web modernes...) dans leur code, et trouvent que de telles fonctionnalités ne marchent pas sur d'anciens navigateurs.</li> </ul> <p>Nous aborderons tout ces problèmes et d'autres encore plus bas.</p> <h2 id="Résoudre_les_problèmes_généraux_en_JavaScript">Résoudre les problèmes généraux en JavaScript</h2> -<p>Comme nous le disions dans l'<a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Commen%C3%A7ons_par_le_commencement_r%C3%A9soudre_les_probl%C3%A8mes_g%C3%A9n%C3%A9raux">article précédent</a> sur le HTML/CSS, vous devriez vous assurer que votre code fonctionne en général, avant de vous concentrer sur les problèmes en navigateur-croisé. Si vous n'êtes pas encore trop familier avec les bases de <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">La résolution JavaScript</a>, vous devriez étudier cet article avant de continuer. Il y a plusieurs problèmes courants en JavaScript avec lesquelles vous devez être attentif, comme :</p> +<p>Comme nous le disions dans l'<a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Commen%C3%A7ons_par_le_commencement_r%C3%A9soudre_les_probl%C3%A8mes_g%C3%A9n%C3%A9raux">article précédent</a> sur le HTML/CSS, vous devriez vous assurer que votre code fonctionne en général, avant de vous concentrer sur les problèmes en navigateur-croisé. Si vous n'êtes pas encore trop familier avec les bases de <a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">La résolution JavaScript</a>, vous devriez étudier cet article avant de continuer. Il y a plusieurs problèmes courants en JavaScript avec lesquelles vous devez être attentif, comme :</p> <ul> - <li>Les problèmes basiques de syntaxe et de logique (une fois encore, aller voir <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">La résolution JavaScript</a>).</li> - <li>Définir des variables sûres, etc. qui sont défnies dans le périmètre correct, et que vous ne rencontrez pas des conflits entre des items déclarés à des endroits différents (voir <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">Function scope and conflicts</a>).</li> - <li>La confusion à propos de <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a>, concernant le périmètre auquel il s'applique, et par conséquent si sa valeur et celle que vous souhaitiez. Vous pouvez lire <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics#Qu'est-ce_que_%C2%AB_this_%C2%BB">Qu'est-ce que "this" ?</a> pour une simple introduction ; vous devriez également étudier des exemples comme <a href="https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143">this one</a>, qui présente un modèle typique de sauvegarde du périmètre de <code>this</code> dans une variable séparée, puis utilise cette variable dans une fonction imbriquée pour que vous soyez sûr que vous appliquez la fonction au bon périmètre de <code>this</code>.</li> - <li>Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html">bad-for-loop.html</a> (voir <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html">code source</a>), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire <a href="https://developer.mozilla.org/fr/docs/Web/API/GlobalEventHandlers/onclick">onclick</a>. Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de <code>i</code> au moment où il était créé), cependant chacun d'entre eux retourne <code>i</code> comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de <code>para</code> et <code>i</code> à chaque fois (ou quelque chose de similaire). Voir <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html">good-for-loop.html</a> (voir également le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html">code source</a>) pour une version qui fonctionne.</li> - <li>S'assurer que les opérations asynchrones sont retournées avant d'essayer d'utiliser les valeurs qu'elles retournent. Par exemple, <a href="https://developer.mozilla.org/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_3_.E2.80.94_Un_exemple_simple">cet exemple Ajax</a> vérifie que la requête est complète et que la réponse a été retournée avant qu'on ait essayé d'utiliser cette réponse pour quoi que ce soit. Ce type d'opération a été rendue plus simple à gérer grâce à l'introduction des <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a> dans le langage JavaScript.</li> + <li>Les problèmes basiques de syntaxe et de logique (une fois encore, aller voir <a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">La résolution JavaScript</a>).</li> + <li>Définir des variables sûres, etc. qui sont défnies dans le périmètre correct, et que vous ne rencontrez pas des conflits entre des items déclarés à des endroits différents (voir <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">Function scope and conflicts</a>).</li> + <li>La confusion à propos de <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a>, concernant le périmètre auquel il s'applique, et par conséquent si sa valeur et celle que vous souhaitiez. Vous pouvez lire <a href="/fr/docs/Learn/JavaScript/Objects/Basics#Qu'est-ce_que_%C2%AB_this_%C2%BB">Qu'est-ce que "this" ?</a> pour une simple introduction ; vous devriez également étudier des exemples comme <a href="https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143">this one</a>, qui présente un modèle typique de sauvegarde du périmètre de <code>this</code> dans une variable séparée, puis utilise cette variable dans une fonction imbriquée pour que vous soyez sûr que vous appliquez la fonction au bon périmètre de <code>this</code>.</li> + <li>Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html">bad-for-loop.html</a> (voir <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html">code source</a>), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">onclick</a>. Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de <code>i</code> au moment où il était créé), cependant chacun d'entre eux retourne <code>i</code> comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de <code>para</code> et <code>i</code> à chaque fois (ou quelque chose de similaire). Voir <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html">good-for-loop.html</a> (voir également le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html">code source</a>) pour une version qui fonctionne.</li> + <li>S'assurer que les opérations asynchrones sont retournées avant d'essayer d'utiliser les valeurs qu'elles retournent. Par exemple, <a href="/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_3_.E2.80.94_Un_exemple_simple">cet exemple Ajax</a> vérifie que la requête est complète et que la réponse a été retournée avant qu'on ait essayé d'utiliser cette réponse pour quoi que ce soit. Ce type d'opération a été rendue plus simple à gérer grâce à l'introduction des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a> dans le langage JavaScript.</li> </ul> <div class="note"> -<p><strong>Note </strong>: <a href="https://www.toptal.com/javascript/10-most-common-javascript-mistakes">Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make</a> a des discussions intéressantes à propos de ces erreurs courantes et plus encore.</p> +<p><strong>Note :</strong> <a href="https://www.toptal.com/javascript/10-most-common-javascript-mistakes">Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make</a> a des discussions intéressantes à propos de ces erreurs courantes et plus encore.</p> </div> <h3 id="Les_linters">Les linters</h3> -<p>Comme avec <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_linters">le HTML et le CSS</a>, vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont <a href="http://jshint.com/">JSHint</a> et <a href="http://eslint.org/">ESLint</a> ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.</p> +<p>Comme avec <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_linters">le HTML et le CSS</a>, vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont <a href="http://jshint.com/">JSHint</a> et <a href="http://eslint.org/">ESLint</a> ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.</p> <h4 id="En_ligne">En ligne</h4> <p>La <a href="http://jshint.com/">page d'accueil de JSHint</a> fournit un linter en ligne, qui vous permet d'entrer votre code JavaScript sur la gauche et vous fournit un résultat sur la droite, incluant des indicateurs, des avertissements, et des erreurs.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14175/jshint-online.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="jshint-online.png"></p> <h4 id="Les_plugins_des_éditeurs_de_code">Les plugins des éditeurs de code</h4> @@ -93,7 +93,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript <li>Une fois que les packages ont terminé de s'installer, essayez de charger un fichier JavaScript : vous verrez tous les problèmes surlignés en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de lignes, et un panneau séparé en bas qui vous fournit les numéros de lignes, les messages d'erreur, et parfois des valeur suggérées ou d'autres solutions.</li> </ol> -<p><img alt="" src="https://mdn.mozillademos.org/files/14173/jshint-linter.png" style="display: block; margin: 0 auto;">D'autres éditeurs répandus ont des packages similaires de linting disponibles. Par exemple, voir la section "Plugins for text editors and IDEs" de la <a href="http://jshint.com/install/">page d'installation de JSHint</a>.</p> +<p><img alt="" src="jshint-linter.png">D'autres éditeurs répandus ont des packages similaires de linting disponibles. Par exemple, voir la section "Plugins for text editors and IDEs" de la <a href="http://jshint.com/install/">page d'installation de JSHint</a>.</p> <h4 id="Autres_usages">Autres usages</h4> @@ -104,10 +104,10 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript <pre class="brush: bash">npm install -g jshint </pre> -<p>Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :<img alt="" src="https://mdn.mozillademos.org/files/14171/js-hint-commandline.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;">Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme <a href="http://gulpjs.com/">Gulp</a> ou <a href="https://webpack.github.io/">Webpack</a> pour linter automatiquement votre JavaScript pendant le développement. (voir <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</a> dans un article ultérieur). Voir <a href="http://eslint.org/docs/user-guide/integrations">ESLint integrations</a> pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. <a href="https://github.com/webpack/jshint-loader">JSHint loader for Webpack</a>.</p> +<p>Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :<img alt="" src="js-hint-commandline.png">Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme <a href="http://gulpjs.com/">Gulp</a> ou <a href="https://webpack.github.io/">Webpack</a> pour linter automatiquement votre JavaScript pendant le développement. (voir <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</a> dans un article ultérieur). Voir <a href="http://eslint.org/docs/user-guide/integrations">ESLint integrations</a> pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. <a href="https://github.com/webpack/jshint-loader">JSHint loader for Webpack</a>.</p> <div class="note"> -<p><strong>Note </strong>: ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant.</p> +<p><strong>Note :</strong> ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant.</p> </div> <h3 id="Les_outils_de_développement_des_navigateurs">Les outils de développement des navigateurs</h3> @@ -116,7 +116,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript <p>Faîtes une copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html">broken-ajax.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html">code source</a>). Si vous regardez dans la console, vous verrez le résultat suivant :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14165/broken-ajax.png" style="display: block; height: 86px; margin: 0px auto; width: 635px;"></p> +<p><img alt="" src="broken-ajax.png"></p> <p>Le message d'erreur affiche "TypeError: jsonObj is null", et le numéro de ligne signifiée et le 37. Si nous regardons le code source, la section de code concernée est celle-ci :</p> @@ -127,7 +127,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript ...</pre> -<p>Le code casse aussitôt qu'on essaye d'accèder à <code>jsonObj</code> (ce qui comme vous pouvez vous y attendre, est supposé être un <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JSON">objet JSON</a>). C'est supposé aller le chercher dans un fichier externe <code>.json</code> en utilisant l'appel XMLHttpRequest suivant :</p> +<p>Le code casse aussitôt qu'on essaye d'accèder à <code>jsonObj</code> (ce qui comme vous pouvez vous y attendre, est supposé être un <a href="/fr/docs/Learn/JavaScript/Objects/JSON">objet JSON</a>). C'est supposé aller le chercher dans un fichier externe <code>.json</code> en utilisant l'appel XMLHttpRequest suivant :</p> <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; var request = new XMLHttpRequest(); @@ -142,7 +142,7 @@ showHeroes(superHeroes);</pre> <h4 id="LAPI_Console">L'API Console</h4> -<p>Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API <a href="https://developer.mozilla.org/fr/docs/Web/API/Console">Console</a> qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Console/log">console.log()</a></code>, qui affiche un message d'erreur personnalisé dans la console.</p> +<p>Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API <a href="/fr/docs/Web/API/Console">Console</a> qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est <code><a href="/fr/docs/Web/API/Console/log">console.log()</a></code>, qui affiche un message d'erreur personnalisé dans la console.</p> <p>Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) :</p> @@ -150,7 +150,7 @@ showHeroes(superHeroes);</pre> <p>Rafraîchissez la page dans le navigateur, et vous obtiendrez un résultat dans la console comme celui-ci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14167/console-log.png" style="display: block; height: 99px; margin: 0px auto; width: 638px;"></p> +<p><img alt="" src="console-log.png"></p> <p>Le résultat de <code>console.log()</code> montre que l'objet <code>superHeroes</code> ne semble pas contenir quoi que ce soit, bien que vous remarquerez que l'erreur a maintenant changé en "TypeError: heroes is undefined". Cela montre que l'erreur est intermittente, mettant ainsi en évidence qu'il s'agit d'une erreur asynchrone. Corrigeons l'erreur actuelle et avançons — retirer la ligne <code>console.log()</code>, et mettez à jour ce bloc de code :</p> @@ -172,15 +172,15 @@ showHeroes(superHeroes);</pre> <h4 id="Utiliser_le_débogueur_JavaScript">Utiliser le débogueur JavaScript</h4> -<p>Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le <a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogueur">débogueur JavaScript</a> comme il est appellé dans Firefox.</p> +<p>Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le <a href="/fr/docs/Outils/D%C3%A9bogueur">débogueur JavaScript</a> comme il est appellé dans Firefox.</p> <div class="note"> -<p><strong>Note </strong>: Des outils similaires sont disponibles dans d'autres navigateurs ; le <a href="https://developers.google.com/web/tools/chrome-devtools/#sources">Sources tab</a> dans Chrome, le Débogueur dans Safari (voir <a href="https://developer.apple.com/safari/tools/">Safari Web Development Tools</a>), etc.</p> +<p><strong>Note :</strong> Des outils similaires sont disponibles dans d'autres navigateurs ; le <a href="https://developers.google.com/web/tools/chrome-devtools/#sources">Sources tab</a> dans Chrome, le Débogueur dans Safari (voir <a href="https://developer.apple.com/safari/tools/">Safari Web Development Tools</a>), etc.</p> </div> <p>Dans Firefox, le Débogueur se présente comme suit :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14169/debugger-tab.png" style="display: block; height: 253px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="debugger-tab.png"></p> <ul> <li>Sur la gauche, vous pouvez sélectionner le script que vous voulez déboguer (dans ce cas nous n'en n'avons qu'un seul).</li> @@ -192,7 +192,7 @@ showHeroes(superHeroes);</pre> <p>Mettons-nous au travail. Pour commencer, nous savons que l'erreur est renvoyée à la ligne 51. Cliquez sur la ligne numéro 51 dans le panneau central pour y ajouter un point d'arrêt (vous verrez une flèche bleue apparaître au-dessus de celle-ci). Maintenant rafraichissez la page (Cmd/Ctrl + R) — la navigateur arrêtera l'exécution du code à la ligne 51. A ce moment, le panneau de droite va se mettre à jour pour montrer des informations très utiles.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14163/breakpoint.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="breakpoint.png"></p> <ul> <li>En-dessous de <em>Points d'arrêt</em>, vous verrez le détail du point d'arrêt que vous avez configuré.</li> @@ -206,15 +206,15 @@ showHeroes(superHeroes);</pre> <li>Développez la portée <code>showHeroes</code> — vous pouvez voir depuis celle-ci que la variable heroes n'est pas définie, indiquant qu'accèder à la propriété <code>members</code> de <code>jsonObj</code> (première ligne de la fonction) ne marche pas.</li> <li>Vous pouvez également voir que la variable <code>jsonObj</code> stock une chaîne de caractères, pas un objet JSON.</li> <li>En examinant plus loin la pile d'exécutuion, cliquez sur <code>request.onload</code> dans la section <em>Pile d'exécution</em>. La vue va se mettre à jour pour afficher la fonction <code>request.onload</code> dans le panneau central, et sa portée dans la section <em>Portée</em><em>s</em>.</li> - <li>Maintenant si vous développez la portée de <code>request.onload</code>, vous verrez que la variable <code>superHeroes</code> est également une chaîne de caractères, pas un objet. C'est la solution — notre appel <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> retourne le JSON comme du texte, pas comme du JSON.</li> + <li>Maintenant si vous développez la portée de <code>request.onload</code>, vous verrez que la variable <code>superHeroes</code> est également une chaîne de caractères, pas un objet. C'est la solution — notre appel <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> retourne le JSON comme du texte, pas comme du JSON.</li> </ol> <div class="note"> -<p><strong>Note </strong>: Nous aimerions que vous essayez de résoudre ce problème par vous-même. Pour vous donner un indice, vous avez le choix entre <a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">tell the XMLHttpRequest object explicitly to return JSON format</a>, ou <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JSON#Convertion_entre_objets_et_textes">conversion entre objet et texte</a> après l'arrivée de la réponse. Si vous restez bloqué, consultez notre exemple <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html">fixed-ajax.html</a>.</p> +<p><strong>Note :</strong> Nous aimerions que vous essayez de résoudre ce problème par vous-même. Pour vous donner un indice, vous avez le choix entre <a href="/fr/docs/Web/API/XMLHttpRequest/responseType">tell the XMLHttpRequest object explicitly to return JSON format</a>, ou <a href="/fr/docs/Learn/JavaScript/Objects/JSON#Convertion_entre_objets_et_textes">conversion entre objet et texte</a> après l'arrivée de la réponse. Si vous restez bloqué, consultez notre exemple <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html">fixed-ajax.html</a>.</p> </div> <div class="note"> -<p><strong>Note </strong>: L'onglet débogueur a tant d'autres fonctionnalités utiles que nous n'aborderons pas ici, par exemple les points d'arrêt conditionnels et les expressions espionnes. Pour bien plus d'informations, voyez la page du <a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogueur">Débogueur</a>.</p> +<p><strong>Note :</strong> L'onglet débogueur a tant d'autres fonctionnalités utiles que nous n'aborderons pas ici, par exemple les points d'arrêt conditionnels et les expressions espionnes. Pour bien plus d'informations, voyez la page du <a href="/fr/docs/Outils/D%C3%A9bogueur">Débogueur</a>.</p> </div> <h3 id="Les_problèmes_de_performance">Les problèmes de performance</h3> @@ -225,11 +225,11 @@ showHeroes(superHeroes);</pre> <li>Eviter de charger plus de JavaSacript que nécessaire, réunissez vos scripts dans un seul fichier en utilisant une solution comme <a href="http://browserify.org/">Browserify</a>. En général, réduire le nombre de requêtes HTTP est très bon pour la performance.</li> <li>S'assurer que vos fichiers sont le plus petits en les minifiant avant de les charger sur votre serveur de production. Minifier réduit tout le code en une seule et immense ligne, donnant au fichier une taille beaucoup moins importante. C'est vilain, mais vous n'avez pas besoin de la lire lorsque c'est terminé ! Cette tâche est la mieux réalisée avec un outil de minification comme <a href="https://github.com/mishoo/UglifyJS2">Uglify</a> (il y aussi une version en ligne — voir <a href="https://jscompress.com/">JSCompress.com</a>).</li> <li>Lorsque que vous utilisez des APIs, assurez-vous de désactiver les fonctionnalités de l'API quand elles ne sont pas utilisées ; certains appels d'API peuvent être très coûteux en puissance de traitement. Par exemple, lorsque vous montrez un stream video, assurez-vous que s'est désactivé quand vous ne pouvez pas le voir. Quand vous tracer la localisation d'un appareil en utilisant des appels répétés de Géolocalisation, assurez-vous de le désactiver quand l'utilisateur arrête de l'utiliser.</li> - <li>Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">les Animations CSS</a> (ou la naissante <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>) qu'en JavaScript. Lisez <a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations.</li> + <li>Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme <a href="/fr/docs/Web/CSS/Animations_CSS">les Animations CSS</a> (ou la naissante <a href="/fr/docs/Web/API/Web_Animations_API">Web Animations API</a>) qu'en JavaScript. Lisez <a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations.</li> </ul> <div class="note"> -<p><strong>Note </strong>: Le <a href="https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/" rel="bookmark" title="Read 'Writing Fast, Memory-Efficient JavaScript'"><span class="headline">Writing Fast, Memory-Efficient JavaScript</span></a> de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.</p> +<p><strong>Note :</strong> Le <a href="https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/" rel="bookmark" title="Read 'Writing Fast, Memory-Efficient JavaScript'">Writing Fast, Memory-Efficient JavaScript</a> de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.</p> </div> <h2 id="Les_problèmes_JavaScript_en_navigateur_croisé">Les problèmes JavaScript en navigateur croisé</h2> @@ -245,58 +245,58 @@ showHeroes(superHeroes);</pre> <h3 id="Utiliser_des_fonctionnalités_JavaScriptAPI_modernes">Utiliser des fonctionnalités JavaScript/API modernes</h3> -<p>Dans l'<a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_vieux_navigateurs_ne_supportant_pas_les_fonctionnalit%C3%A9s_r%C3%A9centes">article précédent</a> nous décrivions quelques façons dont les erreurs HTML et CSS et les fonctionnalités non reconnues peuvent être gérées grâce à la nature du langage. JavaScript n'est toutefois pas autant permissif que le HTML et le CSS — si le moteur de JavaScript rencontre une faute ou une syntaxe inconnue, le plus souvent il renverra des erreurs.</p> +<p>Dans l'<a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_vieux_navigateurs_ne_supportant_pas_les_fonctionnalit%C3%A9s_r%C3%A9centes">article précédent</a> nous décrivions quelques façons dont les erreurs HTML et CSS et les fonctionnalités non reconnues peuvent être gérées grâce à la nature du langage. JavaScript n'est toutefois pas autant permissif que le HTML et le CSS — si le moteur de JavaScript rencontre une faute ou une syntaxe inconnue, le plus souvent il renverra des erreurs.</p> -<p>Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans les versions récentes des spécifications (<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_2015_par_Mozilla">ECMAScript 6</a> / <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_Next_par_Mozilla">ECMAScript Next</a>) qui ne marchent tout simplement pas sur les plus vieux navigateurs. Certaines d'entre elles sont des améliorations syntaxiques (essentiellement une façon plus simple, adéquate d'écrire ce que vous pouvez déjà écrire en utilisant des fonctionnalités existantes), et certaines offrent de nouvelles possibilités intéressantes.</p> +<p>Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans les versions récentes des spécifications (<a href="/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_2015_par_Mozilla">ECMAScript 6</a> / <a href="/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_Next_par_Mozilla">ECMAScript Next</a>) qui ne marchent tout simplement pas sur les plus vieux navigateurs. Certaines d'entre elles sont des améliorations syntaxiques (essentiellement une façon plus simple, adéquate d'écrire ce que vous pouvez déjà écrire en utilisant des fonctionnalités existantes), et certaines offrent de nouvelles possibilités intéressantes.</p> <p>Par exemple :</p> <ul> - <li>Les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a> sont une super nouvelle fonctionnalité pour réaliser des opérations asynchrones et s'assurer que c'est opérations sont complètes avant que le code qui s'appuie sur eux ne soit utiliser pour autre chose. A titre d'exemple, l'<a href="https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">API Fetch</a> (un équivalent moderne de <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>) utilise les promises pour rapporter les ressources à travers le réseau et s'assurer que la réponse a été retournée avant qu'elles ne soient utilisées (par exemple afficher une image dans un élément {{htmlelement("img")}} ). Elles ne sont pas du tout supportées par IE mais sont supportées par tous les navigateurs modernes.</li> - <li>Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">anonymous functions</a>, ce qui a aussi d'autres avantages (voir <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions Fléchées</a>). Comme exemple rapide, voir <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html">arrow-function.html </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html">code source</a>). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari.</li> - <li>Déclarer <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a> en haut de votre code JavaScript l'amène à être décomposé en une liste de règles plus strictes, impliquant que plus d'avertissements et d'erreurs seront retournés, et certaines choses seront rejetées qui auraient normalement été acceptées. C'est probablement une bonne idée d'utiliser le mode stricte, comme il permet une amélioration et une meilleur efficacité du code, bien qu'il ait un support limité/incomplet selon les navigateurs (voir <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode#Le_mode_strict_dans_les_navigateurs">Le mode strict dans les navigateurs</a>).</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s">Les tableaux typés</a> permettent au code JavaScript d'accéder et de manipuler des données binaires brutes, ce qui est indispensable pour les APIs navigateur par exemple qui commencent à manipuler les streams des données vidéo et audio brutes.</li> + <li>Les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a> sont une super nouvelle fonctionnalité pour réaliser des opérations asynchrones et s'assurer que c'est opérations sont complètes avant que le code qui s'appuie sur eux ne soit utiliser pour autre chose. A titre d'exemple, l'<a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">API Fetch</a> (un équivalent moderne de <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>) utilise les promises pour rapporter les ressources à travers le réseau et s'assurer que la réponse a été retournée avant qu'elles ne soient utilisées (par exemple afficher une image dans un élément {{htmlelement("img")}} ). Elles ne sont pas du tout supportées par IE mais sont supportées par tous les navigateurs modernes.</li> + <li>Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">anonymous functions</a>, ce qui a aussi d'autres avantages (voir <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions Fléchées</a>). Comme exemple rapide, voir <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html">arrow-function.html </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html">code source</a>). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari.</li> + <li>Déclarer <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a> en haut de votre code JavaScript l'amène à être décomposé en une liste de règles plus strictes, impliquant que plus d'avertissements et d'erreurs seront retournés, et certaines choses seront rejetées qui auraient normalement été acceptées. C'est probablement une bonne idée d'utiliser le mode stricte, comme il permet une amélioration et une meilleur efficacité du code, bien qu'il ait un support limité/incomplet selon les navigateurs (voir <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode#Le_mode_strict_dans_les_navigateurs">Le mode strict dans les navigateurs</a>).</li> + <li><a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s">Les tableaux typés</a> permettent au code JavaScript d'accéder et de manipuler des données binaires brutes, ce qui est indispensable pour les APIs navigateur par exemple qui commencent à manipuler les streams des données vidéo et audio brutes.</li> </ul> <p>Il y a également beaucoup de nouvelles APIs qui apparaissent dans les navigateurs récents, qui ne fonctionnent pas sur les plus vieux navigateurs, par exemple :</p> <ul> - <li>L'<a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a>, L'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>, et d'autres pour stocker des données d'un site web côté client.</li> - <li>L'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> pour exécuter du JavaScript dans un thread séparé, aidant à améliorer la performance.</li> - <li>L'<a href="https://developer.mozilla.org/fr/Apprendre/WebGL">API WebGl</a> pour des graphiques 3D réels.</li> - <li>L'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> pour de la manipulation audio avancée.</li> - <li>L'<a href="https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API">API WebRTC</a> pour la connectivité multi-personne, de la vidéo/audio en temps réel (par ex. une vidéo conférence)</li> - <li>L'<a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">API WebVR</a> pour concevoir des expériences en réalité virtuelle dans le navigateur (par ex. contrôler une vue 3D avec de l'introduction de données depuis le disque dur VR)</li> + <li>L'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a>, L'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a>, et d'autres pour stocker des données d'un site web côté client.</li> + <li>L'<a href="/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> pour exécuter du JavaScript dans un thread séparé, aidant à améliorer la performance.</li> + <li>L'<a href="/fr/Apprendre/WebGL">API WebGl</a> pour des graphiques 3D réels.</li> + <li>L'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> pour de la manipulation audio avancée.</li> + <li>L'<a href="/fr/docs/Web/API/WebRTC_API">API WebRTC</a> pour la connectivité multi-personne, de la vidéo/audio en temps réel (par ex. une vidéo conférence)</li> + <li>L'<a href="/fr/docs/Web/API/WebVR_API">API WebVR</a> pour concevoir des expériences en réalité virtuelle dans le navigateur (par ex. contrôler une vue 3D avec de l'introduction de données depuis le disque dur VR)</li> </ul> <p>Il y a plusieurs stratégies pour gérer les incompatibilités entre navigateurs concernant le support de fonctionnalité ; explorons les plus courantes.</p> <div class="note"> -<p><strong>Note </strong>: Ces stratégies n'existent pas dans des endroits distincts — bien sûr, vous pouvez les combiner autant que nécessaire. Par exemple, vous pourriez utiliser une fonction de détection pour déterminer si une fonctionnalité est supportée ; si elle ne l'est pas, vous pouvez ensuite exécuter le code pour charger un polyfill ou une libraire pour gérer le manque de support.</p> +<p><strong>Note :</strong> Ces stratégies n'existent pas dans des endroits distincts — bien sûr, vous pouvez les combiner autant que nécessaire. Par exemple, vous pourriez utiliser une fonction de détection pour déterminer si une fonctionnalité est supportée ; si elle ne l'est pas, vous pouvez ensuite exécuter le code pour charger un polyfill ou une libraire pour gérer le manque de support.</p> </div> <h4 id="Fonctionnalité_de_détection">Fonctionnalité de détection</h4> -<p>L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'<a href="https://developer.mozilla.org/fr/docs/Using_geolocation">API Geolocalisation</a> (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété <code>geolocation</code> disponible dans l'objet global <a href="https://developer.mozilla.org/fr/docs/Web/API/Navigator">Navigator</a>. Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :</p> +<p>L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'<a href="/fr/docs/Using_geolocation">API Geolocalisation</a> (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété <code>geolocation</code> disponible dans l'objet global <a href="/fr/docs/Web/API/Navigator">Navigator</a>. Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :</p> -<pre class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="string token">"geolocation"</span> <span class="keyword token">in</span> navigator<span class="punctuation token">)</span> <span class="punctuation token">{</span> - navigator<span class="punctuation token">.</span>geolocation<span class="punctuation token">.</span><span class="function token">getCurrentPosition</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>position<span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush: js">if("geolocation" in navigator) { + navigator.geolocation.getCurrentPosition(function(position) { // show the location on a map, perhaps using the Google Maps API - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">; -}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + }); +} else { // Give the user a choice of static maps instead perhaps -<span class="punctuation token">}</span></pre> +}</pre> -<p>Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, par exemple en testant l'existence de <em><a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/style">element.style.property</a></em> (par ex. <code>paragraph.style.transform !== undefined</code>). Mais autant pour CSS que JavaScript, il est probablement préférable d'utiliser une librairie de fonction de détection établie plutôt que d'écrire la votre tout le temps. Modernizr est la norme standard pour les tests de fonction de détection.</p> +<p>Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, par exemple en testant l'existence de <em><a href="/fr/docs/Web/API/HTMLElement/style">element.style.property</a></em> (par ex. <code>paragraph.style.transform !== undefined</code>). Mais autant pour CSS que JavaScript, il est probablement préférable d'utiliser une librairie de fonction de détection établie plutôt que d'écrire la votre tout le temps. Modernizr est la norme standard pour les tests de fonction de détection.</p> <p>Enfin, ne confondez pas fonction de détection avec <strong>le détecteur navigateur</strong> (qui détecte quel navigateur en particulier accède au site) — c'est une terrible pratique qui devrait être découragée à tout prix. Voir {{anch("Using bad browser sniffing code")}}, plus tard, pour plus de détails.</p> <div class="note"> -<p><strong>Note </strong>: Certaines fonctionnalités sont connues pour être indétectables — voir la liste des <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">Undetectables</a> de Modernizr.</p> +<p><strong>Note :</strong> Certaines fonctionnalités sont connues pour être indétectables — voir la liste des <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">Undetectables</a> de Modernizr.</p> </div> <div class="note"> -<p><strong>Note </strong>: La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module.</p> +<p><strong>Note :</strong> La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module.</p> </div> <h4 id="Les_librairies">Les librairies</h4> @@ -307,22 +307,22 @@ showHeroes(superHeroes);</pre> <ul> <li>Les librairies utilitaires : Fournissent une quantité de fonctions pour rendre les tâches sans intérêts plus simples et moins ennuyantes à gérer. <a href="http://jquery.com/">jQuery</a> par exemple fournit son propre système de sélecteurs et de librairies de manipulation de DOM, pour permettre le choix du type de sélecteur CSS, des éléments en JavaScript et une construction du DOM plus simple. Ce n'est plus aussi important aujourd'hui nous avons des fonctionnalités modernes comme les méthodes {{domxref("Document.querySelector()")}}/{{domxref("Document.querySelectorAll()")}}/{{domxref("Node")}} disponibles selon les navigateurs, mais ça peut toujours être utile quand vous avez besoin de supporter de plus vieux navigateurs.</li> - <li>Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'<a href="https://developer.mozilla.org/fr/Apprendre/WebGL">API WebGL</a> est vraiment complexe et se révèle difficile à écrire directement, alors la librairie <a href="https://threejs.org/">Three.js</a> (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'<a href="https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API">API Service Worker </a>est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le <a href="https://serviceworke.rs/">Service Worker Cookbook</a> pour plusieurs extrait de code utiles).</li> + <li>Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'<a href="/fr/Apprendre/WebGL">API WebGL</a> est vraiment complexe et se révèle difficile à écrire directement, alors la librairie <a href="https://threejs.org/">Three.js</a> (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'<a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker </a>est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le <a href="https://serviceworke.rs/">Service Worker Cookbook</a> pour plusieurs extrait de code utiles).</li> <li>Les librairies d'effets : Ces librairies sont conçues pour vous permettre d'ajouter facilement des effets spéciaux à votre site web. C'était plus utile quand {{glossary("DHTML")}} était à la mode, et implémentait des effets impliquant beaucoup de JavaScript complexe, mais de nos jours les navigateurs ont construit une quantité de fonctionnalités en CSS3 et des APIs pour implémenter les effets plus facilement. Pour une liste de librairies, se référer à <a href="https://www.javascripting.com/animation/">JavaScripting.com/animation</a>.</li> <li>Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple <a href="http://jqueryui.com/">jQuery UI</a> et <a href="http://foundation.zurb.com/">Foundation</a>. Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI.</li> - <li>Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, <a href="https://github.com/localForage/localForage">LocalForage</a> est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données, que ça soit <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API">Web Storage</a>, ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery.</li> + <li>Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, <a href="https://github.com/localForage/localForage">LocalForage</a> est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données, que ça soit <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>, <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a>, ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery.</li> </ul> <p>Lorsque vous choissisez une librairie pour l'utiliser, assurez-vous qu'elle fonctionne sur l'ensemble des navigateurs que vous voulez supporter, et tester vos implémentations minutieusement. Assurez-vous également que la librairie est répandue et bien supportée, et qu'elle ne va pas devenir obsolète la semaine prochaine. Parler à d'autres développeurs pour savoir ce qu'ils peuvent vous recommander, regarder l'activité et combien de contributeurs la librairie a sur Github (ou qu'importe où elle est stockée), etc.</p> <div class="note"> -<p><strong>Note </strong>: <a href="https://www.javascripting.com/">JavaScripting.com</a> vous donne une idée d'à peu près combien de librairies JavaScript sont disponibles, et peut être utile pour trouver une librairie dans un but précis.</p> +<p><strong>Note :</strong> <a href="https://www.javascripting.com/">JavaScripting.com</a> vous donne une idée d'à peu près combien de librairies JavaScript sont disponibles, et peut être utile pour trouver une librairie dans un but précis.</p> </div> <p>L'utilisation de librairie à un niveau basique consiste à télécharger les fichiers de la librairie (JavaScript, peut-être un peu de CSS ou d'autres dépendances) et à les attacher à votre page (par ex. via un élément {{htmlelement("script")}}, bien qu'il y ait normalement plein d'autres options d'utilisation pour de telles librairies, comme les installer comme des composants <a href="https://bower.io/">Bower</a>, ou les inclure comme des dépendances avec le module de paquets <a href="https://webpack.github.io/">Webpack</a>. Vous devrez lire les pages d'installation individuelles des librairies pour plus d'information.</p> <div class="note"> -<p><strong>Note </strong>: Vous allez aussi tomber sur des frameworks JavaScript pendant votre voyage dans le Web, comme <a href="http://emberjs.com/">Ember</a> et <a href="https://angularjs.org/">Angular</a>. Alors que les librairies sont souvent utilisées pour résoudre des problèmes individuels et ajoutées dans des sites existants, les frameworks ont tendances à être utilisés plus pour des solutions complètes pour développer des applications web complexes.</p> +<p><strong>Note :</strong> Vous allez aussi tomber sur des frameworks JavaScript pendant votre voyage dans le Web, comme <a href="http://emberjs.com/">Ember</a> et <a href="https://angularjs.org/">Angular</a>. Alors que les librairies sont souvent utilisées pour résoudre des problèmes individuels et ajoutées dans des sites existants, les frameworks ont tendances à être utilisés plus pour des solutions complètes pour développer des applications web complexes.</p> </div> <h4 id="Les_Polyfills">Les Polyfills</h4> @@ -334,9 +334,9 @@ showHeroes(superHeroes);</pre> <p>Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fetch pour fournir du support pour une API Fetch dans de vieux navigateurs ; nous avons toutefois également besoin d'utiliser le polyfill es6-promise, comme Fetch utilise largement les promises, et les navigateurs qui ne les supportent pas seront toujours bloqués.</p> <ol> - <li class="gh-header-title instapaper_title">Pour commencer, faîtes une copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html">fetch-polyfill.html</a> et de <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg">notre belle image de fleurs</a> dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.</li> - <li class="gh-header-title instapaper_title">Ensuite, sauvegarder les copies de <a href="https://raw.githubusercontent.com/github/fetch/master/fetch.js">Fetch polyfill</a> et de <a href="https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js">es6-promises polyfill</a> dans le même répertoire que le HTML.</li> - <li class="gh-header-title instapaper_title">Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch : + <li>Pour commencer, faîtes une copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html">fetch-polyfill.html</a> et de <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg">notre belle image de fleurs</a> dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.</li> + <li>Ensuite, sauvegarder les copies de <a href="https://raw.githubusercontent.com/github/fetch/master/fetch.js">Fetch polyfill</a> et de <a href="https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js">es6-promises polyfill</a> dans le même répertoire que le HTML.</li> + <li>Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch : <pre class="brush: js"><script src="es6-promise.js"></script> <script src="fetch.js"></script></pre> </li> @@ -352,50 +352,50 @@ fetch('flowers.jpg').then(function(response) { });</pre> </li> <li>Maintenant si vous le chargez dans un navigateur qui ne supporte pas Fetch (Safari et IE sont des candidats de choix), vous devriez quand même voir l'image de la fleur apparaitre — cool !<br> - <img alt="" src="https://mdn.mozillademos.org/files/14183/fetch-image.jpg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> + <img alt="" src="fetch-image.jpg"></li> </ol> <div class="note"> -<p><strong>Note </strong>: Vous pouvez consulter notre version terminée sur <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html">fetch-polyfill-finished.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html">code source</a>).</p> +<p><strong>Note :</strong> Vous pouvez consulter notre version terminée sur <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html">fetch-polyfill-finished.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html">code source</a>).</p> </div> <div class="note"> -<p class="gh-header-title instapaper_title"><strong>Note</strong> : Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill.</p> +<p><strong>Note :</strong> Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill.</p> </div> <p>Une chose à laquelle vous devez penser est "pourquoi devrions-nous toujours charger le code polyfill, même si nous n'en avons pas besoin ?" C'est une bonne remarque — plus vos sites vont devenir complexes et plus vous aller commencer à utiliser de librairies, de polyfills, etc., vous pouvez commencer à charger beaucoup de code supplémentaire, qui peut commencer à affecter la performance, spécialement sur des appareils peu puissants. Il est donc normal de ne charger les fichiers que quand ils sont nécessaires.</p> <p>Faire cela nécessite un peu de code supplémentaire dans votre JavaScript. Vous avez besoin d'un test de détection de caractéristiques qui détecte si le navigateur supporte la fonctionnalité que vous essayez d'utiliser :</p> -<pre class="brush: js"><code class="language-js"><span class="hljs-keyword">if</span> (browserSupportsAllFeatures()) { +<pre class="brush: js">if (browserSupportsAllFeatures()) { main(); -} <span class="hljs-keyword">else</span> { - loadScript(<span class="hljs-string">'polyfills.js'</span>, main); +} else { + loadScript('polyfills.js', main); } -<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">main</span>(err) </span>{ - <span class="hljs-comment">// actual app code goes in here</span> -}</code></pre> +function main(err) { + // actual app code goes in here +}</pre> <p>En premier temps on exécute une condition qui vérifie si la fonction <code>browserSupportAllFeatures()</code> retourne true. Si oui, on exécute la fonction <code>main()</code>, qui contiendra tout le code de notre app. <code>browserSupportAllFeatures()</code> ressemble à ça :</p> -<pre class="brush: js"><code class="language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">browserSupportsAllFeatures</span>() </span>{ - <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>.Promise && <span class="hljs-built_in">window</span>.fetch; -}</code></pre> +<pre class="brush: js">function browserSupportsAllFeatures() { + return window.Promise && window.fetch; +}</pre> -<p>Ici on vérifie si l'objet <code><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> et la fonction <code><a href="https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne <code>false</code>, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute <code>main()</code> après que le chargement soit terminé. <code>loadScript()</code> ressemble à ça :</p> +<p>Ici on vérifie si l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> et la fonction <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne <code>false</code>, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute <code>main()</code> après que le chargement soit terminé. <code>loadScript()</code> ressemble à ça :</p> -<pre class="brush: js"><code class="language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loadScript</span>(<span class="hljs-params">src, done</span>) </span>{ - <span class="hljs-keyword">var</span> js = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'script'</span>); +<pre class="brush: js">function loadScript(src, done) { + var js = document.createElement('script'); js.src = src; - js.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ + js.onload = function() { done(); }; - js.onerror = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ - done(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Failed to load script '</span> + src)); + js.onerror = function() { + done(new Error('Failed to load script ' + src)); }; - <span class="hljs-built_in">document</span>.head.appendChild(js); -}</code> + document.head.appendChild(js); +} </pre> <p>Cette fonction créé un nouvel élément <code><script></code>, puis applique son attribut <code>src</code> au chemin que nous avons spécifié en premier argument (<code>'polyfills.js'</code> dont nous parlions dans le code au-dessus). Une fois qu'il est chargé, nous exécutons la fonction que nous avons spécifié en deuxième argument (<code>main()</code>). Si une erreur se produit pendant le chargement du script, on continue d'appeler la fonction, mais avec une erreur personnalisée que nous pouvons retrouver pour faciliter le débug d'un problème s'il arrive.</p> @@ -405,7 +405,7 @@ fetch('flowers.jpg').then(function(response) { <p>Vous pouvez voir le code en direct sur <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html">fetch-polyfill-only-when-needed.html</a> (voir aussi <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html">le code source</a>). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article <a href="https://philipwalton.com/articles/loading-polyfills-only-when-needed/">Loading Polyfills Only When Needed</a> pour le code original, et beaucoup d'explications utiles autour de ce large sujet.</p> <div class="note"> -<p><strong>Note </strong>: Il y a certaines options externes à prendre en considération, par exemple <a href="https://polyfill.io/v2/docs/">Polyfill.io</a> — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code.</p> +<p><strong>Note :</strong> Il y a certaines options externes à prendre en considération, par exemple <a href="https://polyfill.io/v2/docs/">Polyfill.io</a> — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code.</p> </div> <h4 id="Le_transpiling_Javascript">Le transpiling Javascript</h4> @@ -413,7 +413,7 @@ fetch('flowers.jpg').then(function(response) { <p>Une autre option qui et devenue populaire pour les gens qui veulent utiliser des fonctionnalités Javascript modernes dès maintenant consiste à convertir le code qui utilise les fonctionnalités ECMAScript 6/ECMAScript 2015 en une version qui fonctionnera sur les vieux navigateurs.</p> <div class="note"> -<p><strong>Note </strong>: Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre).</p> +<p><strong>Note :</strong> Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre).</p> </div> <p>Pour l'exemple, nous parlions des fonctions fléchées (voir <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html">arrow-function.html</a> en direct, et voir le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html">code source</a>) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs :</p> @@ -429,7 +429,7 @@ fetch('flowers.jpg').then(function(response) { <p>La meilleure façon d'essayer Babel et d'utiliser la <a href="https://babeljs.io/repl/">version en ligne</a>, qui vous permet d'entrer votre code source sur la gauche, et une version transpilée sort sur la droite.</p> <div class="note"> -<p><strong>Note </strong>: Il y a plein de façon d'utiliser Babel (exécuteurs de tâche, outil d'automatisation, etc.), comme vous le verrez sur la <a href="https://babeljs.io/docs/setup/">page d'installation</a>.</p> +<p><strong>Note :</strong> Il y a plein de façon d'utiliser Babel (exécuteurs de tâche, outil d'automatisation, etc.), comme vous le verrez sur la <a href="https://babeljs.io/docs/setup/">page d'installation</a>.</p> </div> <h3 id="Utiliser_une_mauvaise_détection_de_code_de_navigateur">Utiliser une mauvaise détection de code de navigateur</h3> @@ -449,7 +449,7 @@ if(ua.indexOf('Firefox') !== -1) { <p>L'idée était assez bonne — détecter quel navigateur affiche le site, et exécuter le code approprié pour s'assurer que le navigateur sera à même de bien utiliser votre site.</p> <div class="note"> -<p><strong>Note </strong>: Essayez maintenant d'ouvrir votre console JavaScript et d'exécuter navigator.userAgent pour voir ce qui est retourné.</p> +<p><strong>Note :</strong> Essayez maintenant d'ouvrir votre console JavaScript et d'exécuter navigator.userAgent pour voir ce qui est retourné.</p> </div> <p>Cependant, le temps passant, les développeurs ont commencé à voir des graves problèmes avec cette approche. Pour commencer, le code était source d'erreur. Et si une nouvelle fonctionnalité ne marche pas sur disons, Firefox 10 et inférieur, on implémente du code pour détecter cela, puis Firefox 11 arrive — est-ce qu'il supportera cette fonctionnalité ? Firefox 11 ne sera sûrement pas supporté parce qu'il n'est pas Firefox 10. Vous aurez à changer tout votre code de détection régulièrement.</p> @@ -457,7 +457,7 @@ if(ua.indexOf('Firefox') !== -1) { <p>Beaucoup de développeurs on implémenté de mauvais détecteur de code de navigateur et ne l'ont pas maintenu, et les navigateurs ont commencé à être bloqués en allant sur des sites web contenant des fonctionnalités qu'ils avaient déjà implémenté. C'est devenu une pratique commune que les navigateurs commencent à mentir à propos de quel navigateur ils étaient dans leur chaîne d'user-agent (ou déclarer qu'ils étaient tous les navigateurs), pour passer outre les détecteurs de code. Les navigateurs ont également implémenté des moyens pour permettre aux utilisateurs de changer quels chaîne d'user-agent le navigateur doit retourné lorsqu'il est interrogé par du JavaScript. Tout cela fait du détecteur de code bien plus qu'une source d'erreur, et d'inutilité.</p> <div class="note"> -<p><strong>Note </strong>: Vous devriez lire <a href="http://webaim.org/blog/user-agent-string-history/">History of the browser user-agent string</a> de Aaron Andersen pour une présentation utile et amusante de cette situation.</p> +<p><strong>Note :</strong> Vous devriez lire <a href="http://webaim.org/blog/user-agent-string-history/">History of the browser user-agent string</a> de Aaron Andersen pour une présentation utile et amusante de cette situation.</p> </div> <p>La leçon à retenir ici est — ne JAMAIS utiliser de détecteur de code. Le seul cas d'usage pour le détecteur de code de nos jours c'est si vous implémentez un fix pour un bug pour une version très particulière d'un navigateur en particulier. Même dans ce cas, la plupart des bugs sont fixés rapidement dans le cycle rapide des sorties des navigateurs. Cela n'arrive pas très souvent. {{anch("Feature detection")}} est presque toujours une meilleure option — si vous détectez si une fonctionnalité est supportée, vous n'aurez pas besoin de changer votre code quand de nouvelles versions de navigateur sortiront, et les tests sont bien plus fiables.</p> @@ -466,7 +466,7 @@ if(ua.indexOf('Firefox') !== -1) { <h3 id="Gérer_les_préfixes_JavaScript">Gérer les préfixes JavaScript</h3> -<p>Dans l'article précédent, nous parlions quelque peu de la <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Gestion_des_pr%C3%A9fixes_CSS">gestion des préfixes CSS</a>. Alors, les nouvelles implémentations JavaScript utilisent parfois aussi des préfixes, bien que JavaScript utilise le camel case plutôt que l'hyphenation comme CSS. Par exemple, si un préfixe est utilisé sur un objet d'une toute belle API appelée <code>Ojbect</code> :</p> +<p>Dans l'article précédent, nous parlions quelque peu de la <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Gestion_des_pr%C3%A9fixes_CSS">gestion des préfixes CSS</a>. Alors, les nouvelles implémentations JavaScript utilisent parfois aussi des préfixes, bien que JavaScript utilise le camel case plutôt que l'hyphenation comme CSS. Par exemple, si un préfixe est utilisé sur un objet d'une toute belle API appelée <code>Ojbect</code> :</p> <ul> <li>Mozilla utilisera <code>mozObject</code></li> @@ -474,14 +474,14 @@ if(ua.indexOf('Firefox') !== -1) { <li>Microsoft utilisera <code>msObject</code></li> </ul> -<p>Voici un exemple, issu de notre <a href="http://mdn.github.io/violent-theremin/">demo violent-theremin</a> (voir le <a href="https://github.com/mdn/violent-theremin">code source</a>), qui utilise une combinaison de l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">API Canvas</a> et de l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">API Web Audio</a> pour créer un outil de dessin marrant (et bruyant) :</p> +<p>Voici un exemple, issu de notre <a href="http://mdn.github.io/violent-theremin/">demo violent-theremin</a> (voir le <a href="https://github.com/mdn/violent-theremin">code source</a>), qui utilise une combinaison de l'<a href="/fr/docs/Web/HTML/Canvas">API Canvas</a> et de l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> pour créer un outil de dessin marrant (et bruyant) :</p> <pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext();</pre> <p>Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées <code>webkit</code> (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée.</p> -<p>Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext">AudioContext</a> modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio.</p> +<p>Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur <a href="/fr/docs/Web/API/AudioContext">AudioContext</a> modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio.</p> <p>Ce modèle peut être appliqué pour toutes les fonctionnalités JavaScript préfixées. Les librairies/polyfills JavaScript utilise également ce type de code, pour faire abstraction au maximum des différences entre navigateurs pour le développeur.</p> @@ -495,7 +495,7 @@ var audioCtx = new AudioContext();</pre> <h2 id="Trouver_de_laide">Trouver de l'aide</h2> -<p>Il y'a bien d'autres problèmes que vous allez rencontrer avec le JavaScript ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez <a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Trouver_de_l'aide">la section Trouver de l'aide</a> de l'article sur le HTML et CSS pour nos meilleurs conseils.</p> +<p>Il y'a bien d'autres problèmes que vous allez rencontrer avec le JavaScript ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Trouver_de_l'aide">la section Trouver de l'aide</a> de l'article sur le HTML et CSS pour nos meilleurs conseils.</p> <h2 id="Résumé">Résumé</h2> @@ -508,12 +508,12 @@ var audioCtx = new AudioContext();</pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction au test en navigateur croisé</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Stratégies pour mener à bien vos tests</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS">Gérer les problèmes courants en HTML et CSS</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction au test en navigateur croisé</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Stratégies pour mener à bien vos tests</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS">Gérer les problèmes courants en HTML et CSS</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html index ea67dd363c..e739854c4d 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html @@ -7,13 +7,13 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> -<p class="summary">Cet article commence en donnant un aperçu sur le sujet des tests sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé ?", "Quels sont les problèmes les plus communs que vous allez rencontrer ?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes ?"</p> +<p>Cet article commence en donnant un aperçu sur le sujet des tests sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé ?", "Quels sont les problèmes les plus communs que vous allez rencontrer ?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes ?"</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances avec le noyau des langages <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> ; une idée du haut niveau<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"> des principes du test en navigateur croisé</a>.</td> + <td>Connaissances avec le noyau des langages <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ; une idée du haut niveau<a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction"> des principes du test en navigateur croisé</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -43,7 +43,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Tout au long des sections à venir, nous allons mettre en place une liste de support dans ce format.</p> <div class="note"> -<p><strong>Note </strong>: Yahoo est le premier à avoir rendu cette approche répandue, avec leur approche de <a href="https://github.com/yui/yui3/wiki/Graded-Browser-Support">Support de navigateur classé</a>.</p> +<p><strong>Note :</strong> Yahoo est le premier à avoir rendu cette approche répandue, avec leur approche de <a href="https://github.com/yui/yui3/wiki/Graded-Browser-Support">Support de navigateur classé</a>.</p> </div> <h3 id="Déductions_logiques">Déductions logiques</h3> @@ -53,7 +53,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Par exemple, si vous habitez en Europe de l'Ouest ou en Amérique du Nord, vous devez savoir que la plupart des gens utilisent des ordinateurs de bureau/portable Windows et Mac, et que les navigateurs principaux sont Chrome, Firefox, Safari, IE, et Edge. Vous n'aurez sûrement besoin que de tester uniquement les dernières versions des trois premiers, étant donné que ces navigateurs reçoivent des mises à jour régulières. Pour Edge et IE vous n'aurez que besoin de tester les deux dernières versions ; ils doivent tous aller dans le niveau de grade A.</p> <div class="note"> -<p><strong>Note </strong>: Vous ne pouvez avoir qu'une seule version d'IE ou d'Edge installée sur une machine à la fois, vous aurez donc probablement besoin d'utiliser une machine virtuelle, ou une autre stratégie pour faire les tests nécessaires. Voir {{anch("Virtual machines")}} plus tard.</p> +<p><strong>Note :</strong> Vous ne pouvez avoir qu'une seule version d'IE ou d'Edge installée sur une machine à la fois, vous aurez donc probablement besoin d'utiliser une machine virtuelle, ou une autre stratégie pour faire les tests nécessaires. Voir {{anch("Virtual machines")}} plus tard.</p> </div> <p>Beaucoup de personnes utilisent iOS et Android, vous aurez donc aussi besoin de tester les dernières versions d'iOS Safari, les deux dernières versions de l'ancien Android stock browser, et Chrome et Firefox pour iOS et Android. Idéalement, vous devriez tester sur un téléphone et une tablette de chaque système d'exploitation, afin de vous assurer que les designs responsives fonctionnent bien.</p> @@ -71,7 +71,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Si vous vivez autre part, ou travaillez sur un site qui va être livré autre part (par ex. dans un pays ou un endroit en particulier), alors vous aurez sûrement des navigateurs communs différents à tester.</p> <div class="note"> -<p><strong>Note </strong>: "Le PDG de mon entreprise utilise un Blackberry, nous devons donc nous assurer que cela apparaîtra parfaitement sur ce support" peut aussi être un argument persuasif.</p> +<p><strong>Note :</strong> "Le PDG de mon entreprise utilise un Blackberry, nous devons donc nous assurer que cela apparaîtra parfaitement sur ce support" peut aussi être un argument persuasif.</p> </div> <h3 id="Les_statistiques_de_support_navigateur">Les statistiques de support navigateur</h3> @@ -114,14 +114,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Par défaut, vous devriez voir ce tableau de rapport, comme ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14081/analytics-reporting.png" style="border-style: solid; border-width: 1px; display: block; height: 386px; margin: 0px auto; width: 700px;"></p> +<p><img alt="" src="analytics-reporting.png"></p> <p>Il y a une énorme quantité de donnée que vous pouvez regarder en utilisant Google Analytics — des rapports personnalisés dans différentes catégories, etc. — et nous n'avons pas le temps pour tous les aborder. <a href="https://support.google.com/analytics/answer/1008015">Démarrer avec Analytics</a> fournit une aide utile sur les rapports (et plus) pour les débutants.</p> <p>Vous devriez aussi vous intéresser aux différentes options du menu gauche, et voir quels types de données vous pouvez trouver. Par exemple, vous pouvez trouver quels navigateurs et quels systèmes d'exploitation vos utilisateurs utilisent en sélectionnant <em>Audience</em> > <em>Technologie</em> > <em>Navigateur & OS</em> du menu gauche.</p> <div class="note"> -<p><strong>Note </strong>: Lorsque vous utilisez Google Analytics, vous devez pour prévenir des biais trompeurs, par ex. "Nous n'avons aucun utilisateur de Firefox Mobile" peut vous amener à ne pas vous soucier de supporter Firefox Mobile. Mais vous n'allez pas avoir un seul utilisateur de Firefox Mobile si le site ne fonctionnait pas dessus dès le départ.</p> +<p><strong>Note :</strong> Lorsque vous utilisez Google Analytics, vous devez pour prévenir des biais trompeurs, par ex. "Nous n'avons aucun utilisateur de Firefox Mobile" peut vous amener à ne pas vous soucier de supporter Firefox Mobile. Mais vous n'allez pas avoir un seul utilisateur de Firefox Mobile si le site ne fonctionnait pas dessus dès le départ.</p> </div> <h3 id="Autres_cas">Autres cas</h3> @@ -146,7 +146,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Considérez l'exemple suivant (voir le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html">code source</a>, et aussi l'<a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html">exemple exécuté en direct</a>) :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14083/sliding-box-demo.png" style="border-style: solid; border-width: 1px; display: block; height: 455px; margin: 0px auto; width: 700px;"></p> +<p><img alt="" src="sliding-box-demo.png"></p> <p>Les critères de test pour cette fonctionnalité peuvent être rédigés comme ceci :</p> @@ -207,18 +207,18 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Nous couvrirons chacune des autres options plus bas.</p> <div class="note"> -<p><strong>Note </strong>: Certains efforts ont été effectué afin de créer des labos d'appareils accessibles au public — voir <a href="https://opendevicelab.com/">Open Device Labs</a>.</p> +<p><strong>Note :</strong> Certains efforts ont été effectué afin de créer des labos d'appareils accessibles au public — voir <a href="https://opendevicelab.com/">Open Device Labs</a>.</p> </div> <div class="note"> -<p><strong>Note </strong>: Nous devons aussi prendre en considération l'accessibilité — il y a plusieurs outils utiles que vous pouvez installer sur votre machine afin de faciliter les tests d'accessibilité, mais nous les couvrirons dans l'article Gestion des problèmes communs d'accessibilité, plus tard dans le cours.</p> +<p><strong>Note :</strong> Nous devons aussi prendre en considération l'accessibilité — il y a plusieurs outils utiles que vous pouvez installer sur votre machine afin de faciliter les tests d'accessibilité, mais nous les couvrirons dans l'article Gestion des problèmes communs d'accessibilité, plus tard dans le cours.</p> </div> <h3 id="Les_émulateurs">Les émulateurs</h3> <p>Les émulateurs sont essentiellement des programmes qui s'exécutent à l'intérieur de votre ordinateur et simulent des appareils ou des conditions particulières d'appareil d'un certain type, ils vous permettent de faire certains tests plus aisément qu'en ayant à trouver une combinaison de matériels/logiciels à tester.</p> -<p>Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le<a href="/en-US/docs/Tools/Responsive_Design_Mode"> Mode Design Responsive</a> de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans <em>Safari</em> > <em>Préférences</em>, et en cochant <em>Show Develop menu</em>, puis en choisissant <em>Develop > Enter Responsive Design Mode</em>. Chrome propose également quelque chose de similaire : Device mode (voir <a href="https://developers.google.com/web/tools/chrome-devtools/device-mode/">Simuler un Appareil Mobile avec le Device Mode</a>).</p> +<p>Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le<a href="/fr/docs/Tools/Responsive_Design_Mode"> Mode Design Responsive</a> de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans <em>Safari</em> > <em>Préférences</em>, et en cochant <em>Show Develop menu</em>, puis en choisissant <em>Develop > Enter Responsive Design Mode</em>. Chrome propose également quelque chose de similaire : Device mode (voir <a href="https://developers.google.com/web/tools/chrome-devtools/device-mode/">Simuler un Appareil Mobile avec le Device Mode</a>).</p> <p>Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants :</p> @@ -236,7 +236,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies </ul> <div class="note"> -<p><strong>Note </strong>: Beaucoup d'émulateurs requièrent actuellement l'utilisation d'une machine virtuelle (voir en-dessous) ; quand c'est le cas, les instructions sont souvent fournies, et/ou l'utilisation de la machine virtuelle est inclue dans l'installeur de l'émulateur.</p> +<p><strong>Note :</strong> Beaucoup d'émulateurs requièrent actuellement l'utilisation d'une machine virtuelle (voir en-dessous) ; quand c'est le cas, les instructions sont souvent fournies, et/ou l'utilisation de la machine virtuelle est inclue dans l'installeur de l'émulateur.</p> </div> <h3 id="Les_machines_virtuelles">Les machines virtuelles</h3> @@ -244,7 +244,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Les machines virtuelles sont des applications qui s'exécutent sur le bureau de votre ordinateur et vous permettent d'exécuter les simulations de tous les systèmes d'exploitation, chacun compartimenté sur son propre disque dur virtuel (souvent représenté par un seul large fichier existant sur le disque dur de la machine hôte). Il y a plusieurs applis de machine virtuelle populaire, comme <a href="www.parallels.com/">Parallels</a>, <a href="http://www.vmware.com/">VMWare</a>, et <a href="https://www.virtualbox.org/wiki/Downloads">Virtual Box</a>; personnellement, nous préférons la dernière, parce qu'elle est gratuite.</p> <div class="note"> -<p><strong>Note </strong>: Nous avons besoin de beaucoup d'espace disponible sur le disque dur pour exécuter les émulations de machine virtuelle ; chaque système d'exploitation que vous émulez peut prendre beaucoup de mémoire. Vous aurez tendance à choisir l'espace de disque dur que vous voulez pour chaque installation ; vous pouvez vous en sortir avec environ 10Go, mais certaines sources recommandent d'augmenter à 50Go ou plus, alors le système d'exploitation s'éxécutera de façon fiable. Une bonne option fournit par la plupart des applis de machine virtuelle est de créer des disques durs à allocations dynamiques qui grossissent et rétrécissent en fonction que les besoins surviennent.</p> +<p><strong>Note :</strong> Nous avons besoin de beaucoup d'espace disponible sur le disque dur pour exécuter les émulations de machine virtuelle ; chaque système d'exploitation que vous émulez peut prendre beaucoup de mémoire. Vous aurez tendance à choisir l'espace de disque dur que vous voulez pour chaque installation ; vous pouvez vous en sortir avec environ 10Go, mais certaines sources recommandent d'augmenter à 50Go ou plus, alors le système d'exploitation s'éxécutera de façon fiable. Une bonne option fournit par la plupart des applis de machine virtuelle est de créer des disques durs à allocations dynamiques qui grossissent et rétrécissent en fonction que les besoins surviennent.</p> </div> <p>Pour utiliser Virtual Box, vous avez besoin de :</p> @@ -252,7 +252,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <ol> <li>Procurez-vous un disque d'installation ou une image (par ex. un ISO) du système d'exploitation que vous voulez émuler. Virtual Box est en mesure de vous les fournir ; la plupart, comme les OSs de Windows, sont des produits commerciaux qui ne peuvent être distribués gratuitement.</li> <li><a href="https://www.virtualbox.org/wiki/Downloads">Téléchargez l'installeur approprié</a> pour votre système d'exploitation et installez-le.</li> - <li>Ouvrez l'appli ; vous verrez une vue ressemblant à ceci : <img alt="" src="https://mdn.mozillademos.org/files/14089/virtualbox.png" style="display: block; height: 512px; margin: 0px auto; width: 700px;"></li> + <li>Ouvrez l'appli ; vous verrez une vue ressemblant à ceci : <img alt="" src="virtualbox.png"></li> <li>Pour créer une nouvelle machine virtuelle, appuyer sur le bouton <em>Nouveau</em> dans le coin en haut à gauche.</li> <li>Suivez les instructions et remplissez les boîtes de dialogues suivantes comme il se doit. Vous allez : <ol> @@ -267,15 +267,15 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Maintenant la nouvelle virtual box devrait apparaître dans le menu gauche de la fenêtre de l'interface principale de Virtual Box. A ce stade, vous pouvez double-cliquer dessus pour ouvrir la virtual box — cela commencera à démarrer la machine virtuelle, mais il n'y aura pas encore le système d'exploitation d'installé. A cet instant vous devez préciser à la boîte de dialogue l'image de votre programme d'installation, et les étapes s'exécuteront une par une dans la machine virtuelle, exactement comme si c'était un vrai ordinateur.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14085/virtualbox-installer.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="virtualbox-installer.png"></p> <div class="warning"> -<p><strong>Important </strong>: Vous devez vous assurez que vous avez l'image du système d'exploitation que vous voulez installer sur la machine virtuelle existante à ce stade, et l'installer complètement. Si vous annulé le processus à ce stade, cela peut rendre la machine virtuelle inutilisable, et vous amener à la supprimer et en créer une nouvelle. Ce n'est pas fatal, mais c'est ennuyant.</p> +<p><strong>Attention :</strong> Vous devez vous assurez que vous avez l'image du système d'exploitation que vous voulez installer sur la machine virtuelle existante à ce stade, et l'installer complètement. Si vous annulé le processus à ce stade, cela peut rendre la machine virtuelle inutilisable, et vous amener à la supprimer et en créer une nouvelle. Ce n'est pas fatal, mais c'est ennuyant.</p> </div> <p>Une fois que le processus est complété, vous devriez avoir une machine virtuelle exécutant un système d'exploitation à l'intérieur d'une fenêtre sur votre ordinateur hôte.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14087/virtualbox-running.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="virtualbox-running.png"></p> <p>Vous devez vous occuper de l'installation de ce système d'exploitation virtuel exactement comme d'une installation réelle — par exemple, de même que vous devez installer les navigateurs que vous voulez tester, installez un programme d'antivirus pour vous protégez des virus.</p> @@ -293,7 +293,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies </ul> <div class="note"> -<p><strong>Note </strong>: Une autre bonne chose à propos des machines virtuelles, c'est que les images de disque virtuel sont clairement autonomes. Si vous travaillez en équipe, vous pouvez créer une image disque, puis la copier et vous la passer. Assurez-vous juste d'avoir les licences requises pour exécuter toutes les copies de Windows ou qu'importe ce que vous exécutez, si c'est un produit licencié.</p> +<p><strong>Note :</strong> Une autre bonne chose à propos des machines virtuelles, c'est que les images de disque virtuel sont clairement autonomes. Si vous travaillez en équipe, vous pouvez créer une image disque, puis la copier et vous la passer. Assurez-vous juste d'avoir les licences requises pour exécuter toutes les copies de Windows ou qu'importe ce que vous exécutez, si c'est un produit licencié.</p> </div> <h3 id="Automatisation_et_applis_commerciales">Automatisation et applis commerciales</h3> @@ -329,11 +329,11 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <p>Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en train de tester est aussi "pure" que possible. C-à-d qu'il n'y a rien d'installé qui pourrait affecter les résultats des tests.</p> <div class="note"> -<p><strong>Note </strong>: Une autre option faiblement utile, si vous avez le matériel disponible est de tester vos sites sur des téléphones bas de gammes/d'autres appareils — plus vos sites vont s'agrandir et les fonctionnalités avoir plus d'effets, plus vous avez des chances que votre site subisse des ralentissements, il vous faut donc prendre la performance comme une nouvelle considération importante. Essayer de faire marcher vos fonctionnalités sur des appareils bas de gamme, cela rendra l'expérience bien meilleure sur des appareils haut de gamme.</p> +<p><strong>Note :</strong> Une autre option faiblement utile, si vous avez le matériel disponible est de tester vos sites sur des téléphones bas de gammes/d'autres appareils — plus vos sites vont s'agrandir et les fonctionnalités avoir plus d'effets, plus vous avez des chances que votre site subisse des ralentissements, il vous faut donc prendre la performance comme une nouvelle considération importante. Essayer de faire marcher vos fonctionnalités sur des appareils bas de gamme, cela rendra l'expérience bien meilleure sur des appareils haut de gamme.</p> </div> <div class="note"> -<p><strong>Note </strong>: Certains environnement de développement côté serveur fournissent des mécanismes très utiles pour sortir les modifications sur le site pour seulement un sous-ensemble d'utilisateurs, très utile pour sortir des fonctionnalités testées par un sous-ensemble d'utilisateurs sans avoir besoin de mettre en place un serveur de développement séparé. Un bon exemple est <a href="https://github.com/jsocol/django-waffle">Django Waffle Flags</a>.</p> +<p><strong>Note :</strong> Certains environnement de développement côté serveur fournissent des mécanismes très utiles pour sortir les modifications sur le site pour seulement un sous-ensemble d'utilisateurs, très utile pour sortir des fonctionnalités testées par un sous-ensemble d'utilisateurs sans avoir besoin de mettre en place un serveur de développement séparé. Un bon exemple est <a href="https://github.com/jsocol/django-waffle">Django Waffle Flags</a>.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -349,14 +349,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> - <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> </ul> <p> </p> diff --git a/files/fr/learn/tools_and_testing/github/index.html b/files/fr/learn/tools_and_testing/github/index.html index 31795e70df..07494d8d8a 100644 --- a/files/fr/learn/tools_and_testing/github/index.html +++ b/files/fr/learn/tools_and_testing/github/index.html @@ -14,7 +14,7 @@ original_slug: Apprendre/Outils_et_tests/GitHub --- <div>{{LearnSidebar}}</div> -<p class="summary">Tous les développeurs utiliseront une sorte de <strong>système de contrôle des versions</strong> (<em>version control system</em> ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est <strong>Git</strong>, ainsi que <strong>GitHub</strong>, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.</p> +<p>Tous les développeurs utiliseront une sorte de <strong>système de contrôle des versions</strong> (<em>version control system</em> ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est <strong>Git</strong>, ainsi que <strong>GitHub</strong>, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.</p> <h2 id="Vue_densemble">Vue d'ensemble</h2> @@ -29,16 +29,16 @@ original_slug: Apprendre/Outils_et_tests/GitHub <p>Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. <a href="https://git-scm.com/">Git</a> est un exrmple d'un tel système, et <a href="https://github.com/">GitHub</a> est un site web avec une infrastructure qui propose un serveur Git et d'autres outils très pratiques pour travailler avec des dépôts Git individuellement ou en équipe, tel que le rapportage de problèmes liés au code, la relecture et validation de code, la gestion de projet par différentes fonctions comme l'assignation de tâches et les statistiques sur l'utilisation de tâches, et plus encore.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Git est actuellement un système de contrôle des versions <em>distribué</em>, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.</p> +<div class="note"> +<p><strong>Note :</strong> Git est en fait un système de contrôle des versions <em>distribué</em>, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.</p> </div> <div class="callout"> -<h3 id="Vous_cherchez_à_devenir_un_développeur_web_front-end">Vous cherchez à devenir un développeur web front-end ?</h3> +<p>Vous cherchez à devenir un développeur web front-end ?</p> <p>Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Commencer</a></p> +<p><a href="/docs/Learn/Front-end_web_developer">Commencer</a></p> </div> <h2 id="Prérequis">Prérequis</h2> @@ -55,8 +55,8 @@ original_slug: Apprendre/Outils_et_tests/GitHub <p>Il est aussi préférable que vous ayiez quelques connaissances fondamentales sur le terminal, par exemple du déplacement entre dossiers, de la création de fichiers et de la modification du <code>PATH</code> du système.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Github n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que <a href="https://about.gitlab.com/">GitLab</a> que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.</p> +<div class="note"> +<p><strong>Note :</strong> GitHub n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que <a href="https://about.gitlab.com/">GitLab</a> que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.</p> </div> <h2 id="Guides">Guides</h2> @@ -76,8 +76,8 @@ original_slug: Apprendre/Outils_et_tests/GitHub <dd>Les <em>issues</em> (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des <em>issues</em>.</dd> </dl> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Il existe <strong>beaucoup d'autres</strong> choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> et<a href="https://dangitgit.com/"> Dangit, git!</a></p> +<div class="note"> +<p><strong>Note :</strong> Il existe <strong>beaucoup d'autres</strong> choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> et<a href="https://dangitgit.com/"> Dangit, git!</a></p> </div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/learn/tools_and_testing/index.html b/files/fr/learn/tools_and_testing/index.html index 49178ba3ef..4eaf03b5c7 100644 --- a/files/fr/learn/tools_and_testing/index.html +++ b/files/fr/learn/tools_and_testing/index.html @@ -17,19 +17,19 @@ original_slug: Apprendre/Outils_et_tests --- <div>{{LearnSidebar}}</div> -<p class="summary">Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.</p> +<p>Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.</p> <p>L'industrie du web est un endroit excitant où travailler, mais ce n'est pas sans ses complications. Les technologies de base que nous utilisons pour concevoir des sites web sont assez stables maintenant, mais de nouvelles fonctionnalités sont ajoutées continuellement, et de nouveaux outils — qui les rendent faciles d'utilisation, et sont construits sur ces technologies — apparaissent constamment. En plus de cela, il ne faut pas oublier de vérifier que notre code utilise les meilleures pratiques qui permettront à notre projet de fonctionner sur différents navigateurs et appareils, et d'être aussi utilisable par des personnes ayant un handicap.</p> <p>Savoir précisément quels outils prendre peut parfois être une tâche difficile, c'est pourquoi nous avons écrit cette séries d'articles, afin de vous expliquer quels types d'outils existent, ce qu'ils peuvent faire pour vous et comment se servir des plus utilisés dans l'industrie.</p> <div class="note"> -<p><strong>Note</strong>: parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.</p> +<p><strong>Note :</strong> parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.</p> </div> <h2 id="Parcours_d'apprentissage">Parcours d'apprentissage</h2> -<p>Vous devriez vraiment apprendre les langages de base <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.</p> +<p>Vous devriez vraiment apprendre les langages de base <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.</p> <p>Vous avez d'abord besoin d'une base solide.</p> @@ -38,6 +38,6 @@ original_slug: Apprendre/Outils_et_tests <dl> <dt>Outils de développement web</dt> <dd>Dans ce module, nous explorons les différents types d'outils de développement web. Ceci inclut de connaître les tâches les plus courantes que vous serez amenés à résoudre, comment les intégrer au sein d'un workflow, et les meilleurs outils actuellement disponibles afin d'effectuer ces tâches.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Test à travers différents navigateurs</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Test à travers différents navigateurs</a></dt> <dd>Ce module est orienté spécifiquement vers les tests de projets web à travers différents navigateurs. Ici on cherche à identifier quel type d'audience vous ciblez (ex. de quels utilisateurs, navigateurs et appareils avez vous le plus besoin de vous soucier?), comment faire des tests, les principaux problèmes auxquels vous devrez faire face avec différents types de codes et comment en venir à bout, quels outils sont les plus adaptés pour vous aider à cerner et résoudre ces problèmes, et comment utiliser l'automatisation afin d'accélérer les tests.</dd> </dl> diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html index 9905d1e7ae..ff9e62f0b8 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html @@ -18,7 +18,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <p>Au cours de tout process de développement, vous allez très certainement être confronté à la nécessité d'exécuter des commandes dans un terminal (ce que l'on appelle "travailler en ligne de commande"). Cet article vous propose une introduction au terminal et vous dévoile les commandes essentielles dont vous aurez besoin, la façon de les chaîner, et comment ajouter vos propres outils d'interface en ligne de commande (CLI, command line interface).</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -129,7 +129,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ </ul> <div class="note"> -<p><strong>Note </strong>: On trouve sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre <a href="https://terminal.training/?coupon=mdn">série de vidéos de formation au terminal</a> (80% de réduction en utilisant le code mdn au moment du paiement — 19$).</p> +<p><strong>Note :</strong> On trouve sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre <a href="https://terminal.training/?coupon=mdn">série de vidéos de formation au terminal</a> (80% de réduction en utilisant le code mdn au moment du paiement — 19$).</p> </div> <p>Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !</p> @@ -153,7 +153,7 @@ original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_ <pre class="brush: bash">cd ..</pre> <div class="note"> -<p><strong>Note</strong>: Raccourci vraiment utile sur un terminal, la touche <kbd>tab</kbd> émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper <code>cd B</code> puis de presser la touche <kbd>tab</kbd> — cela devrait saisir automatiquement le nom de répertoire <code>Bureau</code>, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.</p> +<p><strong>Note :</strong> Raccourci vraiment utile sur un terminal, la touche <kbd>tab</kbd> émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper <code>cd B</code> puis de presser la touche <kbd>tab</kbd> — cela devrait saisir automatiquement le nom de répertoire <code>Bureau</code>, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.</p> </div> <p>Si le répertoire que vous visez est placé assez loin dans l'arborisation des fichiers, il vous faut connaître le chemin (on dit souvent path, qui est le terme anglais) pour vous y rendre. Cela devient en général plus facile à mesure que vous vous familiarisez avec la structure de votre système de fichiers, mais si vous n'êtes pas sûr vous pouvez le retrouver en combinant la commande <code>ls</code> avec des clicks dans votre Explorer ou autre gestionnaire graphique de fichiers, ce qui va vous permettre de voir où se trouve le répertoire (ou dossier) cherché par rapport à votre répertoire actuel (= répertoire courant).</p> @@ -171,7 +171,7 @@ cd src</pre> <p>Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple <code>/Utilisateurs/votre-nom/Bureau</code>. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".</p> <div class="note"> -<p><strong>Note</strong>: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. <code>cd Bureau\projet\src</code> — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,<a href="https://www.youtube.com/watch?v=5T3IJfBfBmI"> regardez cette vidéo YouTube</a> (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.</p> +<p><strong>Note :</strong> Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. <code>cd Bureau\projet\src</code> — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,<a href="https://www.youtube.com/watch?v=5T3IJfBfBmI"> regardez cette vidéo YouTube</a> (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.</p> </div> <h3 id="Lister_le_contenu_dun_répertoire">Lister le contenu d'un répertoire</h3> @@ -199,11 +199,11 @@ cd src</pre> <p><img alt="A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command" src="mac-terminals-ls.png"></p> <div class="note"> -<p><strong>Note</strong>: Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa <a href="https://fr.wikipedia.org/wiki/Man_(Unix)">page de manuel</a> (<a href="https://en.wikipedia.org/wiki/Man_page">man page</a> en anglais). Pour cela, tapez la commande <code>man</code> suivie du nom de la commande que vous cherchez, par exemple <code>man ls</code>. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, <code><a href="https://en.wikipedia.org/wiki/Less_(Unix)">less</a></code> sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour <code>less</code> c'est "q" ; si ce n'est pas évident cherchez sur Internet).</p> +<p><strong>Note :</strong> Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa <a href="https://fr.wikipedia.org/wiki/Man_(Unix)">page de manuel</a> (<a href="https://en.wikipedia.org/wiki/Man_page">man page</a> en anglais). Pour cela, tapez la commande <code>man</code> suivie du nom de la commande que vous cherchez, par exemple <code>man ls</code>. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, <code><a href="https://en.wikipedia.org/wiki/Less_(Unix)">less</a></code> sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour <code>less</code> c'est "q" ; si ce n'est pas évident cherchez sur Internet).</p> </div> <div class="note"> -<p><strong>Note</strong>: Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple <code>ls -lah</code>, ou <code>ls -ltrh</code>. Exercez-vous à consulter la page man de <code>ls</code> pour savoir ce que vous donnent ces options !</p> +<p><strong>Note :</strong> Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple <code>ls -lah</code>, ou <code>ls -ltrh</code>. Exercez-vous à consulter la page man de <code>ls</code> pour savoir ce que vous donnent ces options !</p> </div> <p>Maintenant que vous connaissez ces deux commandes fondamentales, allez un peu fouiller dans votre système de fichiers en naviguant à partir de votre répertoire.</p> @@ -224,7 +224,7 @@ cd src</pre> </ul> <div class="note"> -<p><strong>Note</strong> : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, <code>rm mdn-*</code> va effacer tous les fichiers qui commencent par <code>mdn-</code>. <code>rm mdn-*.bak</code> va effacer tous les fichiers qui commencent par <code>mdn- </code>et finissent par <code>.bak</code>.</p> +<p><strong>Note :</strong> Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, <code>rm mdn-*</code> va effacer tous les fichiers qui commencent par <code>mdn-</code>. <code>rm mdn-*.bak</code> va effacer tous les fichiers qui commencent par <code>mdn- </code>et finissent par <code>.bak</code>.</p> </div> <h2 id="Le_terminal_—_une_pratique_à_risque">Le terminal — une pratique à risque ?</h2> @@ -454,7 +454,7 @@ printMe(myObj);</pre> <li>En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que <a href="https://github.com/features/actions">Github Actions</a>.</li> </ul> -<p>Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque enregistrement. Vous trouverez dans les<span> </span><a href="https://prettier.io/docs/en/">Prettier docs</a><span> </span><span>beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.</span></p> +<p>Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque enregistrement. Vous trouverez dans les <a href="https://prettier.io/docs/en/">Prettier docs</a> beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.</p> <h2 id="Autres_outils_à_essayer">Autres outils à essayer</h2> diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html index c954b9395a..e19a510d2f 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html @@ -17,23 +17,23 @@ translation_of: Learn/Tools_and_testing/Understanding_client-side_tools --- <div>{{LearnSidebar}}</div> -<p class="summary">Les outils côté client peuvent être intimidants, mais cette série d'articles vise à illustrer le but de certains des types d'outils côté client les plus courants, à expliquer les outils que vous pouvez enchaîner, comment les installer à l'aide de gestionnaires de packages et les contrôler à l'aide de la ligne de commande. Nous terminons en fournissant un exemple complet de chaîne d'outils vous montrant comment devenir productif.</p> +<p>Les outils côté client peuvent être intimidants, mais cette série d'articles vise à illustrer le but de certains des types d'outils côté client les plus courants, à expliquer les outils que vous pouvez enchaîner, comment les installer à l'aide de gestionnaires de packages et les contrôler à l'aide de la ligne de commande. Nous terminons en fournissant un exemple complet de chaîne d'outils vous montrant comment devenir productif.</p> <h2 id="Conditions_prérequises">Conditions prérequises</h2> -<p>Vous devez vraiment apprendre les bases des langages <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, et <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> avant d'essayer d'utiliser les outils détaillés ici.</p> +<p>Vous devez vraiment apprendre les bases des langages <a href="/fr/docs/Learn/HTML">HTML</a>, <a href="/fr/docs/Learn/CSS">CSS</a>, et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> avant d'essayer d'utiliser les outils détaillés ici.</p> <h2 id="Guides">Guides</h2> <dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Vue d'ensemble de l'outillage côté client</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Vue d'ensemble de l'outillage côté client</a></dt> <dd>Dans cet article, nous vous proposons un aperçu des outils Web modernes, des types d'outils disponibles et de l'endroit où vous les rencontrerez dans le cycle de vie du développement d'applications Web, et comment trouver de l'aide sur des outils individuels.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Cours intensif en ligne de commande</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Cours intensif en ligne de commande</a></dt> <dd>Dans votre processus de développement, vous devrez sans aucun doute exécuter une commande dans le terminal (ou sur la "ligne de commande" - ce sont en fait la même chose). Cet article fournit une introduction au terminal, les commandes essentielles que vous devrez y saisir, comment enchaîner des commandes et comment ajouter vos propres outils d'interface de ligne de commande (CLI).</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Principes de base de la gestion des paquets</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Principes de base de la gestion des paquets</a></dt> <dd>Dans cet article, nous examinerons en détail les gestionnaires de paquets pour comprendre comment nous pouvons les utiliser dans nos propres projets - pour installer les dépendances des outils de projet, les maintenir à jour, etc.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introduction d'une chaîne d'outils complète</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introduction d'une chaîne d'outils complète</a></dt> <dd>Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Déployer notre application</a></dt> + <dt><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Déployer notre application</a></dt> <dd>Dans le dernier article de notre série, nous prenons l'exemple de chaîne d'outils que nous avons construit dans l'article précédent et nous l'ajoutons afin de pouvoir déployer notre exemple d'application. Nous poussons le code sur GitHub, le déployons à l'aide de Netlify et vous montrons même comment ajouter un test simple au processus.</dd> </dl> |